问题导入：在使用
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() 回调函数必须要被调用。
