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