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是回调函数,必须调用的。搞定,收工!

阅读 10.7k

有为法
前端知识边学边写,为自己积累,也希望能为别人解惑。

一切有为法 如梦幻泡影

532 声望
20 粉丝
0 条评论
你知道吗?

一切有为法 如梦幻泡影

532 声望
20 粉丝
宣传栏