重置表单验证 清除表单校验信息

提交表单验证的时间经常遇见的一个问题 再次打开时表单验证依旧存在，这种就很烦，用户体验有点差，
在使用Vant或Element UI框架时经常会遇到，再次打开表单时，原来的数据和验证信息一直保留
比方说重复打开
百度的时候，方法有很多，基本都是改js文件，
无意中看见一个超级简单的方法

Vue给了一个特殊属性 :key ，详细可以参照vue文档，

Vue 会使用一种最大限度减少动态元素并且尽可能的尝试就地修改/复用相同类型元素的算法。key 可以用于强制替换元素/组件而不是重复使用它。只需要保证每次生成的 key 值不一样，就会重新渲染。

在这里插入图片描述

用 +new Date() 时间戳生成一个每次都不一样的值，这样就可以实现每次重新渲染而不是重复使用。 但是会有一些性能问题，总体来说，个人感觉比较方便吧

new Date 前面加上 + 是把它转换成Number类型。

原文参照地址 http://www.ihref.com/read-18437.html
参照的这个老哥的
性能问题就是输入框可能只能输入一次，因为每次输入都会重置一下key值，每输入一次就会失焦。

this.$nextTick(() => {
                this.$refs.addform.resetFields(); //等弹窗里的form表单的dom渲染完在执行this.$refs.staffForm.resetFields()，去除验证
            });

简单一点的方法使用
this.$nextTick 每次打开的时候调用一次
element-UI之表单校验—关闭弹窗后，重新打开弹窗，清除提示消息

# vue.js
Logo
Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

avatar Vue
cover

echarts堆叠柱状图

avatar Vue

Error in v-on handler: "TypeError: Cannot read properties of undefined (reading 'current')"

这是一个 Vue.js 错误，报错信息提示在 v-on 处理程序中出现了错误：“TypeError: Cannot read properties of undefined(读取 'current')”。这意味示在您的代码中，试图读取一个未定义的变量 'current'。您需要检查您的代码，确保 'current' 已正确定义并初始化。...

avatar Vue