解决Antd表单自定义验证规则失效以及导致所有rule验证失效问题

在项目中，使用Antd自定义表单验证时不生效或者导致所有验证不生效，调试台显示:

自定义验证须满足:

• 自定义验证规则中必须callback一个信息回来，即每种判断情况都要加callback
• 校验时自定义监听方法的代码不出现异常，不然会导致全部规则失效

我当时就是自定义验证方法里出现了异常，导致自定义以及其他非自定义的所有rule验证都失效了，没有表单的验证错误提示。

自定义规则：handleCheckTpl

rules: [
           {required: true, message: '不能为空！'},
           {validator: this.handleCheckTpl }
       ]

---

错误写法:

handleCheckTpl = (rule, value, callback) =>　{
     if (value.file) {
         if (value.file.status === 'removed') {
             callback('请上传合同模板');
         } else {
             callback();
         }
     }else{
         callback();    // callback方法必须要有，否则会报错
     }
};

上方的这个自定义验证规则的代码在提交表单的时候如果不填写对应的值，就会使所有的rule都不会触发，没有验证错误提示。

原因是因为你没有输入这个值，验证validator的时候value.file的时候就会报错，因为此时value是一个undefined。这就导致了所有rule失效。

---

当我们遇到自定义验证失效的时候可以用try{}catch(err){}来捕获异常，代码如下：

正确写法：

handleCheckTpl = (rule, value, callback) =>　{
   try {
     if (value.file) {
         if (value.file.status === 'removed') {
             callback('请上传合同模板');
         } else {
             callback();
         }
     }else{
         callback(); 
     }
   } catch (err) {
        callback();
     }
};

---

欢迎访问本文的个人博客链接： https://br-bai.github.io/2020/03/12/解决Ant Design表单自定义验证规则失效以及导致所有rule验证失效问题