elementui 弹窗展示自动校验表单项bug

于 2024-04-17 11:06:25 发布
阅读量837 收藏
点赞数 3
文章标签： elementui bug 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45371730/article/details/137864407
版权
本文介绍了解决Vue表单校验失败后重新加载时避免立即触发错误的方法，通过调用`clearValidate()`清除校验项并结合`$nextTick`确保在DOM更新后再进行操作。
摘要由CSDN通过智能技术生成

表单校验失败一次之后，再次弹出表单，触发自动校验

解决方案：

clearValidate() 方法清空表单校验项

this.$nextTick(() => {
    this.$refs['checkForm'].clearValidate()
})

 使用nextTick规避报错

别薅我假发
关注
  • 3
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
串口调试助手根据数据内容自动填充校验和
12-06
本文将深入探讨如何使用C#开发一个串口调试助手，实现根据输入数据自动填充校验和的功能。 首先，我们要理解串口通信的基本概念。串口（Serial Port）是一种串行通信接口，通过串行数据线进行数据传输。在C#中，...
各仪器设备校验记录表.pdf
04-01
各仪器设备校验记录表.pdf各仪器设备校验记录表.pdf各仪器设备校验记录表.pdf各仪器设备校验记录表.pdf各仪器设备校验记录表.pdf
解决vue element - ui 弹窗打开表单自动校验问题
qq_44716001的博客
11-21 1119
1 打开弹窗清除自动校验 在data 里面把所有表单字段都定义一下 2 弹窗关闭事件 清除校验。
vue3 +element-plus中避免一打开表单的下拉选择的change事件自动校验问题
stay hungry, stay foolish
08-31 2208
新增和编辑共用一个弹窗时，每次打开新增弹窗，el-select的表单项会触发change事件的自动校验。我这里的下拉选择是支持多选的，也就是属性上有multiple。
Element二次弹窗出现表单验证失败问题
weixin_45894503的博客
04-28 733
项目场景： Element二次弹窗出现表单验证失败问题 问题描述 第一次打开弹窗按钮上加入$nextTick(),重置表单即可 handleAtrack(row){ this.queryObj = JSON.parse(JSON.stringify(row)) this.innerVisible = true this.$nextTick(()=>{ this.$refs.ruleForm.resetFields() })
element下拉框/级联选择器弹窗校验相关问题记录
qq_54089372的博客
03-30 1498
element下拉框/级联选择器弹窗校验相关
elementUI中select下拉框设置了多选multiple之后 一进页面就触发校验bug
吴小勇的博客
11-22 2834
封装select组件时，预留了多选的配置，但是配置过后发现，一进入组件后select组件会自动校验，百度了，大概都是说的时选择器输入框在data中的初始值。created钩子函数中，判断当前是否传入multiple参数，如果有传入表示多选，可以将钩子函数中将表单的初始值改为空数组 [ ] ，
基于Vue+elementUI实现动态表单的校验功能(根据条件动态切换校验格式)
10-17
- 在规则切换时，需要先清除旧的提示，然后将新的校验规则应用到对应的表单项上。 - 对于必填项，可以设置一个基础规则数组，将所有必须填写的字段规则统一管理。当切换校验类型时，再将这些基础规则与特定类型的...
vue elementUI 表单校验功能之数组多层嵌套
10-16
在 Vue Element UI 中，`el-form` 和 `el-form-item` 组件用于创建表单和表单项，并且通过 `v-model` 和 `prop` 属性进行数据绑定和验证。然而，当表单数据涉及到数组内的对象，如上述示例所示： ```json { "title...
交流电流表校验记录0-500A自动计算.xls
02-06
交流电流表校验记录0-500A自动计算
【element-ui】表单验证 避免模态框打开时就进行表单验证
weixin_46447553的博客
11-16 1191
解决打开弹窗时el-form组件自动触发表单验证
解决bug--select下拉框由单选设置了多选multiple之后 一进页面就触发校验
zx990912的博客
01-11 731
控件已经有选中的值，因此不会触发非空校验。只有在用户进行选择后，绑定的数组才会更新，触发表单的校验逻辑。通过设置初始值为空数组解决自动触发表单非空校验的问题。这是因为在表单初始时，select下拉框由单选设置了多选multiple之后 一进页面就触发校验。控件没有选中任何值，而表单的非空校验是基于其绑定的值来进行的。
el-form表单双层验证和自动验证的bug
MISS_zhang_0110的博客
12-15 1935
element-ui表单双层验证和自动验证的bug一级目录二级目录三级目录 一级目录 二级目录 三级目录
Vue Element UI 日期控件在表单验证中报错
热门推荐
欲变世界，先变其身
11-28 2万+
Vue Element UI 日期控件在表单验证中报错，遇到了冲突如下：Error in event handler for “el.form.change”: “TypeError: value.getTime is not a function”
问题记录 1 页面初始化触发el-form必填校验
weixin_43697849的博客
08-03 1296
rules里触发的方式为change时,赋值数据的格式不一致导致触发校验, 最后也没找到正确的解决方法, 只能用很low方式去解决了。bug: 先编辑table某条数据,然后关闭,再去新增的时候就会触发el-form必填校验, 网上搜了一下是因为。方案2. 初始化页面就清空一次必填校验 , 最后使用了这种方案。方案1. 把trigger改为 blur 失焦后触发。
解决vue2+elementUI的下拉框出现自动校验的问题
最新发布
weixin_51140082的博客
03-13 718
因为多选的是数组，所以要判断数组的长度是否大于0,才赋值，否者就是undefined。这种是只有值存在的时候才会给他赋值，但是这只解决单选下拉框，多选下来框还是会。item.key是要清除校验的字段名。是表单ref的formRef。还有一种方法就是一进入页面单独将会出现校验的字段手动清除，总结原因是因为新增的时候，传了空值进去。
【vue3 + elementPlus】解决关闭弹窗重新打开后表单校验存在
qq_36687211的博客
06-15 1796
问题：打开弹窗保存后重新打开弹窗触发表单校验。解决：打开弹窗时触发open函数清除表单校验。
【Vue element-ui表单校验时校验异常】
regretTAT的博客
05-22 152
Vue element-ui表单校验时关闭弹框再打开弹框直接触发校验？校验异常
elementui表单校验遇到的问题
qq_36877078的博客
02-16 1752
项目有，有时候表单的校验规则复杂，需要自定义 关键代码如下 // html代码部分 <el-form ref="form" :model="form" :rules="rules" label-width="80px"> <el-form-item label="评估净值"> <el-input v-model="form.asPgjz" prop="asPgjz"></el-input> </el-form-item> </
elementui多个表单校验
09-15
ElementUI提供了多种方法来实现多个表单的校验。其中，你可以使用v-for循环来动态生成表单，并通过ref属性绑定表单实例。通过$refs可以获取到一个表单实例的数组。在校验方面，ElementUI提供了rules属性来定义校验规则，并结合validate方法进行验证。 以下是一个示例代码，演示了如何使用ElementUI进行多个表单的校验： ```html <template> <div> <el-form ref="form" :model="formData" :rules="rules" label-width="100px"> <el-form-item v-for="(item, index) in formData" :label="'表单' + (index + 1)" :key="index"> <el-input v-model="item.value"></el-input> </el-form-item> <el-button type="primary" @click="validateForm">校验</el-button> </el-form> </div> </template> <script> export default { data() { return { formData: [ { value: '' }, { value: '' }, { value: '' } ], rules: { // 定义校验规则 // 例如，这里假设每个表单都不能为空 // 这里的 rule 是一个数组，可以定义多个规则 // 更多校验规则的使用方法可以参考 ElementUI 官方文档 // https://element.eleme.cn/#/zh-CN/component/form#biao-dan-yan-zheng rule: [ { required: true, message: '该项不能为空', trigger: 'blur' } ] } } }, methods: { validateForm() { this.$refs.form.validate((valid) => { if (valid) { // 表单校验通过的逻辑 console.log('校验通过') } else { // 表单校验不通过的逻辑 console.log('校验不通过') } }) } } } </script> ``` 在上述代码中，通过v-for循环生成了多个表单项，并将每个表单项的值绑定到formData数组中对应的元素上。rules属性定义了校验规则，这里假设每个表单项都不能为空。validateForm方法用于触发表单的校验操作，通过this.$refs.form.validate()方法对表单进行校验，校验结果通过valid参数返回。如果校验通过，则执行校验通过的逻辑；如果校验不通过，则执行校验不通过的逻辑。 以上就是使用ElementUI进行多个表单校验的方法。希望能对你有所帮助！
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值