解决彻底element表单报红问题

已于 2024-04-11 09:25:16 修改
阅读量754 收藏 1
点赞数 1
分类专栏： vue 文章标签： vue
于 2022-10-14 12:18:18 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_26889291/article/details/127318111
版权

在el-dailog加入destroy-on-close设置为true

el-form 加入属性 用 :model属性而不用v-model属性 validate-on-rule-change也设置成false

还有特殊得时候
比如一个下拉框多选绑定一个对应的selectVal的变量，初始化时得把selectVal得值设置为空数组

实践是最好的老师
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
使用element-ui +Vue 解决 table 里包含表单验证的问题
09-16
本文将详细介绍如何使用Element-UI和Vue.js来解决在表格中包含表单验证的问题。 首先，我们需要理解Element-UI的表单验证机制。`el-form`组件是表单的基础，它通过`:model`属性绑定数据模型，并通过`:rules`属性...
基于vue中解决v-for使用报红并出现警告的问题
08-27
本文将深入探讨这个问题，以及如何解决Vue中`v-for`报红并出现警告的问题。 首先，让我们了解一下`v-for`指令的基本用法。在Vue中，`v-for`用于遍历数组或对象，它允许我们在DOM中重复渲染元素。基本语法如下： ``...
vue element ui From表单校验 关闭模态框 重新打开 还存在标红校验
奔跑吧代码
11-17 3550
vue element ui From表单校验 关闭模态框 重新打开 重置表单解决标红校验 仅供参考 自我记录. 解决方案① 在关闭模态框是 调用this.$refs.ruleForm.resetFields()重置表单 collectPigeonConfigClose(){ this.collectPigeonConfigVisible = false // this.$nextTick(()=>{ this.$refs.ruleForm.resetF
ElementUI表单验证 错误提示不消失原因（最全面，一次解决）
weixin_46463341的博客
10-18 9286
ElementUI表单验证 错误提示不消失原因（最全面，一次解决）
el-table显示红色星号，但不用必填
最新发布
cui01016的博客
04-29 125
【代码】显示rules的红色星号，但不用必填控制。
element-ui表单初始化校验报红
qq_45256497的博客
09-07 2541
在开发中，我们经常会遇到element-ui表单回显，初始化页面就报红的情况。在回显赋值的时候，加上以下代码就好啦。
ElementUI form校验填入了数据仍红色提示输入
TarkuNi的博客
05-25 1590
如下图，经纬度明明有值了，点击确定提交仍然会提示经纬度缺失，我甚至在点击确定按钮的方法里打印form绑定数据（:model="editData"），打印的数据中经纬度绑定的数据也是有的，比较特别的是我的经纬度是我点击地图自动带出来的，不是手输的，查了好久都解决不了，直到一个大神提示说，是不是新增时，父组件传过来的参数即form绑定的editData没有经纬度绑定的lat和lng？
element ui 表单确认提示红色，取消提示方法
宁夏前端工程师，马卫斌，wx：1457508895
01-29 1871
element ui 表单确认提示红色，取消提示方法
element-ui和vue表单（对话框）验证提示语(残留)清除
热门推荐
geming2017的博客
11-09 1万+
问题是这样的: 如果一个页面有多个按钮打开相同的element-ui的Dialog对话框，那么如果第一个点击"顺序"按钮出现红色验证提示语后， 再点击“取消”，或者点击页面空白处此对话框消失，而后再点击同一个“顺序”按钮亦或别的“顺序”按钮， 那么此红色提示依然存在，显然是无法忍受的，那么怎么去除呢，    这里也用到一个vue的一个语法watch，从字面意思上理解就是起到监控的作用，监...
解决vue+ element ui 表单验证有值但验证失败问题
10-15
主要介绍了vue+ element ui 表单验证有值但验证失败，本文通过实例代码给大家分享解决方案，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下
快速解决Vue、element-ui的resetFields()方法重置表单无效的问题
10-14
总之，解决Vue和Element-UI的`resetFields()`方法重置表单无效问题，关键在于正确设置`ref`和`prop`属性，并在适当的时候对表单数据进行重置和清除验证结果。理解`resetFields()`方法的机制，以及如何在Vuex环境中...
关于element-ui表单中限制输入纯数字的解决方式
10-14
主要介绍了关于element-ui表单中限制输入纯数字的解决方式，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
element 结合vue 在表单验证时有值却提示错误的解决办法
08-28
Element 结合 Vue 在表单验证时有值却提示错误的解决办法 Element 是一个功能强大的前端 UI 框架，结合 Vue.js 可以快速开发复杂的 Web 应用程序。然而，在使用 Element 结合 Vue 进行表单验证时，有时可能会遇到...
基于Vue的Element UI表单设计及代码生成器设计源码
04-09
该系统旨在提供一个便捷的Element UI表单设计及代码生成解决方案，使用户能够快速地设计和生成表单代码。系统采用Vue作为前端框架，同时融合了HTML、CSS和JavaScript等技术，构建了一个稳定、易用的表单设计工具。
vue+element实现表单校验功能
10-16
在Vue.js框架中，结合Element UI库开发前端应用时，表单校验是一个常见的需求，用于确保用户输入的数据满足特定的格式和规范。Vue+Element的表单校验功能提供了便利且灵活的方法来验证用户输入，减少错误并提高用户...
快速解决element的autofocus失效问题
10-14
总的来说，解决 Element UI 中 `autofocus` 失效的问题，关键在于理解 Vue 的组件结构和生命周期，以及如何利用 `ref` 和自定义指令进行元素操作。正确应用这些技术，可以确保在页面加载后自动聚焦指定的输入框，...
element中form校验问题，当点击修改之后，关闭弹出框进行新增，就会出现字段不能为空的情况爆红问题解决
weixin_45926180的博客
06-05 1298
element修改后再新增 爆红问题
elment-ui表单初始化校验报红提示
weixin_45536426的博客
11-22 965
欢迎使用Markdown编辑器 你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Markdown编辑器, 可以仔细阅读这篇文章，了解一下Markdown的基本语法知识。 新的改变 我们对Markdown编辑器进行了一些功能拓展与语法支持，除了标准的Markdown编辑器功能，我们增加了如下几点新功能，帮助你用它写博客： 全新的界面设计 ，将会带来全新的写作体验； 在创作中心设置你喜爱的代码高亮样式，Markdown 将代码片显示选择的高亮样式 进行展示； 增加了 图片
element-ui el-form自定义规则rules，小红心不出现解决方案
lkx_icy的博客
11-28 2401
这段时间用element-ui比较多，在el-form这里遇到了一些坑，话不多说直接上效果图 需要在自定义规则处再加required:true 此时自定义规则会生效，且元素前方会有小红心提示用户该项为必填项 rules: { idCard: [{ validator: validateidIdCard, trigger: 'change', required: true }] } 若不加该字段，规则依旧生效，但是却会出现下方的情况，即无小红心，用户交互感变差 rules: { idCard.
element表单嵌套树形表格的校验问题
08-08
在element组件库中，可以利用表单嵌套树形表格来实现复杂的表单输入校验。具体而言，我们可以通过以下步骤来完成校验问题。 首先，需要利用element的`tree`组件和`form`组件来构建树形表格。`tree`组件用于展示树形结构的数据，而`form`组件用于接收用户的输入。我们可以将`tree`组件嵌套在`form`组件中，实现表单嵌套树形表格的效果。 其次，需要使用element提供的校验规则方法来对表单中的数据进行校验。可以在每个表单元素的`rules`属性中定义校验的规则。这些规则可以包括必填字段、数据格式要求、长度要求等等。校验规则可以通过`async-validator`库实现，这个库不仅可以满足基本的校验需求，还可以实现自定义的校验规则。 接着，我们需要在提交表单时调用element提供的校验方法，将校验规则应用于表单中的数据。可以使用`this.$refs.form.validate()`方法来触发表单的校验流程。校验的结果会通过回调函数的方式返回给我们。如果校验通过，可以继续处理提交逻辑；如果校验不通过，可以通过回调函数的参数获取到相应的错误信息，并进行相应的处理，比如展示错误提示。 最后，应该注意到，在嵌套树形表格的场景下，可能会存在一些额外的校验问题，比如确认密码和密码是否一致的校验。对于这种情况，我们可以利用element提供的`el-form-item`组件来实现表单元素的嵌套和分组，进而更灵活地定义校验规则。 总之，element提供了丰富的组件和方法来实现表单嵌套树形表格的校验问题。通过合理地配置校验规则，并调用相应的校验方法，我们可以实现对数据输入的有效控制和错误提示。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值