element-ui 校验因切换单选按钮而顺带过来,清除按钮联动信息校验提示信息

最新推荐文章于 2022-11-27 16:15:42 发布
最新推荐文章于 2022-11-27 16:15:42 发布
阅读量1.7k 收藏 3
点赞数
分类专栏： element-ui vue 文章标签： 清除联动校验
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wh13267207590/article/details/98211200
版权


入坑：如上图所示：单选按钮联动下方选项信息，切换单选按钮，校验也不会清除掉，也随之带到最新切换的内容中

解决方案：切换按钮时候调用该form的clearValidate()方法：this.$refs.form.clearValidate()

 

沙子揉碎在眼睛里
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
ElementUI中el-radio再次点击取消选中
qwe19991123的博客
02-17 2247
<el-radio-group v-model="radio"> <el-radio :label="1" @click.native.prevent="radioClick(1)">备选项</el-radio> </el-radio-group> //prevent阻止默认事件 data(){ return{ radio: '', } } radioClick (e) { e === this
基于element-ui单选按钮插件特效代码
03-22
在本文中，我们将深入探讨基于Element-UI的单选按钮插件，这是一款适用于Vue.js项目的美化组件。Element-UI是一套为开发者、设计师和产品经理准备的基于Vue2.0的组件库，它提供了丰富的界面元素，使得开发过程更加...
Element UI 单选框校验失败问题
xianshigudu的博客
12-05 2864
使用element ui radio表格校验不知道为啥失败了，就是明明已经选中了但是红色的校验字体还是存在，但是提交表单又能通过说明是有值存在的，今天灵机一动把radio的校验props从form标签挪下来，把两个单独的radio用一个el-radio-group包裹起来，放在el-radio-group中，结果就成功了，一旦选中红色校验字体就消失了 ...
避坑19_elementui校验空值，错误提醒不消失
linxwx的博客
11-21 725
没有给el-forem加上:model="ruleForm"
ElementUI表单验证 错误提示不消失原因（最全面，一次解决）
weixin_46463341的博客
10-18 9115
ElementUI表单验证 错误提示不消失原因（最全面，一次解决）
element表格添加单选按钮
weixin_45698231的博客
07-12 1743
下面是主要代码，项目涉及隐私就不发全部代码了1,首先在表格中添加如下代码， :label="scope.$index + 1"不加的话不会显示出来 但是加了之后会出现数字 我用了css样式把数字隐藏了 2，在data中提供 3，在methods里提供方法，scope就是选中的数据...
element-ui中dialog弹窗关闭按钮失效的解决
10-14
主要介绍了element-ui中dialog弹窗关闭按钮失效的解决，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
基于element-ui对话框el-dialog初始化的校验问题解决
10-14
在使用Element-UI框架开发前端应用时，遇到的一个常见问题是关于`el-dialog`对话框的初始化校验问题。`el-dialog`是Element-UI提供的一个模态对话框组件，它通常与`el-form`结合使用，用于数据输入和验证。然而，当...
vue 使用element-ui中的Notification自定义按钮并实现关闭功能及如何处理多个通知
10-16
在Vue项目中，Element-UI库提供了一个名为`Notification`的组件，用于创建全局的通知提示。这个组件在默认情况下提供了一些基本的配置选项，但有时我们可能需要更自定义的功能，比如添加自定义按钮或者控制多个通知...
element-ui.rar element-ui核心库压缩包
12-20
这个“element-ui.rar”压缩包包含了 Element UI 的核心库，是开发人员快速搭建企业级 Web 应用的重要工具。 Element UI 的设计理念是简洁、易用，它的组件设计遵循 Material Design 规范，同时考虑到国内用户的...
基于element-ui单选按钮插件.zip
07-04
基于element-ui单选按钮插件是一款通用单选的vue基于element-ui单选按钮美化插件。
基于Vue+elementUI实现动态表单的校验功能(根据条件动态切换校验格式)
10-17
主要介绍了Vue+elementUI的动态表单的校验(根据条件动态切换校验格式),本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
elementUI:el-radio再次点击取消选中状态
Queen-Shir的博客
04-22 896
<el-radio :label="sbType" v-model="sdTypeValue" @click.native.stop.prevent="queryByType()">{{sbType}}</el-radio>
element-ui的表单验证如何清除校验提示语（账号密码和手机验证码两种登录方式）
weixin_45393280的博客
04-13 2620
今天做vue后台管理项目的时候，在表单验证环节出了一个bug。这个项目原来是只有一种登录方式的，输入账号和密码即可登录。后来老板又要求增加一个用手机号码获取验证码登录。 做好了之后就出现了一个问题，当不输入手机号的时候，下方会有警示，提示你没有输入手机号 然后这时点击下方按钮，切换到账号密码登录时，这个警示仍然存在。 如图 直接说解决方法 <!-- 账号密码登录 --> <el...
element-ui的表单验证如何清除校验提示语
爱代码的小海的博客
11-09 9595
问题场景： 最近在进行项目开发的时候，遇到了这样的一个问题： 对表单域中的数据进行校验的时候，其中有一项比较特殊，不是简单的输入框，下拉框这些表单元素，而是自己写的一个el-table的选择弹窗，我对它的校验如如下： protocolId: [ { required: true, message: '请选择解析协议', trigger: 'blur'}, ], 这样可以实现校验功能，但是会存在一个问题，如果触发的了校验条件（提交按钮），提示了错误信息，后续即使重新选择了数据，错误信息依旧会存在
Vue校验规则的语法糖 rule
商朝
02-27 539
前言 表单校验不想那么麻烦就可以这样 正文 rules: { username: [ { pattern: /^[\x7f-\xffA-Za-z0-9_]+$/, message: "不允许中文", trigger: "blur", }, { required: true, message: "请填写用户名", trigger: "blur" },
element ui 表格设置单选按钮
飞翔༒之翼
11-04 3239
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组件（按钮、单选框、多选框）
weixin_68915174的博客
11-27 4483
button按钮button按钮添加样式：2.渲染没有边框（text）和背景色（bg）的按钮添加样式同上格式：2. //在图标后面添加内容3. //在图标前面添加内容需要添加style添加color=" " :dark="isDark"js中添加。
element UI —— form表单中Radio单选框进行切换 & 表单验证rule动态校验-validator & 保存前进行form表单校验后才能上传-validate
weixin_44867717的博客
06-01 4651
radio的使用
element-ui 表单校验
最新发布
09-10
element-ui 提供了很多表单校验的组件和方法，可以帮助开发者实现前端表单的校验功能。 首先，element-ui 提供了一些内置的校验规则，比如必填项、最大长度、最小长度、数字等。你可以在表单组件中使用这些规则来进行校验。例如，在 el-form-item 中使用 prop 属性指定要校验的字段，在 el-input 中使用 rules 属性来设置校验规则，如下所示： ```html <template> <el-form @submit="handleSubmit"> <el-form-item label="用户名" prop="username"> <el-input v-model="form.username" placeholder="请输入用户名"></el-input> </el-form-item> <el-form-item label="密码" prop="password"> <el-input v-model="form.password" placeholder="请输入密码" type="password"></el-input> </el-form-item> <el-form-item> <el-button type="primary" native-type="submit">提交</el-button> </el-form-item> </el-form> </template> <script> export default { data() { return { form: { username: '', password: '' } } }, methods: { handleSubmit() { this.$refs.form.validate(valid => { if (valid) { // 表单校验通过，可以进行提交操作 // ... } else { // 表单校验不通过 return false; } }); } } } </script> ``` 上述代码中，通过设置 el-form-item 的 prop 属性来指定要校验的字段，在 el-input 中使用 rules 属性设置校验规则。在 handleSubmit 方法中，使用 this.$refs.form.validate 方法来触发表单校验，该方法接收一个回调函数，当表单校验通过时，回调函数中的 valid 参数为 true，否则为 false。 除了内置的校验规则，element-ui 还允许开发者自定义校验规则。你可以通过自定义校验函数来实现更复杂的校验逻辑。具体的自定义校验规则可以参考 element-ui 的官方文档。 希望以上内容能帮助到你，如果有任何问题，请随时提问。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值