ant.design自定义验证续

昨天在<a href="http://www.jianshu.com/p/886ba4338815">轻松实现ant.design中自定义组件验证</a>中谈了使用this.props.onChange成功使用上了ant.design的系统验证方式，不过昨天只以required验证来举例。进一步想，如果要实现验证tag，除了在保存的时候主动验证之外，还有其它方式来实现吗？其实ant.design内部使用了async-validator，通过阅读async-validator的文档，了解到每个rule其实都是可以定制validator。

validator是个函数，其中有三个参数很重要：rule,value和callback。

. rule：这个是规则，可以不用
. value：这个是要验证的值
. callback：这个是回调函数，验证出错后可以把错误信息作为参数调用callback

理解了这三个参数后，就很容易写一个定制的validator，最后我们的代码是这样的：

<FormItem
                    label="标签"
                    labelCol={{ span: 6 }}
                    wrapperCol={{ span: 14 }}>
                    {getFieldDecorator('tags', {
                        rules: [{
                            required: true,
                            type:'array',
                            message:'必填',
                        },{
                            validator(rule, values, callback){
                                if(values && values.length>0){
                                    values.map((value,i)=>{
                                        if(value.name.length > 16 ){
                                            callback(`第${i+1}个标签超过16个字符`);
                                        }else if(value.name.length == 0){    
                                            callback(`第${i+1}个标签不能为空`);
                                        }else{    
                                            callback();
                                        }
                                    });
                                }else{
                                    callback();
                                }
                            }
                        }],
                    })(
                        <MyTag />
                    )}
                </FormItem>

至此可以删除在上篇文章里的addTag中的验证代码了