关于ElementUi表单验证

表单验证问题汇总

在开发中经常要对表单进行前端验证，每个框架的表单验证方式都有差异，而ElementUi的表单验证经常会出现各种各样的问题，今天我将我曾遇到的问题做一个汇总，希望能够帮助到更多的朋友。

1 表单验证规则不生效问题

遇到这类问题我们要注意三点：

1.判断是自定义验证，还是ElementUI集成的，如果是集成的,那么注意以下问题：
表单验证的名、表单项的prop、和绑定字段三者要一致：

//将要规则通过prop添加到表单项中。
//注意：rules中的验证规则名、prop中的值和v-model绑定的值这三者相同，如果不相同那么会造成验证生效，但是符合验证规范的数据也不通过验证。
//简单来说就是：你无论输入什么都会验证不通过

<el-form-item label="姓名："  prop="name" >
			    <el-input v-model="addForm.name" style="width: 230px;"></el-input>
</el-form-item>
rules: {
	//对哪个字段定义验证规则
	name: [
		{ required: true, message: '请输入姓名', trigger: 'blur' }
	]
}

2.是自定义验证：
自定义验证尤其是新手容易出现以下问题：

/*定义的验证规则没有调用callback()这个回调函数,没有调用callback的状态问题在于：
    表单项不爆红，表单项也不显示绿色外框，
    但是当你提交表单时，不报错也不显示任何提示信息，但是验证就是不通过。
    所以无论怎么都要在判断语句最后写个else调用一下callback(),不要写单分之语句。
*/
var validateAge= (rule, value, callback) => {
	if (!value) {
		return callback(new Error('年龄不能为空'));
	}else{
		callback();
	}
}

3.表单提交问题：
表单提交验证时的表单，提交按钮和验证这三者的关联关系：

//提交表单时传入要验证的表单名，表单名不是给表单添加一个name属性，
//而是要将表单的ref的值传到表单验证中去，注意这三者关联关系
<el-form ref="form1" :rules="rules" :model="addForm" label-width="100px">

<el-button type="primary" @click="submitForm('form1')">提交</el-button>

 submitForm(formName) {
     this.$refs[formName].validate((valid) => {
       if (valid) {
         alert("验证通过");
       } else {
	      alert("验证不通过");
	      return false;
       }
     });
},