iview form表单数值类型校验「iview自定义form表单校验器」

摘录iview表单验证

Form 组件基于 sync-validator 实现的数据验证,给 Form 设置属性 rules,同时给需要验证的 FormItem 设置属性 prop 指向对应字段即可。

完整的验证规则请参照开源项目 sync-validator

验证方法也支持 Promise

综上,我们知道了 iview 使用的是 sync-validator

数值方式校验

当我们使用 Form 表单校验时,如果字段使用的是 String 类型,显然通过 required:true 即可满足,但如果是数值时可就不能这么校验了,怎么办呢?

👉自定义校验


X 错误示范
formValidate: {
    money: [{ required: true, message: "金额不能为空", trigger: "blur" }]
},
✓ 自定义校验方式
formValidate: {
    money: [{  validator: validateMoney, trigger: 'blur' ,required:true }]
},

我们用到了 validator 属性,在这我们引入了自己定义的校验规则 validateMoney,该方法可以放在公共部分,具体如下:

 const validateMoney = (rule, value, callback) => {
    let reg =/^[1-9]{1}\d{2,}$/// 检验规则为正则,可自行百度。
    if(reg.test(value)){
        callback();
    }else {
        return callback(new Error("请输入100及以上的整数"));
    }
};

三个参数:

  1. rule 字段名称相对应的验证规则。始终为它分配一个 field 属性,其中包含要验证的字段的名称。
  2. value 表示当前输入的值。
  3. callback 验证完成时调用的回调函数,回传 Error 表示失败。

另外一种方式

使用提供的 pattern 属性,采用正则验证一下。

formValidate: {
    money: [{ required: true, pattern: /^[1-9]{1}\d{2,}$/, message: '请输入100及以上的整数', trigger: "blur" }]
},

ok,如上两种方式应该都能满足你的需求了,采用自定义校验器方式可以得到更多支持,毕竟拿到 value 可以各种骚操作了嘛~

最后,如果觉得文章对你有所帮助,麻烦点个推荐~ 「终于50个粉丝了,加油!」

posted @ 2019-12-14 21:50  niceyoo  阅读(3724)  评论(0编辑  收藏  举报