原网址：https://www.cnblogs.com/codebook/p/11332824.html
这篇文章时关于如何使用iview的form表单校验。
主要学习如何使用form校验（以校验文字长度为例），以及如何动态添加校验规则和异步校验。
1.为需要校验的表单添加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.校验方法
// 校验输入的字符长度
functionlenValid(str, num, cb){if(str){letlen = getLen(str)if(len > num){returncb(newError('Too Long...')) } } cb()}// 获取字符长度functiongetLen(str){letlen =0if(str){ str = str +''// to stringfor(leti=0; i=0x0001&& c <=0x007e) || (0xff60< = c && c <=0xff9f)){ len++// 单字节}else{ len +=3// 汉字} } }returnlen}
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.异步校验
有时候输入的内容需要到后台异步校验
// 异步校验 - 成败都要有回调函数，校验失败抛出异常functionasyValid(value, cb){letparam = {asyName: value}// 将需要校验的值作为参数$http(url,action,param,(res)=>{ cb() },(err)=>{ cb(newError(err.data.message)) })}