共计 2286 个字符，预计需要花费 6 分钟才能阅读完成。
前言
Element UI 框架中的表单验证应用 async-validator（异步校验）第三方库实现，该库在 GitHub
的地址是 https://github.com/yiminghe/async-validator，至今在 GitHub 上曾经有了 5.1+ 的 star，是
多 款 前 端 框 架 使 用 的 表 单 验 证 机 制。该 库 在 npm 中 的 API 文 档 地 址 为：
http://npm.taobao.org/package/async-validator。
一、Element UI 中表单元素的验证规定
在 Element UI 框架中，表单是应用 el-form 标记对和 el-form-item 标记对实现的。其中
表单的验证应用 el-form 标记对的 rules 属性来进行设置。
在 Element UI 框架中，对表单数据进行验证须要对 el-form 标记对和 el-form-item 标记
对进行设置，设置规定如下所示。
- el-form 标记对的 rules 属性在数据区绑定为一个对象型数据。
- rules 对象的键名必须与表单元素利用 v-model 绑定的变量名统一。
- rules 对象的键名取值为一个数组，数组元素是表单元素的多个验证规定。
- el-form-item 标记对应用 prop 属性来为表单元素设置须要满足的验证规定。
示例代码如下所示：
<el-form :model="formData" :rules="rules">
<el-form-item prop="userNick">
<el-input v-model="formData.userNick"> </el-input>
</el-form-item>
</el-form>data:function(){
return {
rules:{
userNick:[{required:true, message:'用户昵称不得为空', trigger:'blur'}
]
}
}
}
二、async-validator 的验证规定
1、required
性能：验证表单元素是否为必填项，取值为逻辑值。
2、type
性能：验证表单元素输出的数据必须遵循的数据类型。
取值：
- string – 默认值，设置必须是字符型。
- number – 设置必须是数值型。
- boolean – 设置必须是逻辑型。
- integer – 设置必须是整形数值。
- float – 设置必须是实型数值。
- array – 设置必须是数组数据。
- object – 设置必须是对象数据而并非数组。
- method – 设置必须是 function 函数。
- date – 设置必须满足日期格局。
- url – 设置必须满足域名格局。
- email – 设置必须满足电子邮箱地址格局。
- hex – 设置必须是十六进制数据格式。
- enum – 设置必须为可枚举值，须要联合 enum 键独特应用。
- any – 设置能够为任意类型的数据。
3、enum
性能：指定枚举校验的可枚举值。
例如：规定 sex 表单元素只能取“男”或“女”两个字中的一个。
rules:{
sex:[{type:'enum', enum:['男','女']}
]
}4、message
性能：指定输出数据违反规定时给出的提醒语。
5、trigger
性能：指定检测是否违反规定的触发机制。
（1）文本框个别采纳 blur 事件作为检测触发机制。
（2）单选框、复选框、列表菜单个别采纳 change 事件作为检测触发机制。
6、min、max
性能：规定数值类数据能够取值的范畴、字符类数据中字符的个数范畴。
7、len
性能：规定字符类数据必须满足的字符个数。
8、pattern
性能：规定必须合乎的正则表达式。
9、validator
性能：指定一个自定义函数用来实现自定义验证。
函数必须定义在数据区中 return 以外之上的局部。
函数蕴含三个参数：rule、value、callback。
- 参数 rule – 返回一个对象，该对象记录了验证的字段名称、数据类型等。
- 参数 value – 用户在表单元素中输出的内容或抉择的后果。
- 参数 callback – 当呈现验证谬误时，利用 callback 回调函数返回一个谬误类实例。
三、两个官网案例
下列两个案例是依据 Element UI 官网给出的自定义验证案例改编的。
官网案例 1：对用户年龄进行表单元素的正确性验证。规定不得为空、必须是数值、必须年满 18 岁。
data:function(){let checkAge=(rule,value,callback)=>{if(!value){callback(new Error('年龄不能为空'));
}else{if(!Number.isInteger(value)){callback(newError('请输出数字值'));
}else if(value<18){callback(newError('必须年满 18 周岁'));
}else{callback();
}
}
};
return {
rules:{
age:[{validator:checkAge, trigger:'blur'}
]
}
}
}官网案例 2：验证确认明码与原明码必须输出统一。
data:function(){let validatePassword2=(rule,value,callback)=>{if(value===‘’){callback(new Error(‘确认明码不得为空’));
}else if()(value!==this.ruleForm.password1){callback(newError(‘确认明码与原明码不统一’));
}else{callback();
}
};
return {
rules:{
password2:[{validator:validatePassword2, trigger:‘blur’}
]
}
}
}