前言ElementUI框架中的表单校验是使用async-validator（异步校验）第三方库实现的。该库在GitHub上的地址是https://github.com/yiminghe/async-validator，目前在GitHub上有5.1+的star，是各种前端框架使用的表单验证机制。该库在npm中的API文档地址为：http://npm.taobao.org/package/async-validator。1.ElementUI中表单元素的校验规则在ElementUI框架中，表单是使用el-form标签对和el-form-item标签对实现的。使用el-form标签对的rules属性设置表单的验证。在ElementUI框架中，验证表单数据需要设置el-form标签对和el-form-item标签对，设置规则如下。el-form标签对的rules属性在数据区绑定为对象数据。规则对象的键名必须与表单元素的v-model绑定的变量名相同。规则对象的键名是一个数组，数组元素是表单元素的多个验证规则。el-form-item标签对使用prop属性来设置表单元素需要满足的验证规则。示例代码如下：data:function(){return{rules:{userNick:[{required:true,message:'用户昵称不能为空',trigger:'blur'}]}}}二、async-validator的校验规则1.required功能：校验表单元素是否为必填项，值为逻辑值。2.type功能：验证表单元素输入的数据必须遵循的数据类型。值：string——默认值，设置必须是字符类型。number-设置必须是数值。boolean-设置必须是布尔值。整数-设置必须是整数值。float-该设置必须是一个真实值。array-设置必须是一个数据数组。object-设置必须是对象数据而不是数组。method-设置必须是一个函数。date-设置必须满足日期格式。url-设置必须满足域名格式。电子邮件-设置必须满足电子邮件地址格式。hex-设置必须为十六进制数据格式。枚举-该设置必须是一个可枚举的值，并且需要与枚举键一起使用。any-设置可以是任何类型的数据。3.枚举函数：指定可枚举值，用于枚举校验。例如：规定性别形式元素只能取“男”或“女”这两个字符之一。rules:{sex:[{type:'enum',enum:['male','female']}]}4.消息功能：指定当输入数据违反规则时给出的提示。5.触发功能：指定触发机制，检测是否违反规则。(1)文本框一般使用blur事件作为检测触发机制。(2)单选按钮、复选框、列表菜单一般使用change事件作为检测触发机制。6.min和max函数：指定数值数据可能取值的范围和字符数据中字符的范围。7、len函数：指定字符数据必须满足的字符数。8、模式功能：指定必须满足的正则表达式。9.Validatorfunction：指定一个自定义函数来实现自定义验证。函数必须定义在除return以外的数据区部分。该函数包含三个参数：规则、值、回调。参数rule-返回一个对象，记录了经过验证的字段名称、数据类型等。参数value-用户在表单元素中输入的内容或选择的结果。参数callback-当验证错误发生时，使用callback回调函数返回一个错误类实例。3、两个官网案例下面两个案例改编自ElementUI官网给出的自定义验证案例。官网案例一：验证表单元素对用户年龄的正确性。规定不能为空，必须是一个值，并且必须至少年满18岁。data:function(){letcheckAge=(rule,value,callback)=>{if(!value){callback(newError('年龄不能为空'));}else{if(!Number.isInteger(value)){callback(newError('请输入数值'));}elseif(value<18){callback(newError('必须年满18岁'));}else{回调();}}};return{rules:{age:[{validator:checkAge,trigger:'blur'}]}}}官网案例二：验证确认密码必须与原密码一致。data:function(){letvalidatePassword2=(rule,value,callback)=>{if(value===''){callback(newError('确认密码不能为空'));}elseif()(value!==this.ruleForm.password1){callback(newError('确认密码与原密码不一致'));}else{回调();}};返回{规则：{password2:[{validator:validatePassword2,trigger:'blur'}]}}}
