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 可以各种骚操作了嘛～

最后，如果觉得文章对你有所帮助，麻烦点个推荐～

分享副业

分享一下最近在做的副业，赚点外快~

image