Form表单自定义验证规则

在开发过程中，form表单的验证用的十分广泛，可以说只要需要用户输入就肯定会有验证，不然就乱套了哈哈哈，但是默认的验证的适用性虽然广，但是在一些特殊验证需求上又很有限，所以就需要有自定义验证规则。

因此在使用antD的form来管理我们的表单的时候，我们需要自定义规则校验某个字段，这个时候就可以在rules里面添加validator属性，指向我们定义的方法。（举个简单例子 比如我的自定义校验规则是是否输入重复的名称）

 <Form.Item
      label="名称"
      labelCol={
   
   { span: 7 }}
      wrapperCol={
   
   { span: 14 }}
 >
            {getFieldDecorator("key", {
              rules: [
                { required: true, message: "请输入名称" },
                { validator: isRepeat } //校验名称是否重复
              ]
            })(<Input placeholder="请输入" maxLength="64" />)}
</Form.Item>

//这个是校验规则的函数  
//rule应该是当前检测form的名称等信息 具体在下面用图展示具体内容
//value表示当前form表单内容，callback则是校验的返回函数
const isRepeat = (rule, value, callback) => {
    if (arrs.length > 0 && arrs.filter(item => item.newKey == value).length > 0) {
      return callback("自定义配置项名称重复");
    } else {
      return callback();
    }
  };

值得注意的是 必须要有callback（）  当callback内为空则表示该条件下校验通过，否则callback内的就是校验未通过后显示的名字

↓这个就是参数rule的信息