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

前言

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中表单元素的验证规则

在 Element UI 框架中，表单是使用el-form标记对和el-form-item标记对实现的。其中
表单的验证使用el-form标记对的 rules 属性来进行设置。

在 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'}
      ]
    }
  }
}

二、async-validator 的验证规则

1、required

功能：验证表单元素是否为必填项，取值为逻辑值。

2、type

功能：验证表单元素输入的数据必须遵循的数据类型。

取值：

• string - 默认值，设置必须是字符型。
• number - 设置必须是数值型。
• boolean - 设置必须是逻辑型。
• integer - 设置必须是整形数值。
• float - 设置必须是实型数值。
• array - 设置必须是数组数据。
• object - 设置必须是对象数据而并非数组。
• method - 设置必须是function函数。
• date - 设置必须满足日期格式。
• 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

功能：规定数值类数据可以取值的范围、字符类数据中字符的个数范围。

7、len

功能：规定字符类数据必须满足的字符个数。

8、pattern

功能：规定必须符合的正则表达式。

9、validator

功能：指定一个自定义函数用来实现自定义验证。

函数必须定义在数据区中return以外之上的部分。

函数包含三个参数：rule、value、callback。

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

三、两个官网案例

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

官网案例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：验证确认密码与原密码必须输入一致。

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