el-form resetFields无效和validate无效的可能原因及解决方法_vue.js_

问题导入

在使用 el-form 过程中，尤其是表单验证这一块，官方提供的 reserFields 方法以及验证方面存在一些坑，在此记录一下，给大家提供可能的解决办法。

简单实例

1、官方案例

先来看看官方提供的案例，对应的官网 表单验证

对应的代码

-立即创建重置

对应的字段含义，在官网上都有详细的解释，那么如果类似的表单重置 resetFields 时候无法成功，那么可能的原因有哪些呢？（以下皆由个人实践得出，具体原因有些不太懂，欢迎解释补充）

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:重置 resetForm(formName)的参数一定要和 el-form 中 ref ="formName"一致。

2、个人案例

项目开发过程中，通常 el-form 都是嵌套在el-dialog中。在表格页面中，点击添加或者修改按钮，弹出同一个表单，因为两个操作都是类似的组件，不同的组件可以用 v-if 屏蔽掉，这也是大多数开发中公用组件的一个体现。

举个个例：

通过添加按钮和编辑按钮都能够打开这个dialog。

EditRole.vue

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表单初始化为空，这样就无法出现污染了。但是这样也有个问题，重置数据后，无法移除校验效果。好在官方给了我们方法，只需要添加一行。

 resetForm(formName) { 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) 条件无法判断，而且它是没有报错的。

提示： 本文由神整理自网络，如有侵权请联系本站删除！
本站声明：
1、本站所有资源均来源于互联网，不保证100%完整、不提供任何技术支持；
2、本站所发布的文章以及附件仅限用于学习和研究目的;不得将用于商业或者非法用途；否则由此产生的法律后果，本站概不负责！