Vue.js学习笔记（六）element表单校验规则

---

前言

记录不同情况下的表单字段校验情况。

---

一、表单验证的作用是什么？

在防止用户犯错的前提下，尽可能让用户更早地发现并纠正错误。

二、如何使用？

Form 组件提供了表单验证的功能，只需要通过 rules 属性传入约定的验证规则，并将 Form-Item 的 prop 属性设置为需校验的字段名即可。

一个字段可以有多个校验规则，required 设置必填，type 设置数据类型， min 设置最小长度， max 设置最大长度，trigger 设置校验触发时机（多个用数组形式），message 设置提示内容，validator 设置自定义校验内容。

1.普通字段

<template>
	<el-form :model="ruleForm" :rules="rules" ref="ruleForm" >
		<el-form-item label="活动名称" prop="name">
	    	<el-input v-model="ruleForm.name"></el-input>
	  	</el-form-item>
	</el-form>
</template>

<script>
export default {
	data() {
      return {
      /** 表单内容 */
      ruleForm: {
      	name:'',
      },
      /** 表单校验规则 */
      rules: {
       name: [
            { type:'string', required: true, message: '请输入活动名称', trigger: 'blur' },
            { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
          ],
      }
      }
	}
}
</script>

2.对象

<template>
	<el-form :model="ruleForm" :rules="rules" ref="ruleForm" >
		<el-form-item label="活动名称" prop="obj.name">
	    	<el-input v-model="ruleForm.obj.name"></el-input>
	  	</el-form-item>
	</el-form>
</template>

<script>
export default {
	data() {
      return {
      /** 表单内容 */
      ruleForm: {
      	obj:{
      		name:'',
      	},
      },
      /** 表单校验规则 */
      rules: {
       obj: {
          name: [{ type:'string', required: true, message: '请输入活动名称', trigger: 'blur' }],
        },
      }
      }
	}
}
</script>

3.对象数组

<template>
	<el-form :model="ruleForm" :rules="rules" ref="ruleForm" >
		 <el-row :gutter="20">
              <el-col :span="24" v-for="(item, index) in ruleForm.versions" :key="index">
              	<div" v-for="(pItem, pIndex) in item.params" :key="pIndex">
                     <el-form-item :prop="`versions[${index}][params][${pIndex}][key]`"
                      :rules="rules.versions_params_key">
                       <el-input v-model="pItem.key" placeholder="请输入参数名称"></el-input>
                    </el-form-item>
                </div>          
              </el-col>
         <el-row>     
	</el-form>
</template>

<script>
export default {
	data() {
      return {
      /** 表单内容 */
      ruleForm: {
      	 versions: [
          {
            name: '版本1',
            params: [{
              key: '',
            }],
          },
        ]
      },
      /** 表单校验规则 */
      rules: {
      	versions_params_key: [{ required: true, message: '请输入参数名称', trigger: 'blur' }],
      }
      }
	}
}
</script>

4.自定义校验规则

<template>
	<el-form :model="ruleForm" :rules="rules" ref="ruleForm" >
		<el-form-item label="年龄" prop="age">
    		<el-input v-model.number="ruleForm.age"></el-input>
  		</el-form-item>
	</el-form>
</template>

<script>
export default {
	data() {
		var checkAge = (rule, value, callback) => {
	        if (!value) {
	          return callback(new Error('年龄不能为空'));
	        }
	        if (!Number.isInteger(value)) {
	            callback(new Error('请输入数字值'));
	        } else {
	            if (value < 18) {
	              callback(new Error('必须年满18岁'));
	            } else {
	              callback();
	            }
	          }
	      };
      return {
      /** 表单内容 */
      ruleForm: {
      	name:'',
      },
      /** 表单校验规则 */
      rules: {
	      age: [{ validator: checkAge, trigger: 'blur' }]
      }
      }
	}
}
</script>

---

总结

以上就是今天要记录的内容，本文仅仅简单介绍了element 表单开发中比较常见的情况，更复杂的一些校验需要按照实际业务进行编写。