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

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

屏幕快照 2019-06-18 下午11.18.29.png

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

屏幕快照 2019-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()那么是进不来这个判断中的

}

})