问题导入：在使用
el-form过程中，尤其是表单验证这一块，官方提供的reserFields方法以及验证方面存在一些坑，在此记录一下，给大家提供可能的解决办法。
resetFields 失败可能原因
1: el-form 中使用 v-model="ruleForm"代替了:model="ruleForm"，正确的应为后者。
2: el-form-item 中的 prop 属性设置错误，官网给出了解释。即 prop=a, v-model=Form.a，Js中表单数据字段Form:{ a:'', b: [] }，需要一一对应，不能出现差错。
3: <el-button @click="resetForm('ruleForm')">重置</el-button> resetForm(formName) 的参数一定要和 el-form 中 ref ="formName"一致。
resetFields失效及解决办法
一般打开这个页面后，我们测试数据的时候，都是先点击添加按钮，关闭dialog后，再点击编辑按钮。
此时你使用this.$refs[formName].resetFields(); 是能够将表单重置为空的，因为初始化的时候，本来form数据就是空的。
但是若你先点击编辑按钮，通过父组件传递了 本行数据 到 el-dialog 的 el-form 时，退出后再点击添加按钮，此时会发现数据被污染，表单竟然不是空的，而是出现了刚才编辑那行的数据。
关闭弹窗时，我们设置了clear函数，clear函数为关闭dialog执行的函数。其中调用了resetForm函数，即利用this.$refs[formName].resetFields()来希望重置数据。但是再点击添加按钮时，数据并没有清除。
这个现象的原因是因为dialog是懒加载的，通过表格中的编辑按钮打开dialog时，传过来了父组件行数据。即初始化时数据并不是空的，而resetFields() 函数重置时，初始化的值是啥就是啥。
了解本质后，那么解决这个问题就简单了，我们关闭弹出时，不使用resetFields()函数不就行了。而是这样：
resetForm(formName) {
console.log("谁要重置数据啊？" + formName)
// 重置表格内容
this.form= {
roleId: '',
name: '',
nameZh: '',
enabled: 1,
description: '',
}
},
相当于编辑退出后，将form表单初始化为空，这样就无法出现污染了。但是这样也有个问题，重置数据后，无法移除校验效果。好在官方给了我们方法，只需要添加一行。
console.log("谁要重置数据啊？" + formName)
// 重置表格内容
this.form= {
roleId: '',
name: '',
nameZh: '',
enabled: 1,
description: '',
}，
// 不使用resetFields后，重置时无法移除校验效果，使用以下函数移除
this.$refs[formName].clearValidate();
},
validate失效及解决办法
当使用表单验证的时候，如果正常的验证都无误，提交时，我们通过以下代码来判断是否验证成功。
submitForm (formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
...
}else {
this.$notify({
type: 'error',
message: '数据未填写完整，请仔细核对！'
})
return false;
}
})
},
但是使用自定义验证规则是，注意规则中回调函数callback()一定要写，官方文档也写的十分清楚。否则 if(valid) 条件无法判断，而且它是没有报错的。
如自定义邮箱校验的时候：
data() {
const validateEmail = (rule, value, callback) => {
let regEmail = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/;
if (!regEmail.test(this.form.email)) {
return callback(new Error("邮箱格式不正确")); // 有一个if 就要 一个 callback
}
return callback(); // 返回一个回调函数给验证，是表单validate生效
};
return {
// 表单数据
form: {
user_id: '',
...
email: '',
},
// 表单验证规则
rules: {
...
email: [
{ required: true, message: '请输入真实邮箱地址，方便找回密码', validator: validateEmail, trigger: 'blur' },
],
},
}
},
callback() 回调函数必须要被调用。
