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個粉絲了，加油！」