iview form表單數值類型校驗「iview自定義form表單校驗器」- niceyoo

• 2020 年 1 月 20 日
• 筆記

摘錄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及以上的整數"));      }  };

三個參數:

rule 欄位名稱相對應的驗證規則。始終為它分配一個 field 屬性，其中包含要驗證的欄位的名稱。

value 表示當前輸入的值。

callback 驗證完成時調用的回調函數，回傳 Error 表示失敗。

另外一種方式

使用提供的 pattern 屬性，採用正則驗證一下。

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

ok，如上兩種方式應該都能滿足你的需求了，採用自定義校驗器方式可以得到更多支援，畢竟拿到 value 可以各種騷操作了嘛～

最後，如果覺得文章對你有所幫助，麻煩點個大拇指～