表单校验bug

已于 2023-06-20 17:39:05 修改
阅读量189 收藏
点赞数
文章标签： bug vue.js
于 2023-06-01 16:50:14 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cw_csdn/article/details/130991714
版权

表单校验失效，由v-if导致，如果使用v-if或v-show没有要求，则可使用v-show替代，如果有，我的想法是放弃表单校验，判断相应操作框是否有值，通过消息弹窗的方式通知，如果是输入框可加上自动获取焦点和失去焦点的方法去完善功能，但是这样通知消息弹出的位置不会像表单校验一样出现在相应的位置，效果略差

把v-if改为v-show就正常了

原因分析看下一篇文章：vue2 同时校验多个表单以及表单校验失败原因分析及解决_cw_csdn的博客-CSDN博客

cw_csdn
关注
v-if 导致 elementui 表单校验失效问题解决
jiangjunyuan168的博客
01-25 1599
在使用 elementui 表单的过程中，某些表单项需要通过 v-if 来判断是否展示，但是这些表单项出现了检验失效的问题。 1、给需要 v-if 判断的表单项添加 key 值 2、将校验规则直接绑定在 el-form-item 上 3、v-show 代替 v-if 这种方法存在一个问题，就是如果 v-if 判断的表单项中如果存在相同字段的项就会导致重复校验的问题，所以这种方法需要在判断的表单项字段都不相同的情况下使用。
解决：v-if条件切换时，input框输入值未清空
weixin_45121510的博客
10-23 2990
用 key 管理可复用的元素： Vue 会尽可能高效地渲染元素，通常会复用已有元素而不是从头开始渲染。这么做除了使 Vue 变得非常快之外，还有其它一些好处。例如，如果你允许用户在不同的登录方式之间切换： <template v-if="loginType === 'username'"> <label>Username</label> <input placeholder="Enter your username"> </template&gt
vue 表单在用到 v-if，表单校验不生效
宁夏前端工程师，马卫斌，wx：1457508895
03-24 1132
而v-if用来切换的元素是会被销毁的，导致了v-if内的表单项，由于在mounted时期没有进行渲染，所以规则也没有绑定上，因此初始化时不符合显示条件的不会生成规则，导致后面切换条件，显示的输入框的校验不会生效。因为在v-if切换标签时，多个相同的标签被渲染，如果不添加key来区分则会出现复用的情况（同理，所以 v-for 渲染的标签也要加key来区分）。最近在用 element中 的 form 表单校验的时候，因为有些字段是根据特殊条件来设置显示隐藏的，所以用了 v-if 控制显示；
el-form,当表格校验遇上v-if，怎样处理表格校验不生效的问题
weixin_44490109的博客
12-28 3777
1、场景 在实际工作开发中，我们在处理el-form表单校验问题时常会遇到这样一种情况：根据不同的条件，展示不同的el-form-item，这个时候我们就需要考虑表单元素的显示与隐藏。在vue中，控制显示隐藏的有两个指令：v-if和v-show。 【1】两者不同点：v-if是动态的向DOM树内添加或者删除DOM元素；v-show是通过设置DOM元素的display样式属性控制显隐； 【2】原理：v-if切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件；v-show只是简单的基
el-form表单校验与v-if使用时表单校验失效
qq_49278026的博客
06-08 1764
el-form表单校验与v-if使用时表单校验失效 , el-form校验失效
使用封装后的el-cascader组件无法通过表单校验
sumire27的博客
10-10 920
解决封装后的el-cascader级联下拉列表无法触发表单校验问题
vue3循环表单校验，bug修复
weixin_40449665的博客
07-15 1128
vue3的表单循环如何校验
解决el-form动态表单切换导致的校验bug
努力努力再努力的博客
09-07 1319
问题描述 ： 在平常项目需求中，常常有el-form表单需要根据条件切换el-form-item的情况发生，这时候容易切换过多导致校验错误定义。解决方式: 在v-if做判断的时候，加上key。类似于这种情况，切换之后 校验还在。
jq进行表单校验的时候，错误信息一闪而过
weixin_46120329的博客
07-16 478
<script> //入口函数 $(function () { //页面加载完毕后，输入框内容清空 $("#loginAct").val(""); $("#loginPwd").val(""); //点击登录按钮提交表单(普通按钮） $("#btn").click(function () { //alert("111.
针对element下拉select可多选时（ multiple）添加校验一进页面就触发校验bug
qq_42859450的博客
08-31 1325
element-plus select触发校验bug
jQuery formValidator 表单校验插件 4.1.0
05-01
jQuery formValidator表单校验插件 4.1.0 升级内容： 新增以下功能： 1、新增换肤功能，包括提示层的样式、输入控件(目前只支持text、password、file、textarea)的样式。initConfig增加theme属性，表示皮肤名，...
vue中多个表单同时校验
JunVei的博客
12-28 2565
分别对每个表单进行绑定ref，这里例子是有两个表单。使用Promise进行一个队列校验。
jquery表单校验
weixin_42640196的博客
12-08 887
https://www.runoob.com/jquery/jquery-plugin-validate.html <script src="http://static.runoob.com/assets/jquery-validation-1.14.0/lib/jquery.js"></script> <script src="http://static.runo...
测试概念以及测试bug
m0_74099572的博客
11-08 964
需求分为用户需求和软件需求。软件需求可以作为开发和测试工作的依据，而用户需求不一定是合理的，这里的不合理有很多的角度：技术角度上，市场需求上，投入成本和收益比噔噔。
vue3 + naive ui card header 和 title 冲突 bug
三劫散仙
11-11 351
最近发现一个 naive ui 上的问题，之前好好的，某一次升级后就出现了一个 bug，Modal 使用 card 布局后，Header Solt 下面的内容不见了，变成了 title，因为这个 solt 里面是有操作 action 的，现在变成了 title 的文字覆盖了这块内容，在本地复现后，发现 naive-ui 高版本存在这个问题，因为 package.json 里面并没有锁定naive-ui 版本，所以每次升级发布后，npm 可能就会安装当前最新的版本。
测试实项中的偶必现难测bug--＜pre＞标签问题
最新发布
LYX_WIN
11-11 80
iOS 和 Android 在渲染标签时的差异通常与浏览器的实现有关。iOS 设备的 Safari 浏览器对标签的处理较为宽松，自动处理换行符和空格。而 Android 上的浏览器（特别是 Chrome 和 WebView）可能存在兼容性问题，未能正确解析换行符（如\n）或空格，导致文本不换行。标签非常适合展示有格式要求的文本，尤其是代码段或具有特殊缩进的文本。如果没有正确显示，检查标签内是否有非预期的 HTML 标签或样式影响。
这是一个bug求助帖子--安装kali 遇坑
weixin_51776037的博客
11-09 541
安装完以后 然后我换了个国内的源进行了以下操作apt-get update：更新源列表apt-get upgrade：更新所有可以更新的软件包然后进行清理。重启reboot这就导致我无法使用我所有的账户进入系统但是可以使用所有用户进行ssh图形化界面输入正确的账户密码以后。
一些 uniapp相关bug
weixin_65808257的博客
11-07 359
如上面 使用<scroll-view :scroll-y="true"> 包围着代码部分即可解决问题。后续会一个一个的添加。
group_concat配置影响程序出bug
dj1540225203的博客
11-07 1057
查询当前值临时修改值永久修改：修改 MySQL 配置文件中的设置并重启 MySQL 服务。如果你正在处理大数据量的INSERTUPDATE或批量数据导入时，适当地增加可以避免数据包超出限制导致的错误。
el-select多选表单校验
08-30
在Vue项目中使用Element UI的el-select多选下拉框进行表单校验时，可能会遇到一个bug，即在页面初次加载时会触发一次校验。这个bug的解决方法是，通过在el-select组件上设置`immediate`属性为`false`，即可避免页面...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值