vue+iview的form表單校驗總結

這篇文章時關於如何使用iview的form表單校驗。主要學習如何使用form校驗（以校驗文字長度為例），以及如何動態添加校驗規則和異步校驗。

1.為需要校驗的表單添加form標簽

<!--注意: ref/rules/model/prop等屬性是必須的--> <Form res="foemRef" :rules="formRules" :model="formData" v-if="liveNode"> <Row> <!--正常校驗--> <Col> <FormItem prop="name"> <Input v-model="formData.name"></Input> </FormItem> </Col> <!--動態校驗--> <Col v-if="flag"> <FormItem prop="age"> <Input v-model="formData.age"></Input> </FormItem> </Col> <!--異步校驗--> <Col> <FormItem prop="asyName"> <Input v-model="formData.asyName"></Input> </FormItem> </Col> </Row> </Form> 

2.添加校驗規則

formRules: {
    name: [ {required: true, message: "必輸項不能為空", trigger: 'blur'}, {validator:(rule, value, cb)=>{lenValid(value, 30, cb)}, trigger: 'blur'} ], age:[], // 注意因為age是根據條件判斷是否必輸，先留個坑 asyName: [ // 異步校驗，使用change觸發，即使不改變輸入數據也會在提交數據的時候自動校驗一次 {validator:(rule, value, cb)=>{asyValid(value, cb)}, trigger: 'change'} ] } 

3.校驗方法

// 校驗輸入的字符長度 function lenValid(str, num, cb){ if(str){ let len = getLen(str) if(len > num){ return cb(new Error('Too Long...')) } } cb() } // 獲取字符長度 function getLen(str){ let len = 0 if(str){ str = str + '' // to string for(let i=0; i<str.length; i++){ let c = str.charCodeAt(i) if((c >= 0x0001 && c <= 0x007e) || (0xff60 < = c && c <= 0xff9f)){ len++ // 單字節 }else{ len += 3 // 漢字 } } } return len } 

4.動態添加校驗規則

有時候需要動態切換一個輸入框，比如：上面的age字段，顯示的時候是必輸項，隱藏的時候是非必輸的，這個時候需要動態的修改校驗規則

this.liveNode = flase // 先抹去Form，等校驗規則修改后在重新渲染 if(this.flag){ this.formRules.age.unShift({required: true, message: '必輸項'}) }else{ if(this.formRules.age.length > 0){ this.formRules.age.shift() } } this.liveNode = true // 重新渲染Form 

5.異步校驗

有時候輸入的內容需要到后台異步校驗

// 異步校驗 - 成敗都要有回調函數，校驗失敗拋出異常 function asyValid(value, cb){ let param = {asyName: value} // 將需要校驗的值作為參數 $http(url,action,param,(res)=>{ cb() },(err)=>{ cb(new Error(err.data.message)) }) } 

 

分類:  vue