Element UI 表单校验切换单选按钮遇到的坑（已解决）

最新推荐文章于 2024-05-10 09:26:14 发布
最新推荐文章于 2024-05-10 09:26:14 发布
阅读量1.6k 收藏 5
点赞数 2
文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ac_surprise/article/details/118160939
版权

表单验证 change事件 clearValidate 前端开发 JavaScript
关键词由CSDN通过智能技术生成

在这里插入图片描述

既然我已经踏上这条道路，那么，任何东西都不应妨碍我沿着这条路走下去。——康德

最近在写项目的时候遇见了一个不是很难但是很绕的坑，本人也是在坑中躺了半天才从坑里跳出来。先来给大家说一下遇到的问题：

在这里插入图片描述
在这里插入图片描述

对，你没看错，就是这么一个问题，让我躺坑好久（解决问题后崩溃了好一会）。点击不同的单选按钮使用表单中不同的字段，因为复用了同一个表单，所以出现了这个校验重复出现的问题，其实这个问题真的好简单，哈哈，解决完之后心态都不一样了。就像人们常说的 对于未知的东西总是充满各种各样的想法，当明白了之后又觉得瞬间索然无味。

首先是给单选按钮绑定了一个自带的 change 绑定值发生变化时触发的事件，然后把表单传递了过去，js代码接收表单数据，使用Form表单自带的 clearValidate 移除表单项校验结果的方法来解决这个问题，每次更换不同的就 自动移除表单项校验结果。好了，完美解决！！

在这里插入图片描述
在这里插入图片描述

以上是平时写代码遇到的问题，如有不同的看法，欢迎评论！！

阿磊的救兵
关注
编辑画面，element-ui的单选框组选中值以及画面选择样式无法切换，但是绑定的v-model值已发生变化
ying940718的博客
10-17 2142
今天碰到了一个特别奇葩的问题，使用element-ui的单选框组做选择，在新增的情况下，也就是form表单绑定的对象为空时，画面可以正常操作取出来的值也没有问题，但是在编辑的情况下，也就是form表单绑定的对象为前一画面选择的数据时，单选框组居然出来了不能切换选中状态的情况，我通过【change】方法监听发现，绑定的model数据值已经变化为我要选中的数值，但是单选框组选中的值一直都是组件加载是我...
el-form单个表单项校验方法；element-ui表单单个选项校验；el-form单个表单校验
weixin_43286206的博客
08-26 5682
el-form单个表单项校验方法；element-ui表单单个选项校验；el-form单个表单校验 当我们使用element-ui的el-form时，想在提交表单前对其中一个表单进行验证时就可以使用element自带的方法“validateField”
Vue Elementui 单选按钮
weixin_45690347的博客
12-02 930
Vue的单选按钮 <el-table-column label="" width="50"> <template scope="scope"> <el-radio :label="scope.$index" v-model="radio" @change.native="getCurrentRow(scope)"><span></span></el-radio>
form表单切换action值，不同按钮 提交
yuhui666666的博客
08-09 370
//form表单切换action值，不同按钮 提交 &lt;form method="post" rel="pagerForm" name="form1" action="${pageContext.request.contextPath}/account/tbClientLog/list" onsubmit="return navTabSearch(this)"&gt;   &a
element-ui 单选按钮赋值
兰颜的博客
08-30 1140
接上文，文章编辑功能，单选按钮绑定值的时候有些问题，不清楚的建议看一下上一篇文章：https://blog.csdn.net/qq_39704057/article/details/119993871?spm=1001.2014.3001.5501 想要达到的效果 但是不知道为什么，页面上一直没有渲染出来， 用的代码 <el-form-item label="文章重要性" class="block"> <el-radio v-model="form.article_.
element ui 表格设置单选按钮
飞翔༒之翼
11-04 3285
1.单选按钮 <el-table-column label="" width="50"> <template scope="scope"> <el-radio :label="scope.$index" v-model="radio" @change.native="getCurrentRow(scope.row)"></el-radio> &lt
无法切换(element 单选框无法切换)
daiyuenlong110的博客
09-13 784
的时候，点击切换多选的时候，值是切换更新了，但是。注意：如果写在函数里面的话，用。无法切换，页面不渲染更新。
vue+element ui 表单校验单选框
06-11
在使用 Element UI 表单校验时，可以通过 `rules` 属性对单选框进行校验。 以下是一个示例代码： ```html 性别" prop="gender"> 男 女 提交 export default { data() { return { form: { gender...
Element UI 中表单元素的验证机制
小海前端
12-08 2045
文章目录前言一、Element UI中表单元素的验证规则二、async-validator 的验证规则1、required2、type3、enum4、message5、trigger6、min、max7、len8、pattern9、validator三、两个官网案例总结 前言 Element UI 框架中的表单验证使用 async-validator（异步校验）第三方库实现，该库在 GitHub 的地址是 https://github.com/yiminghe/async-validator，至今在 Git
vue 3.0记录Element UI 表单使用(看了隔壁小孩儿都会用的Element UI 表单组件使用)
撑戌圆爱痒生
07-21 1335
Element UI 表单 使用 记录element ui 表单input文本域日期选择中国标准时间与xxxx-xx-xx格式时间之间的来回切换中国标准时间转换为xxxx-xx-xx格式xxxx-xx-xx格式转换为中国标准时间时间选择中国标准时间与xx:xx:xx时间格式的转换中国标准时间转换为xx:xx:xx时间格式xx:xx:xx时间格式转换为中国标准时间单选select下拉上传视频检测规则及绑定数据提交表单 element ui 表单 这次做了一个后台管理系统,用到了Element UI组件 做个记
根据按钮切换表单
lengxin337的专栏
02-15 542
$(document).ready(function(){ var btns = $(".conf_btn"); var tabs = $(".conf_tab"); $.each(btns, function(i, btn){ $(btn).bind("click",function(){ $(tabs).hide(); var rel= $(this).attr("rel");
elementUI-table中点击行和radio按钮都可以实现单选，三年老Web前端经验面经
m0_58269520的博客
04-17 1376
技术栈比较搭，基本用过的东西都是一模一样的。快手终面喜欢问智力题，校招也是终面问智力题，大家要准备一下一些经典智力题。如果排列组合、概率论这些基础忘了，建议回去补一下。网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。需要这份系统化的资料的朋友，可以添加V获取：vip1024c （备注前端）一个人可以走的很快，但一群人才能走的更远！
elementui中根据单选按钮决定from表单提交的内容
qq_43468165的博客
09-02 1047
v-if对元素的控制显示给内部ruleForm.xxx赋值，这个赋值的含义会让表单执行清空方法clearValidate时候产生错误，他会觉得每次使用v-if切换之后付的值就是初始化，所以在你离开表单的时候执行清空，返回回来还存在上次的数据。js切换方法中做的处理,改变校验数据内容，切换了上上一个类型控制的字段的校验错误清除掉，产品给的需求就是，不希望切来切去的时候看见上一次填写出现的校验问题，那就去掉，也咩关系，在提交时候validate还是会根据现有的rules数据再次进行校验的。
点击不同单选按钮出现不同内容
热门推荐
qq_33205354的博客
05-12 1万+
就我个人来说，我要实现的东西是，审核某个东西，如果通过则不需要填写理由，如果审核不通过则需要填写理由，出现一个文本域&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt;&lt;meta charset="utf-8" /&gt;&lt;title&gt;&lt;/title&gt;&lt;script src="js/jquery.min
表单校验之根据不同的选项校验不同的表单项
zuo_zuo_blog的博客
10-25 1613
方法1：参考 方法2：当点击切换按钮时引发一个change事件 <el-form-item label="阈值分类" prop="kind"> <el-radio-group v-model="form.kind" @change="agreeChange"> <el-radio label="单阈值统计"></...
element-ui实现表格单选的功能
穆雄雄的博客
04-26 2001
“大家好，我是雄雄，欢迎关注微信公众号：雄雄的小课堂”前言现在是：2022年4月20日13:33:23需求是这样的：用户单击购买产品的按钮时，会出现一个产品的列表，但是呢只能买一种产品，暂时不可以多选。效果如下所示：原来做的是，单击前面的单选按钮，后面的数量表单放开禁用，可以选择和填写；现在需要改成，直接点击某一行，则改行自动选中，当然数量表单也放开可供用户直接输入和填写...
Element UI实战教程之Radio单选按钮组件03
helloworld工程师的博客
02-23 1488
Element UI实战教程之Radio单选按钮组件03 Radio单选按钮 1.创建Radio按钮 <el-radio label="男" v-model="label">男</el-radio> <el-radio label="女" v-model="label">女</el-radio> <script> export default { ...
elementUI表格单选（radio）
wang_59881的博客
01-11 3451
elementUI表格单选（radio），官网上有案例，但不是我想要的样式，改动后，记录一下
Element-ui el-table组件单选/多选/跨页勾选讲解
最新发布
日常笔记/总结/系列知识梳理
05-10 8511
el-table是 Element UI（一个基于 Vue.js 的高质量 UI 组件库）中的一个组件，用于展示表格数据。通过el-table，你可以很方便地创建具有多种功能（如排序、筛选、分页等）的表格。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值