element form自定义校验_【React】antd的form表单的自定义校验规则的用法

在用到antd的Form组件的时候，可能会用到自定义的规则，以我的项目为例：在输入名称的时候需要请求接口，校验的内容是后台返回的内容，所以这个时候需要用到自定义的校验规则

关于自定义校验方法：antd官网提供了方法validator，如下：函数由3个参数组成，rule是规则，value是你输入的值，callback是个回调函数

那么具体的写法如下：将validator放在rules的数组中

<FormItem label={label} {...formItemLayout} key={field}>
  {
      getFieldDecorator(field, {
           rules:[{
                   required:required,
                   message: requiredMsg,
                },{
                    validator: this.validateServiceName
                   }],
             })(
                    <Input  type="text" placeholder='test'   />
                 )
     }
   </FormItem>;

调用的方法如下：当value在变化的时候请求接口，通过接口返回的值传给callback回调函数

//注意：在这里我只用到了value和callback，没有自定义rule
  validateServiceName =(rule, value, callback)=>{
        console.log(value)
        this.setState({
           onlyName: value 
        },()=>{
            this.nameChange(callback)
        })
    }
    //这块是请求接口的方法：
    nameChange =(callback)=> {
        axios.get("/api/credit-serve/serve/checkServeName",
            {params:{serveName: this.state.onlyName}
        }
    )
        .then(res=>{
            if(res.data.responseCode === 0){
                callback()  //在这里也要写个callback
            }else{
                callback(res.data.responseMsg)
            }
        })

    }

注意⚠️：不管你callback返回不返回提示的内容，都要写callback这个函数，不返回内容写个空的callback()，如果不写的话，在form表单中 用this.save.props.form.validateFields校验是进不来if(!err)这个判断中的

this.save.props.form.validateFields((err, values)=>{
 if(!err){
     //如果上面在请求成功后不写callback()那么是进不来这个判断中的
            }
        })

具体可以参考GitHub上的这篇文档：https://github.com/ant-design/ant-design/issues/5155