摘錄iview表單驗證
Form 組件基于 sync-validator 實現(xiàn)的數(shù)據(jù)驗證喧枷，給 Form 設(shè)置屬性 rules虹统，同時給需要驗證的 FormItem 設(shè)置屬性 prop 指向?qū)?yīng)字段即可弓坞。
完整的驗證規(guī)則請參照開源項目 sync-validator 。
驗證方法也支持 Promise车荔。
綜上渡冻，我們知道了 iview 使用的是 sync-validator 。
數(shù)值方式校驗
當(dāng)我們使用 Form 表單校驗時忧便，如果字段使用的是 String 類型族吻，顯然通過 required:true 即可滿足，但如果是數(shù)值時可就不能這么校驗了珠增，怎么辦呢超歌？
??自定義校驗
X 錯誤示范：
formValidate: {
money: [{ required: true, message: "金額不能為空", trigger: "blur" }]
},
? 自定義校驗方式：
formValidate: {
money: [{ validator: validateMoney, trigger: 'blur' ,required:true }]
},
我們用到了 validator 屬性，在這我們引入了自己定義的校驗規(guī)則 validateMoney蒂教，該方法可以放在公共部分握础，具體如下：
const validateMoney = (rule, value, callback) => {
let reg =/^[1-9]{1}\d{2,}$/; // 檢驗規(guī)則為正則，可自行百度悴品。
if(reg.test(value)){
callback();
}else {
return callback(new Error("請輸入100及以上的整數(shù)"));
}
};
三個參數(shù):
- rule 字段名稱相對應(yīng)的驗證規(guī)則。始終為它分配一個 field 屬性简烘，其中包含要驗證的字段的名稱苔严。
- value 表示當(dāng)前輸入的值。
- callback 驗證完成時調(diào)用的回調(diào)函數(shù)孤澎，回傳 Error 表示失敗届氢。
另外一種方式
使用提供的 pattern 屬性，采用正則驗證一下覆旭。
formValidate: {
money: [{ required: true, pattern: /^[1-9]{1}\d{2,}$/, message: '請輸入100及以上的整數(shù)', trigger: "blur" }]
},
ok退子，如上兩種方式應(yīng)該都能滿足你的需求了，采用自定義校驗器方式可以得到更多支持型将，畢竟拿到 value 可以各種騷操作了嘛～
最后寂祥，如果覺得文章對你有所幫助，麻煩點個推薦～
分享副業(yè)
分享一下最近在做的副業(yè)七兜，賺點外快~
image
