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

最新推荐文章于 2024-01-12 14:19:16 发布

原创最新推荐文章于 2024-01-12 14:19:16 发布 · 1.4w 阅读

3 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#react #javascript #antd

WEB前端专栏收录该内容

54 篇文章

订阅专栏

本文探讨了在Ant Design 3.x版本中实现修改密码功能时遇到的表单验证问题。详细分析了自定义验证函数中遗漏callback调用导致的bug，并提供了修正后的代码示例。

文中所描述的问题及解决，仅在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();
    }
  };