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’} 
		] 
	} 
} 
}