在用到antd的Form组件的时候,可能会用到自定义的规则,以我的项目为例:在输入名称的时候需要请求接口,校验的内容是后台返回的内容,所以这个时候需要用到自定义的校验规则
屏幕快照 -06-18 下午11.18.29.png
关于自定义校验方法:antd官网提供了方法validator,如下:函数由3个参数组成,rule是规则,value是你输入的值,callback是个回调函数
屏幕快照 -06-18 下午11.26.10.png
那么具体的写法如下:将validator放在rules的数组中
{ getFieldDecorator(field, { rules:[{ required:required, message: requiredMsg, },{ validator: this.validateServiceName }], })( ) } ;
调用的方法如下:当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上的这篇文档:/ant-design/ant-design/issues/5155