React + Ant Design Form 表单自定义校验

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>