Ant Design Vue Form表单自定义验证规则

当我们在使用Ant Desing Vue的Form表单时，有时默认的表单验证不能满足我们的要求，比如我的一个input输入框，必须要求输入正整数时，就需要我们自己写一个验证方法。那么如何来自定义一个验证规则呢？

首先，在template里定义form对象时，在rules属性里添加一个validator，后面的checkPositiveInteger方法就是我们自定义的验证规则。代码如下：

<a-form-item label="字段长度">
   <a-input
    v-decorator="['columnLength', 
      { rules: [
        { required: true, message: '请输入字段长度' },
        { validator: checkPositiveInteger }]
       }]"
   />
</a-form-item>

然后在methods里写自定义规则的方法：

    // 自定义校验函数，要求输入的是一个正整数
    checkPositiveInteger(rule, value, callback) {
      const number = Number(value);
      if (!Number.isInteger(number) || number < 0) {
        // 如果需要返回 error msg，就把它传给 `callback()`
        callback('请输入大于等于0的整数');
      } else {
        // 如果通过校验，调用无参数的 `callback()` 即可
        callback();
      }
    }

其中vulue是表单的值，callback是回调函数，必须调用的。搞定，收工！