elemenUI 2.x：表单验证功能

最近表单验证用的比较多，于是花点时间整理了下自己开发过程中用过的一些方式，同时简单的整理了下elementui表单验证的基本使用并记录了下来，本文分享了个人使用表单规则校验的一些心得体会，仅供参考。

校验的入门使用

1、关于rules属性

首先表单中与规则校验有关的属性就是rules了，如果只需要对单独某一个表单项进行规则校验，那么我们可以直接将rules属性和校验规则写在单独的一个表单项中，例如：

<el-form-item
  prop="email"
  label="邮箱"
  :rules="[
            { required: true, message: '请输入邮箱地址', trigger: 'blur' },
            { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
          ]"
>
  <el-input v-model="queryForm.email"></el-input>
</el-form-item>

如果需要对多个表单项进行校验，那么可以使用更加方便的写法，即用一个变量来声明校验规则（注意该变量位于data配置项中），并且在el-form标签中使用rules属性绑定定义的校验规则，例如：

<el-form :model="queryForm" :rules="rules">
  <el-form-item label="用户名" prop="username">
	    <el-input type="username" v-model="ruleForm.username"></el-input>
  </el-form-item>
  <el-form-item label="密码" prop="password">
    <el-input type="password" v-model="ruleForm.password"></el-input>
  </el-form-item>
</el-form>

<script>
export default {
      
      
	data() {
      
      
	  return {
      
      
		username:'',
		password:'',
		// 校验规则,注意是个对象
		rules:{
      
      
			username:[{
      
       required: true, message: '请输入用户名', trigger: 'blur' }],
			password:[
					  {
      
       required: true, message: '请输入密码', trigger: 'blur' },
					  {
      
       min:6,max:30,message:"密码长度为 6 - 30 位", trigger: 'blur'}
					 ]
		}
	  }
	}
}
</script>

使用这种方式进行验证需要注意的是，rules对象中的属性名要和prop属性的取值相匹配才能进行对应的验证。

2、提交时的验证

兜底校验就是指在表单提交时，对所有需要进行校验的表单项全部进行一次校验，如果存在校验不通过的，则不能提交。

<el-form :model="queryForm" :rules="rules" refs='formName'>
	<!-- ... -->
</el-form>

submitForm(formName) {
    
    
  this.$refs[formName].validate((valid) => {
    
    
  	// 校验通过
    if (valid) {
    
    
      // ...
      alert('submit!');
    } else {
    
    
    // 校验失败
      // ...
      console.log('error submit!!');
      return false;
    }
  });
},

3、校验规则介绍

下面是校验规则中的一些属性及其功能介绍：

3.1 判断是否必须

active:[{
    
     required: true, message: '请输入活动名称', trigger: 'blur' }]

required: true，值为true时表示该表单项必须进行校验，值为false时则为非必须；
message是校验失败时的信息提示；
trigger表示触发校验的时机，有两个取值，“blur"和"change”，前者表示失去焦点时触发校验，通常用于input输入框中，后者表示值发生改变时触发校验，通常用于select选择框中。

3.2 数据类型判断

{
    
     type: 'number',min: 2, message: '请输入不少于2个字符', trigger: 'blur' },

type，用于进行数据的类型判断，常用的取值有如下：

• string，字符串类型，默认类型
• number，数字类型，包括整数和小数
• integer，整数类型，不能是小数类型
• float，浮点数类型，必须是小数类型
• boolean，布尔类型，false/true
• array，数组类型
• object，对象类型，不能为数组
• enum，枚举类型，同时需要声明枚举类型
• method，函数类型
• regexp，正则类型，必须是一个合法的正则表达式，可以通过new RegExp来创建，不过目前有一个pattern属性可以来进行正则校验，所以这个类型并不常用
• date，日期类型
• url，必须是符合url格式的
• email，必须符合邮箱格式
• hex，16进制表示的形式，如：0xFF12
• any，任意类型

定义了type的类型时，则必须为对应类型的值才能通过校验。（type为array、object、method、regexp类型时的情况我目前还没遇到过，就到时遇到了再补上吧）

1. 我们先简单看下email，url这两个类型

<el-form-item
 prop="email"
  label="邮箱"
  :rules="[
            { required: true, message: '请输入邮箱地址', trigger: 'blur' },
            { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
          ]"
>
  <el-input v-model="queryForm.email"></el-input>
</el-form-item>
<el-form-item
  prop="url"
  label="url"
  :rules="[
          { required: true, message: '请输入url', trigger: 'blur' },
          { type: 'url', message: '请输入正确url地址', trigger: ['blur', 'change'] }
        ]"
>
  <el-input v-model="queryForm.url"></el-input>
</el-form-item>

只有输入合理的邮箱格式（例如：[email protected]）和url地址（例如http:localhost:8080）才能通过校验。

2. 再看下对于number、integer、float类型

由于input默认获取的是字符串类型的数据，所以我们要转换输入的值的类型，有两种方式，一种是使用vue所自带的.number属性进行转换，即在v-model后面调用该属性，v-model.number，另一种是使用校验规则的transform函数。

• 使用.number进行转换，如下

<el-form-item
 prop="number"
  label="数字编号"
  :rules="[
          { required: true, message: '请输入数字编号', trigger: 'blur' },
          { type: 'integer', message: '请输入正确的数字编号', trigger: ['blur', 'change'] }
        ]"
>
  <el-input v-model.number="queryForm.number"></el-input>
</el-form-item>

• 使用transform进行转换，使用如下：

age: [
  {
    
    
      type: 'integer',
      message: "值要求为整数",
      trigger: 'blur',
      transform(value){
    
     return parseInt(value); },
  },
],

transform是一个钩子函数，在开始验证之前可以对数据先处理后验证。

这里更简洁的写法有:

age: [
  {
    
    
      type: 'integer',
      message: "值要求为整数",
      trigger: 'blur',
      transform: Number,
  },
],

当然transform还有其他的用法，例如：

位于某个指定区间的数才能通过校验

age: [
	  	{
    
    
		   type : 'string',
		   message: "值要求为1-100的数",
		   transform(value){
    
    
		    	return parseInt(value)>=1 && parseInt(value)<=100 ? "1" : "0";
		   },
	    }
],  

3. 再瞧瞧enum枚举类型

id: [
        {
    
    
            type: 'enum',
            enum: [1,4,6], 
            message: "结果不存在!", 
            trigger: ['change', 'blur'], 
            transform:Number,
        },
],  

表示只有符合枚举中的值才能通过校验。不过需要注意的是，当输入的值为0时也能通过校验，这似乎是一个bug，所以在实际使用时还是要注意进行判断一下。

3.3 正则校验

正则校验时用到的是pattern属性，在这个属性中定义正则表达式进行校验，使用如下：

 username: [
	{
    
     required: true, message: '请输入用户名', trigger: 'blur' },
    {
    
     pattern:/^\w{3,6}$/, message:'用户名为 3 到 6 个字符', trigger: 'blur'},
 ],

3.4 数据范围判断

name:[{
    
     min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }]

min和max是数据的取值范围，如果进行校验的类型是字符串String类型，则表示字符串长度在min和max之间，如果类型是数字number类型，那么表示数据的值在min和max之间，如果时array数组类型，则表示数组的长度，其他属性同上。

age:[{
    
     type:'integer',message: "必须为6年级", len: 6,trigger:'blur', transform:Number, },]

len属性，如果类型为string或array，则len表示长度；如果为数字型number，则数字值就是len属性值。
当len属性与min、max属性同时出现了，len属性有更高的优先级。

表单校验的进阶使用

1、对象嵌套时的校验

写好的校验规则是需要与指定的prop的值进行绑定的，而很多时候，prop的取值是常常与data配置项中的对象名一致，所以当对象进行嵌套的时候，我们怎么做呢？
例如，有如下嵌套的对象：

form:{
    
    
      formData:{
    
    
			username   : '',
            password      : '',
            // ...
       },
       // ...
 },

<el-form-item label="用户名：" prop="formData.username">
        <el-input v-model="form.formData.username"></el-input>
</el-form-item>

解决方式可以从校验规则的命名下手，如果像下面一样做是会报编译错误的

formData.username: [
     {
    
    required: true, message: "用户名不能为空", trigger: 'blur'},
],

最好使用引号将只包裹起来，变成变量的原始形式，这样就可以进行校验了，如下

'formData.username': [
     {
    
    required: true, message: "用户名不能为空", trigger: 'blur'},
],

2、深层校验规则Deep rules

对于对象Object或数组Array的校验，需要具体到每一个元素（成员），这里就要用到Deep rules，主要涉及两个属性fileds和defaultFiled两个属性。

• 对象的深层校验

rules : {
    
    
  address: [{
    
    
    type: 'object',
    required: true,
    options: {
    
     first: true },
    fields: {
    
    
      street: [{
    
     type: 'string', required: true }],
      city: [{
    
     type: 'string', required: true }],
      zip: [{
    
     type: 'string', required: true, len: 8, message: 'invalid zip' }],
    },
  }],
  name: [{
    
     type: 'string', required: true }],
};

• 数组的深层校验

rules : {
    
    
  roles: [{
    
    
    type: 'array',
    required: true,
    len: 3,
    fields: {
    
    
      0: [{
    
     type: 'string', required: true }],
      1: [{
    
     type: 'string', required: true }],
      2: [{
    
     type: 'string', required: true }],
    },
  }],
};

写代码最应该避免的就是代码重复，可以看到数组的深层校验是重复了多次了的，官方提供了defaultFiled属性来帮我们解决这个问题：

rules : {
    
    
  roles: [{
    
    
    type: 'array',
    required: true,
    len:3,
    defaultField: {
    
     type: 'string', required: true },
  }],
};

3、自定义校验器validator

格式：

rules:{
    
    
	username: [
	       {
    
    required: true, message: "用户名不能为空", trigger: 'blur'},
	       {
    
    validator:judgeValidator, trigger: 'blur'}
	],
}

judgeValidator时自定义的校验器回调函数，用于校验判断的，它可以写在外部js文件中，使用时导入并引用即可，或者也可以写在data配置中return{}外，又或者可以直接以函数形式写在校验规则中。

1、例如：写在某个js文件中

export function judgeValidator(rule, value, callback){
    
    
  const reg= /^\w{6,10}$/;
  if(value == '' || value == undefined || value == null){
    
    
    callback();
  }else {
    
      
    if (!reg.test(value)){
    
    
      // 校验失败
      callback(new Error('应为任意6~10个小写英文字母组成'));
    }else {
    
    
      // 校验成功
      callback();
    }
  }
}

使用时导入js文件并进行方法的引用

2、例如，定义在data配置项中return{}之外

data(){
    
    
	var judgeValidator = (rule, value, callback)=>{
    
    
      const reg= /^\w{6,10}$/;
      if(value == '' || value == undefined || value == null){
    
    
        callback();
      }else {
    
      
        if (!reg.test(value)){
    
    
        // 校验失败
           callback(new Error('应为任意6~10个小写英文字母组成'));
        }else {
    
    
        // 校验成功
           callback();
        }
      }
	}
	
	return{
    
    ...}
}

3、例如，直接函数形式定义在校验规则中

{
    
    
   validator(rule, value, callback) {
    
    
	 const reg= /^\w{6,10}$/;
 	 if(value == '' || value == undefined || value == null){
    
    
   		 callback();
	 }else {
    
      
   		 if (!reg.test(value)){
    
    
	      	 // 校验失败
	      	 callback(new Error('应为任意6~10个小写英文字母组成'));
    	 }else {
    
    
		     // 校验成功
		     callback();
    	 }
     },
   trigger: "blur",
}

参数介绍

rule：指向当前的规则对象
value: 被校验的值
callback调用回调函数
通过了规则校验就直接调用callback()，没有通过规则检验，就调用callback(new Error('错误说明'))，当然也可以传入参数，不过要注意字符串格式化，例如：return callback(new Error(`${name} must be lowercase alphanumeric characters`));

4、动态增减表单项及其涉及到的表单项嵌套校验

传送门：【动态增减表单项及其涉及到的表单项嵌套校验】

补充

1、如果遇到不同模式进入表单，需要应用不同的规则的情况，例如新增和编辑操作，显示同一个页面组件，但此时对页面需要校验的属性字段有所不同，那么此时有两种处理方案：1、配置两套规则集，根据模式不同进行切换，2、配置两中模式的总规则及，根据不同模式抽取需要的规则。

为了切换规则时，立即执行规则校验，需要设置el-form的validate-on-rule-change为false

2、待补充。。。