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

• 在ElementUI框架中，对表单数据进行验证需要对标记对进行设置，设置规则如下：
  1、<el-form>标记对的rules属性在数据区绑定为一个对象型数据。
  2、rules对象的键名必须与表单元素的v-model绑定的变量一致。
  3、rules对象的键名取值为一个数组，数组元素是表单元素的多个验证规则。
  4、标记对使用prop属性来为表单设置需要满足的验证规则

实例代码：

<el-form-item :model="formData" :rules="rules">
	<el-form prop="userNick">
		<el-input v-model="formData.userNick"></el-input>
	</el-form>
</el-form-item>

data:function(){
	return{
		riles:{
			userNick:[
				{required:true,message:'用户昵称不得为空',trigger:'blur'}
			]
		}
	}
}

1、 required:
功能：验证表单元素是否为必填项，取值为逻辑值
2、 type：
功能：验证表单元素输入的数据必须遵循的数据类型
取值：string-默认值，设置必须是字符型。 number：-设置必须是数值型
boolen-设置必须是逻辑性

• integer - 设置必须是整形数值。
• float - 设置必须是实型数值。
• date-设置必须满足日期格式
• array-设置必须是数组数据
• object-设置必须是对象数据而非数组
• methods-设置必须是function函数
• url-设置必须满足域名格式
• email-必须满足电子邮箱地址格式
• hex-设置必须是十六进制数据格式
• enum-设置必须为可枚举值，需要结合enum键共同使用

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

A .参数 rule - 返回一个对象，该对象记录了验证的字段名称、数据类型等。
B .参数 value - 用户在表单元素中输入的内容或选择的结果。
C .参数 callback - 当出现验证错误时，利用 callback 回调函数返回一个错误类实例。

• 下列两个案例是根据 Element UI 官网给出的自定义验证案例改编的。

（1）官网案例 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）官网案例 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’} 
		] 
	} 
} 
}