在Element UI框架中，表单是使用<el-form>和标记对<el-form-item>标记对实现的。其中表单的验证使用<el-form>标记对的rules属性来进行设置。
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框架中，对表单数据进行验证需要对<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’}
]
}
}
}1、required
功能：验证表单元素是否为必填项，取值为逻辑值
2、type
功能：验证表单元素输入的数据必须遵循的数据类型
取值：
- string—默认值，设置必须是字符型
- number—设置必须是数值型
- boolean—设置必须是逻辑值
- integer—设置必须是整型数值
- float—设置必须是实型数值
- array—设置必须是数组数据
- object—设置必须是对象数据并非数组
- method—设置必须是function函数
- data—设置必须满足日期格式
- 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
功能：规定数值类数据可以取值的范围、自负转数据中字符的个数范围。
例如：对用户年龄的限制为必填项，必须为数值，并且年龄在18-60岁之间
rules:{
age:[
{required:true,message:'年龄不得为空',trigger:'blur'},
{type:'number',min:18,max:60,message:'年龄必须为数值,且年龄范围在18-60岁之间',trigger:'blur'}
]
}7、len
功能：规定字符类数据必须满足的字符个数
8、pattern
功能：规定必须符合的正则表达式
9、validator
功能：指定一个自定义函数用来实现自定义验证。
函数必须定义在数据区中return以外之上的部分
函数包含三个参数：rule、value、callback
- 参数rule—返回一个对象，该对象记录了验证的字段名称。数据类型等
- 参数value—用户在表单元素中输入的内容或选择的结果
- 参数callback—当前出现验证错误时，利用callback回调函数返回的一个错误实例
下列两个案例是根据Element UI官网给出的自定义验证案例改变的。
官网案例一：
对用户年龄进行表单的正确性验证。规则不得为空、必须是数值、必须年满18岁并且年龄不得大于60岁。
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 if(){
callback(newError("年龄不得大于60周岁"))
}else{
callback();
}
}
};
return {
rules:{
age:[
{validator:checkAge, trigger:‘blur’}
]
}
}
}官网案例二：
验证确认密码与原密码必须输入一致。
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’}
]
}
}
}
