antd form rules字数限制_【React】antd的form表单的自定义校验规则的用法

在用到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