el-form-item 显示隐藏后自动触发验证

已于 2024-08-20 17:35:59 修改
阅读量358 收藏 1
点赞数 2
CC 4.0 BY-SA版权
文章标签： vue.js elementui 前端
于 2024-08-20 17:34:08 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_40959492/article/details/141364139

在带有多选属性的表单在初次进入或者显示隐藏后，会自动触发验证。

原因是multiple属性触发验证、若非multiple，也可表单中定义默认值。

解决办法：初始form中设置默认值。

例：

拒绝废话
关注
element ui中el-form-item的属性rules的用法
每天都要努力学习哦~~
07-16 6524
在使用Element UI的el-form组件进行表单验证时，如果同时在el-form上绑定了rules，并且在单独的上也绑定了rules，那么Element UI会将两者的规则合并使用。具体来说，对于同一个字段，如果el-form和都有对应的验证规则，那么上的规则会覆盖el-form上的规则。el-form的rules：这是表单级别的验证规则，适用于表单内所有字段。如果表单中的某个字段没有在el-form的rules中明确指定规则，那么它将不会进行验证。el-form-item的rules。
vue2 动态循环展示el-form-item时，rules 和 prop如何使用
a895544608的博客
11-01 1178
/ 获取最新的 item.intervalTime。// 获取最新的 item.intervalTime。// 获取最新的 item.grade。// 获取最新的 item.num。callback(new Error('请输入'));trigger: ['blur', 'change', 'input'], // 设定触发方式。后台返回[{},{},{}..] 10个对象，用 identify 作为唯一标识。// 始终添加校验规则。
隐藏表单方法
04-04
软件在运行时有些表单老是显示在窗口既不美观也不方便
elementui form表单el-form-item使用v-show控制显示隐藏，在提交时 rules 验证错误的问题
weixin_43601701的博客
06-09 1万+
本篇博文深入研究了在使用Element UI构建表单时的一项常见挑战——即便表单项被隐藏，仍然会进行验证。这个问题的出现源于Vue的v-show指令。我们提出了两种创新策略和对应的代码示例来克服这个问题：首先，我们引入Vue的v-if指令来控制表单项的渲染，这样就可以避免对隐藏的表单项进行验证；其次，我们引入动态的验证规则，这样在隐藏表单项时，可以同时移除对应的验证规则。这两种方法都能有效地解决表单验证的"隐形"问题，提升了Element UI表单的性能和用户体验。这篇博文对于前端开发者来说具有很高的参考
elementUI中的form-item表单使用了v-show进行隐藏，那么提交表单进行表单验证的时候，还会验证这个表单吗
weixin_48975022的博客
05-23 3196
表单元素时，该表单元素仍然会被渲染到 DOM 中，因此在提交表单时，该元素的验证依然会被触发。元素时，它不会被渲染到 DOM 中，因此在提交表单时也不会进行验证。表单元素后禁用其验证，可以考虑使用。例如，下面的示例中，一个。
vue-利用属性（v-if）控制表单（el-form-item）显示/隐藏
qq_17328759的博客
02-21 3677
v-if控制el-form-item显示、隐藏
怎样在vue中隐藏el-form-item中的值、设置输入框的值是只读
日常笔记 | 干货分享 | 毕设源码 | 毕设指导 | 答辩指导
06-23 1万+
1、如何在前端vue中隐藏某一个元素（el-form-item怎样隐藏） 给每项表单项添加一个自己的id名，并用v-model绑定相对应的数据，利用v-if根据上一个表单项的数据值来进行显示或隐藏 <el-form-item id="ShowOrHide" v-mode="showEl" v-if="showEl==true" label="编号" type="hidden" prop="user_id"> <el-input v-model="ruleForm
【ElementUI 表单校验】一个 el-form-item 下多个表单校验（循环校验）
前端知识分享喵
06-07 4551
前端开发项目的过程中，批量表单循环校验是很常见的，如上图，动态添加奖励计算规则，把所有的表单放到了一个 el-form-item 下。也可以理解为 el-form-item 做了嵌套，外层当然也可以省略，样式做微调，下面通过代码来详细的看一下。不足之处，多多交流。
element表单中一个el-form-item下多个form-item项校验（循环校验）
热门推荐
Ivan的编程随笔
08-28 2万+
在vue+elementUI的项目中，需要对form表单下的一个form item中校验多项数据，如下图： 代码实现（需要注意prop的值）： <template> <el-form :model="form" ref="ruleForm" label-width="100px"> <el-form-item label="负责人" prop="principal" :rules="rules.principal"> <el-input v
el-form表单实现校验
weixin_43589681的博客
06-28 551
前端表单实现， rules 属性传入约定的验证规则，并将 form-Item 的 prop 属性设置为需要验证的特殊键值即可。点击提交时验证表单数据。
VUE元素的隐藏和显示（v-show指令)
08-30
本篇文章主要介绍了VUE元素的隐藏和显示（v-show指令)，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
el-dialog根据el-form-item的改变控制其他el-form-item显示或隐藏
qq_53905329的博客
12-20 424
【代码】el-dialog根据el-form-item的改变控制其他el-form-item显示或隐藏。
web前端-Vue动态显示隐藏表单el-form-item
MinggeQingchun的博客
12-08 1万+
给每项表单项添加一个自己的id名，并用v-model绑定相对应的数据，利用v-if根据上一个表单项的数据值来进行显示或隐藏 <!-- 类别展示隐藏 --> <el-form-item id="classShowOrHide" v-model="showClass" v-if="showClass==true" label="类别类型" prop="classType"> <el-select v-model="for
element ui form表单项显隐，校验（不该）触发问题
zhl_cafe的博客
09-07 3613
element ui form表单项显隐，校验（不该）触发问题。
element表单组件使用v-if控制item显隐时，表单校验不生效的问题
weixin_51409195的博客
11-08 1771
range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" format="yyyy-MM-dd HH:mm:ss"/>此处修改了v-if的条件之后，由显示变隐藏再使其显示，就出现了错误。输入了值以后还是一直提示未输入，尝试修改代码将v-if改成v-show之后突然发现可以了。aaa: [{ required: true, message: "请输入名称", trigger: "blur", }, ],
el-dialog中的el-form-item 文字超过长度，设置隐藏，最后面用三个点表示
Aa12364567的博客
11-21 3317
el-dialog中的el-form-item 文字超过长度，设置隐藏，最后面用三个点表示。
iview 表单验证，隐藏显示的表单之后验证信息依然存在解决办法
达拉崩巴斑得贝迪卜多比鲁翁_
10-13 1539
iview 表单验证，隐藏显示的表单之后验证信息依然存在解决办法。
element ui根据复选框控制字段显示和隐藏
lam521_125的博客
02-08 2751
element ui根据复选框控制字段显示和隐藏
el-form中el-form-item 不触发rules校验
最新发布
02-18
### 解决 `el-form` 中 `el-form-item` 不触发 `rules` 校验的问题 当遇到 `el-form` 中的 `el-form-item` 的校验规则未被触发的情况时，可以采取以下措施来解决问题。 #### 1. 确认 `prop` 属性设置 确保每一个 `...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值