Element UI框架中表单数据的验证方式

在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>标记对进行设置，设置规则如下所示：

1. <el-form>标记对的rules实行在数据区绑定为一个对象型数据。
2. rules对象的简明必须与表单元素利用v-model绑定的变量名一致。
3. rules对象的简明取值为一个数组，数组元素是表单元素的多个验证规则。
4. <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

1. 参数rule—返回一个对象，该对象记录了验证的字段名称。数据类型等
2. 参数value—用户在表单元素中输入的内容或选择的结果
3. 参数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’} 
			] 
		} 
	} 
}