表单校验问题之单选框切换时校验结果混乱

于 2024-01-30 22:41:35 发布
阅读量365 收藏 7
点赞数 8
分类专栏： 项目场景 文章标签： 其他
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_20086467/article/details/135941458
版权
文章讨论了ElementUI在处理用户动态隐藏元素时，如何正确清空表单校验结果的问题，区分了框架问题与正常校验行为，并提供了相应的解决方法。
摘要由CSDN通过智能技术生成

elementUI团队很明显考虑到了这个问题，所以他们提供了一个方法用来清空部分校验结果，这个场景和对某个表单控件重新进行校验不同，因为这种场景属于是我们使用v-if隐藏显示元素时候表单的校验结果被错误的带到别的地方，并不是没有对某个控件进行校验操作。注意体会这两种差异。前者是这个框架的问题，后者是框架正常的运行结果。所以存在两种解决手段。

强啊啊强
关注
  • 8
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
原生JS经典小项目-form表单校验
05-18
原生JavaScript的表单校验则是为了确保用户输入的数据符合预期格式和规则，提高用户体验，防止无效或恶意数据的提交。这个经典小项目旨在通过JavaScript实现对HTML表单的验证，无需依赖外部库如jQuery或其他前端框架...
其他类别网页中文本框自校验的标签-input
最新发布
06-15
总结来说，实现网页中文本框的自校验主要依赖于HTML5的表单验证特性，如`required`、`pattern`等，同时结合JavaScript和前端框架的功能，可以构建出灵活且健壮的用户输入验证机制。这不仅能保证数据的准确性，也能...
Element UI 单选框校验失败问题
weixin_47013351的博客
04-10 1978
在使用elemenUIt表单验证时候，在验证单选框radio时候一直显示红色错误提示，明明已经选中了但还是验证失败 后来发现form-item的prop属性要和v-model绑定的属性一致，否则验证就获取不到值 ...
Element UI进行表单校验的时候，输入正确内容后，还有提示问题
weixin_52727969的博客
03-31 5922
默认情况下，一个组件上的 v-model 会把 value 用作 prop 且把 input 用作 event，但是一些输入类型比如单选框和复选框按钮可能想使用 value prop 来达到不同的目的。1.看看你的el-form 是否绑定了值model并且model后面的名称是否和你后面表单输入时使用的名称相同；2.el-form 是否绑定了验证规则：rules(起个名字我们的提示信息就是在这里面写的)字眼表明其主要的使用场景是在组件内部，后面的那一大段是说明缘由的。的值是否和rules的值对应。
解决vue两个表单切换时,校验规则失效问题
weixin_44111864的博客
07-01 3094
问题:两个表单切换,分别使用不同校验规则,校验规则失效 解决思路:1.切换时使用resetField对该表单项进行重置，将其值重置为初始值并移除校验结果 问题本质:即使两个表单绑定的值不同，但是浏览器在解析时，先解析第一个表单，此时表单上是没有绑定ref，之后再解析第二个表单时，浏览器发现这它的prop和第一个表单的prop一样，所以就认为这两个表单是同一个表单，就没有重新渲染，而ref本身是作为渲染结果被创建的，所以第二个表单没能成功绑定ref，验证就无法生效。 loginTypeFlag() {
Element UI 表单校验切换单选按钮遇到的坑（已解决）
AC_Surprise的博客
06-25 1586
既然我已经踏上这条道路，那么，任何东西都不应妨碍我沿着这条路走下去。——康德 最近在写项目的时候遇见了一个不是很难但是很绕的坑，本人也是在坑中躺了半天才从坑里跳出来。先来给大家说一下遇到的问题： 对，你没看错，就是这么一个问题，让我躺坑好久（解决问题后崩溃了好一会）。点击不同的单选按钮使用表单中不同的字段，因为复用了同一个表单，所以出现了这个校验重复出现的问题，其实这个问题真的好简单，哈哈，解决完之后心态都不一样了。就像人们常说的 对于未知的东西总是充满各种各样的想法，当明白了之后又觉得瞬间索然无味。.
vue+iview表单校验select选择框校验失败问题
m0_53083944的博客
03-10 1316
经过反复测试发现是该组件绑定select的model值，必须是字符串
Layer单选框非空校验注意
夏已微凉、
12-16 1248
Layer单选框非空校验注意 [ 示例1 ] <div class="layui-form-item"> <label class="layui-form-label">选择框</label> ...
element UI —— form表单中Radio单选框进行切换 & 表单验证rule动态校验-validator & 保存前进行form表单校验后才能上传-validate
weixin_44867717的博客
06-01 4703
radio的使用
关于iview表单校验 date校验 多选日期校验问题
Taurus_666
06-10 2639
遇到的问题 在使用iview框架时，在后端管理系统中，通常会使用到form表单组件，当然日期也通常出现在搜索框表单中，但是有时候会出现日期组件校验错误的情况 问题分析 首先，iview采用的是async-validator的校验规则，校验类型一般分为以下几种：string、number、boolean、array、object； 其次，默认表单校验类型是string，但是日期组件 type...
网页中文本框自校验的标签-input.rar
07-12
在这个主题中，我们将深入探讨如何使用Java技术实现网页中文本框的自校验功能。 首先，我们需要了解HTML中的`<input>`标签。`<input>`标签用于创建各种类型的输入控件，例如文本字段、密码字段、单选按钮等。在创建...
formcreate具有数据收集校验和提交功能的表单生成器
08-12
通过自定义配置或预设的模板，开发者可以轻松创建含有不同输入类型的表单，如文本输入框、复选框、单选按钮、下拉选择框等。这些元素能够帮助用户输入和选择信息，而收集到的数据将自动存储在表单模型中，方便后续...
用 Javascript 验证表单(form)中多选框(checkbox)值
10-29
和单选框一样，许多新手在用 Javascript 验证表单（form）中多选框（checkbox）的值时，都会遇到问题，原因是 checkbox 和普通的文本框在获取值的时候有很大不同
QT属性动画--设置样式属性(其他属性)
lizequan的博客
03-02 5192
这里写自定义目录标题故事背景遇到的问题解决过程最终方法感悟 故事背景   最近在制作一个按钮切换的动画特效中接触了属性动画这部分内容，并由此产生了一些思考。 遇到的问题 解决过程 最终方法 感悟 ...
Volatile的其他特性
我想月薪过万的博客
03-03 3767
2.1 volatile总体概览 在上一节中，我们已经研究完了volatile可以实现并发下共享变量的可见性，volatile除了保证可见性外，volatile还具备如下一些突出的特性： volatile的原子性问题：volatile不能保证原子性操作 禁止指令重排序：volatile可以防止指令重排序操作 2.2 volatile不保证原子性 2.3 代码测试 package Ls; /** * 目标：研究Volatile的原子性操作 * <p> * 基本观点：V.
【安卓基础】Android直接通过路径来操作其他应用的私有目录，可以吗？
m0_48179608的博客
03-02 7509
在上篇文章[【安卓基础】一文搞懂Android历代版本文件访问权限变化](https://blog.csdn.net/m0_48179608/article/details/122838494)我们对同一个应用的的文件访问权限做了比较。 那么不同应用之间文件访问又有什么限制呢？我们准备分二到三篇文件来阐述。 这篇文章，主要来看下不同系统版本下，我们直接通过路径来访问其它应用的**内部存储、外部存储私有目录**，看看能不能访问以及不同系统版本的区别。
Silane-PEG-NHS，SIL-PEG-NHS，可以用来修饰蛋白质、多肽以及其他活性基团，NHS-PEG-Silane
qq_39152602的博客
03-03 3424
英文名称：Silane-PEG-NHS 中文名称：硅烷-聚乙二醇-活性酯 分子量：1k，2k，3.4k，5k，10k，20k（可按需定制） 质量控制：95%+ 存储条件：-20°C，避光，避湿 用 途：仅供科研实验使用，不用于诊治 外观: 固体或粘性液体，取决于分子量 注意事项：取用一定要干燥，避免频繁的溶解和冻干 溶解性：溶于大部分有机溶剂，如：DCM、DMF、DMSO、THF等等。在水中有很好的溶解性 取用：现配现用，将包装从冰箱中取出，置于干燥器中缓慢升至室温，打开瓶盖，取用。取用.
[Golang]力扣Leetcode—中级算法—其他—两整数之和（位运算）
皮埃尔的博客
03-03 2787
[Golang]力扣Leetcode—中级算法—其他—两整数之和（位运算）
vue+element ui 表单校验单选框
03-25
怎么写？ 对于单选框的表单校验，有以下几种方式： 1. 使用rules规则数组 在表单中，可以设置rules规则数组，来进行表单校验。在单选框的情况下，可以使用如下规则： ```javascript rules: { radio: [ { required: true, message: '请选择一个选项', trigger: 'change' } ] } ``` 其中，radio是单选框的字段名，required表示必选，message表示校验失败的提示信息，trigger表示触发校验的事件，默认为blur。 2. 使用自定义校验函数 在表单中也可以使用自定义的校验函数来进行校验，比如： ```javascript rules: { radio: [ { validator: validateRadio, trigger: 'change' } ] }, methods: { validateRadio(rule, value, callback) { if (value) { callback(); } else { callback(new Error('请选择一个选项')); } } } ``` 其中，validateRadio是自定义的校验函数，rule和value是校验规则和值，callback是回调函数，用于返回校验结果和提示信息。 3. 使用el-form-item的prop和rules属性 在el-form-item中，可以设置prop属性来指定字段名，同时可以设置rules属性来进行校验，例如： ```html <el-form-item label="单选框" prop="radio" :rules="[{ required: true, message: '请选择一个选项', trigger: 'change' }]"> <el-radio-group v-model="form.radio"> <el-radio :label="1">选项1</el-radio> <el-radio :label="2">选项2</el-radio> <el-radio :label="3">选项3</el-radio> </el-radio-group> </el-form-item> ``` 其中，prop指定了单选框的字段名，rules属性指定了校验规则，可以和表单的rules属性一样设置。 以上三种方式都能够实现单选框的表单校验，具体可以根据实际情况选择适合自己的方式。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值