antd表单中的validateFields没有被执行可能的问题及解决

文中所描述的问题及解决,仅在antd 3.x版本使用过

今天在做一个修改密码的功能,逻辑极为简单,没有什么花头,然而在获取短信验证码的时候,如下代码中的form.validateFields的回调函数一直得不到执行,翻了两遍官方文档都没有找出问题。

onGetSMS = () => {
    const { form, sendSmsModifyPWD, sendEmailForResetPassword } = this.props;
    const { type } = this.state;
    form.validateFields(["phone"], (errors, values) => {
      if (!errors) {
        ...
      }
    });
}

后来,同事提醒一句会不会是phone 的验证函数写的有问题,翻出来仔细看了一下,果然有坑。。。

phoneValidator = (rule, value, callback) => {
    const regexp = new RegExp(/^1(3|4|5|6|7|8)\d{9}$/);
    if (value) {
      if (!regexp.test(value)){
        callback('手机号格式错误!');
      }
    } else {
      callback();
    }
  };

上面的代码中,在手机号码格式验证通过后,没有写else,没有任何动作,当然也没有调用callback , 可是在 antd 中明确写到自定义校验(注意,callback 必须被调用) (传送门),所以就悲剧了

代码修改为如下所示,就可以愉快的下班了

phoneValidator = (rule, value, callback) => {
    const regexp = new RegExp(/^1(3|4|5|6|7|8)\d{9}$/);
    if (value && !regexp.test(value)) {
      callback('手机号格式错误!');
    } else {
      callback();
    }
  };

你可能感兴趣的:(WEB前端,react,javascript,antd)