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