antd的form表单自定义规则使用validator的注意事项

当我们在开发的时候用form表单经常会出现很多特殊的需求，antd本身所提供的都是比较常用的规则，比如输入的长度，是否必填，枚举类型等等。。。所以特殊需求我们就需要使用自定义规则validator。

使用它的时候有俩个注意事项：

1. 最后必须callback一个信息回来
2. 如果效验时代码出错会导致全部规则失效

案例：

笔者在开发的过程中就遇到过第二种情况，中间代码出错导致全部的rule失效：
错误代码：

<Form.Item>
  {form.getFieldDecorator(`unitName_${info.index}_${info.expertId}`, {
    initialValue: info.isExpert ? '学时' : info.unitName,
    rules: [
      { required: true, message: '必填' },
      { validator: (rule, value, callback) => {
      		  // 这个规则可以使用max实现，在这里只是做个示范
		      if (value.length > 10) {
		        callback('计量单位不可超过10个字符');
		      }
		      callback();
		  }},
     ],
  })(<Input disabled={info.isExpert} />)}
</Form.Item>

上方的这个代码在你提交表单的时候如果不填写它，它就不会触发所有的rule。
原因是因为你没有输入这个值，验证validator的时候value.length的时候就会报错，因为你的value是一个undefined。这就是导致所有rule失效的原因。
当我们遇到失效的时候可以用try{}catch(err){}来捕获异常，示例代码如下：

(rule, value, callback) => {
    try {
      if (value.length > 10) {
        callback('计量单位不可超过10个字符');
      }
      callback();
    } catch (err) {
      callback(err);
    }
  }

这时候当你在提交的时候他就会把你catch里捕获的异常提示出来了。
关于我上面的示例的错误解决办法是给value一个默认值：

(rule, value = '', callback) => {
    try {
      if (value.length > 10) {
        callback('计量单位不可超过10个字符');
      }
      callback();
    } catch (err) {
      callback(err);
    }
  }

这样就完美解决了~