IT姑凉公众号原创文章，如需转载请注明出处，谢谢~
https://mp.weixin.qq.com/s/-Iyc6RQB_vH-NcvuO5nNrw
Ant Design 的Form 组件自定义校验
表单校验
将 validator 放在 rules 的数组中
<Form.Item label="姓名">
{getFieldDecorator('userName', {
rules: [{
required: true,
message: '请输入姓名！',
},{
validator: this.checkVal
}]
})(<Input placeholder="请输入姓名"/>)}
</Form.Item>
自定义校验方法
调用方法：当 value 在变化的时候请求接口，根据接口返回的值，调用 callback 回调函数
checkVal = (rule, value, callback) => {
if (!value) {
callback();
}
const { dispatch } = this.props;
dispatch({
type: 'xxxx/xxxxxx',
payload: value,
}).then(function (res) {
if ("满足条件") {
callback();
} else {
callback("条件不满足的提示");
}
});
}
方法由3个参数组成，rule 是规则，value 是你输入的值，callback 是个回调函数
不管 callback 是否返回提示内容，都要写 callback 这个函数，不返回内容需要写个空的 callback() ，否则表单校验通不过
新版的 antd 表单字段校验方法原来的回调方法改成返回一个 Promise 对象
const checkVal = (_, val) => {
if ("满足条件") {
return Promise.resolve();
} else {
return Promise.reject("条件不满足的提示");
}
};
debounce防抖
由于校验需要调用接口，为减少请求次数，需要自己写个debounce防抖方法
防抖就是指触发事件后在 n 秒内函数只能执行一次，如果在 n 秒内又触发了事件，则会重新计算函数执行时间
debounce = (fn, delay=500) => {
return (...rest) => {
let args = rest;
if (this.timerId) clearTimeout(this.timerId);
this.timerId = setTimeout(() => {
fn.apply(this, args)
}, delay)
}
}
修改表单校验调用方法
<Form.Item label="姓名">
{getFieldDecorator('userName', {
rules: [{
required: true,
message: '请输入姓名！',
},{
validator: this.debounce(this.checkVal, 500)
}]
})(<Input placeholder="请输入姓名"/>)}
</Form.Item>
