如何取消element 弹窗中form表单的校验信息

最新推荐文章于 2025-04-09 14:35:33 发布

原创最新推荐文章于 2025-04-09 14:35:33 发布 · 788 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #elementui #javascript #vue.js

场景

当用户在弹窗的表单中输入某些选项触发错误校验信息时，关闭弹窗再次打开，表单仍然存在错误校验信息，这不影响正常的功能使用，但会给用户带来困扰。

解决方案

vue2：对vue2来说，对弹窗添加openDlg事件，在事件回调中获取表单dom，清除表单验证信息即可。

 <el-dialog
    :visible.sync="dlgVisible"
    :title="title"
    width="700px"
    @open="openDlg">
    <el-form ref="secForm">
    </el-form>
  </el-dialog>

  methods: {
    openDlg () {
      this.loadData()
      this.$nextTick(() => {
        this.$refs.secForm.clearValidate() //清除表单校验信        
        //this.$refs.secForm.resetFields() //清除表单所有信息
      })
    },
}

其中 resetFields方法清除表单所有信息，clearValidate方法可接受prop字符串或者多个prop组成的数组，清除表单部分prop的校验结果。使用nextTick是为了在页面挂载完毕后执行回调，确保this.$refs能获取到表单元素。

vue3：vue3同理，通过ref获取表单元素，随后在事件回调中执行clearValidate方法即可。具体代码如下：

 <el-dialog
    :visible.sync="dlgVisible"
    :title="title"
    width="700px"
    @open="openDlg">
    <el-form ref='secForm'>
    </el-form>
  </el-dialog>

<script setup>
import { ref, nextTick } from 'vue';

const secForm = ref();

const openDlg= async () => {
  // 等待 Vue 完成 DOM 更新
  await nextTick();
  // 此时可以安全地访问弹窗内部的 DOM 元素
  secForm.value.validate()
};
</script>