vue element-ui 表单验证 第一次表单验证的结果，在第二次表单验证时仍然存在（需要清除上一次的验证结果）_初次未填写校验不通过后填写数据未清空校验提示

首先我们还是看一下文章：https://blog.csdn.net/weixin_37930716/article/details/90234705  的内容

笔者在参考该文章的时候，踩了一个坑，是vue父子组件通信中使用ref传参的问题！

关键点：

该文章的作者的弹框组件是和父组件写在同一个vue文件里的，也就是没有单独把弹框的页面代码写在另一个vue文件里。这样在父子组件通信的时候其实只有两级通信，如果写在单独的一个vue文件里，实际上就是三级通信。

清除上一次验证结果的代码就应该是：

if (this.$refs.子组件名称.$refs.editForm)
 
this.$refs.子组件名称.$refs.editForm.resetFields();

完整的案例展示：

代码1：对话框和父组件的页面代码是在同一个vue文件里

<template>
  <basic-container>
    <el-row>
      <el-col :span="22"></el-col
      ><el-col :span="2"
        ><el-button type="primary" round @click="handleAddDialogOpen"
          >添加</el-button
        ></el-col
      >
    </el-row>
 
    <el-dialog
      title="测试对话框"
      top="200px"
      width="40%"
      :fullscreen="false"
      :visible.sync="visible"
      :close-on-click-modal="true"
    >
      <el-row
        ><el-form :model="test" ref="refdata"
          ><el-form-item
            label="测试输入框"
            prop="testinput"
            :rules="[{ required: true, message: '不能为空' }]"
            ><el-input v-model="test.testinput"></el-input></el-form-item
        ></el-form>
      </el-row>
    </el-dialog>
    
  </basic-container>
</template>

 此时只有两级通信，在【添加】按钮点击事件中添加如下代码即可：

handleAddDialogOpen() {
      if (this.$refs.refdata) {
          this.$refs.refdata.clearValidate();
      }
      this.visible = true;
},

 代码2：对话框是单独的一个vue文件，和父组件不是在同一个vue文件里

【添加】按钮所在的 父组件的代码（简单示意）

<template>
  <basic-container>
    <el-row>
      <el-col :span="22"></el-col
      ><el-col :span="2"
        ><el-button type="primary" round @click="handleAddDialogOpen"
          >添加</el-button
        ></el-col
      >
    </el-row>
    <testDialog ref="testDlg"> </testDialog>
  </basic-container>
</template>
 
<script>
import testDialog from "./testDialog";
 
export default {
  components: { testDialog }
 
  data() {
    return {
       ... //此处省略
    }
  },
  methods: {
    handleAddDialogOpen(row) {
      ...//此处省略
 
    }
  }
 
}
</script>

 testDialog 对话框子组件的另一个vue文件的代码：（注意ref参数）

<template>
  <basic-container>
    <el-dialog
      title="测试对话框"
      top="200px"
      width="40%"
      :fullscreen="false"
      :visible.sync="visible"
      :close-on-click-modal="true"
    >
      <el-row
        ><el-form :model="test" ref="testForm"
          ><el-form-item
            label="测试输入框"
            prop="testinput"
            :rules="[{ required: true, message: '不能为空' }]"
            ><el-input v-model="test.testinput"></el-input></el-form-item
        ></el-form>
      </el-row>
    </el-dialog>
    
  </basic-container>
</template>

此时，是三级组件的通信，注意看ref参数的定义。也就是说，对于【添加】按钮所在的父组件来说，testDlg是它的儿子，testForm是它的孙子。

如果要实现testForm里面的输入框的表单验证条件结果的清除，【添加】按钮的事件中的代码应该这样写：

handleAddDialogOpen() {
      if (this.$refs.testDlg.$refs.testForm) {
          this.$refs.testDlg.$refs.testForm.clearValidate();
      }
      this.visible = true;
},

笔者正是犯了这个错误，没有意识到是三级通信，还是按照那篇博客那样的写法，导致清除不掉。

还应该注意clearValidate()和resetFields()方法的区别：一个是只清除验证条件的结果，一个是清除表单的全部内容，包括验证结果和内容。

 

最后，关于表单验证值得参考的几篇博客：

可以参考学习这几篇博客：（笔者搜索过程中发现的几篇不错的，值得学习的，放在这里方便以后学习）

vue中ref的作用：https://www.cnblogs.com/xumqfaith/p/7743387.html   搞懂ref和$refs

elementUI 表单验证的三种方式：https://segmentfault.com/a/1190000020410128?utm_source=tag-newest

给一个表单设置自定义规则或多个验证规则：https://blog.csdn.net/qq_41862017/article/details/82223713###

表单验证的触发：https://blog.csdn.net/sunmeng_sunmeng/article/details/103893823

多表单的验证：https://blog.csdn.net/u011210017/article/details/80221315

 

有问题欢迎来微信找我！一起学习成长，交个朋友！^_^

微信搜索：acoolgiser，或者直接扫描