elementui验证错误提示不消失,prop跟字段名一致也不消失错误提示

已于 2022-03-10 15:53:31 修改
阅读量2.5k 收藏 1
点赞数 1
文章标签： elementui 前端 javascript
于 2022-03-10 15:51:25 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/laosi576197029/article/details/123403457
版权

elementui验证错误提示不消失

elementui使用验证时,prop跟字段名一致,但是还是错误验证不消失,也许是因为这个可能

如图:有值但是错误提示不消失
在这里插入图片描述

代码如图 保持一致
在这里插入图片描述

问题就是写规则这里,要是下拉框这里不能写blur 写change才可以
在这里插入图片描述
因为是下拉框应该修改为change就好了
在这里插入图片描述

喜欢水晶头的小仙女
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
VUE项目使用Element-ui 下拉组件的验证失效问题
Calla_Lj的博客
11-05 1万+
Element-ui 下拉组件的验证失效问题 问题描述: 在使用Element-ui组件做项目开发时候有可能会使用下拉框组件,如果下拉框组件的option选项是使用v-if指令遍历的, 就会出现下拉框验证时失效问题. 问题现象: 如图所示,明明已经选择了选项,可是验证还是为空,因此不能提交请求 解决办法: 确认触发方式为change事件 增加相对应的type属性 代码 r...
详解ElementUI之表单验证、数据绑定、路由跳转
08-30
例如，真实姓名的验证规则是required=true，message="请输入活动名称", trigger='blur'，这意味着该表单项必须输入，否则会提示错误信息。 数据绑定 ElementUI中的数据绑定是通过Vue.js的双向数据绑定机制实现的。...
避坑19_elementui校验空值，错误提醒不消失
linxwx的博客
11-21 717
没有给el-forem加上:model="ruleForm"
element-ui的表单校验过后，下拉框时间选择器等重新选择值后，检验为空提示语还在，不消失
最新发布
m0_63237100的博客
05-07 297
针对element-ui的表单校验过后，下拉框时间选择器等重新选择值后，检验为空提示语还在，不消失的问题，如图。，可以给下拉框或者时间选择器等绑定change事件，然后再重新校验当前项。结果如下：有值后，提示语就消失了。
【夏の博客】- Element UI 表单校验不消失的原因
summerzhi的博客
02-11 3571
【夏の博客】- Element UI 表单校验不消失的原因 前言 之前我就遇到了这个问题，我一直以为是我v-model绑定值和prop属性绑定值不相同，亦或者是值没有赋值上去，当时搞了挺长时间都没有找到具体原因。然后今天又遇到了这个问题，仔细研究了一下，才发现问题所在。 解决方法1 v-model绑定值和prop属性绑定值相同即可 解决方法2 这个是我之前写的，写成了v-model，改成model就好了 <el-form v-model="infoForm" :rules="rules" ref="
elementUI下拉框切换引起的校验规则无法清除的问题
程序员的自我修养
08-12 2715
问题描述 切换下拉框选项，下面的输入框联动显示指定内容或者清空内容，在显示指定内容的情况下，一切正常； 当需要清空内容时，清空这一动作会触发校验规则，于是会出现切换下拉选项后清空内容立即出现校验规则“此项为必填项” ，但这样是不对的，因为用户并没有开始填写。 解决办法 经过各种移除校验的尝试，只有一种方式可以达到效果： 例如：需移除校验的是domainCode字段，那么： 1. 将domainCode的校验规则全部移除； 2. 将domainCode字段清空； 3. 在setTimeou
element 新增，编辑，和input readonly情况下错误验证错误信息不消失问题
qq_35363709的博客
12-30 422
// 实例增加按钮清空 handleAdd() { this.$nextTick(() => { this.$refs.ruleForm.clearValidate() }) }, // 编辑按钮清空 handleEdit(row) { this.$nextTick(() => { this.$refs.ruleForm.clearValidate() }) }, ...
element 结合vue 在表单验证时有值却提示错误的解决办法
08-28
Element 结合 Vue 在表单验证时有值却提示错误的解决办法 Element 是一个功能强大的前端 UI 框架，结合 Vue.js 可以快速开发复杂的 Web 应用程序。然而，在使用 Element 结合 Vue 进行表单验证时，有时可能会遇到...
vue 子组件watch监听不到prop的解决
10-14
主要介绍了vue 子组件watch监听不到prop的解决，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
Vue2.0用 watch 观察 prop 变化(不触发)
08-29
本篇文章主要介绍了Vue2.0用 watch 观察 prop 变化(不触发)，非常具有实用价值，需要的朋友可以参考下
解决 element-ui 中的 upload 组件在 form 表单中校验时提示信息不会消失的问题
来杯卡布奇诺的博客
09-26 1621
在 el-form-item 组件上加个 ref，在上传成功后的回调函数中调用 this.$refs.xxx.clearValidate() 清除验证信息。使用 element ui 时，一个表单中有上传组件 upload，然后写了校验规则，当不上传图片时，会提示请上传图片，当上传图片后，提示不会消失。
element ui 表单输入正确但是一直验证报错
qq_44267691的博客
10-11 1367
比如上述代码的prop 的name参数要与v-model的ruleForm.name的name相对应，并不是随意取的名字。当我们设置号prop参数，以及相应的rules，但是输入正确的数据，表单一直在报错。总是因为我的的prop参数名没有与表单v-model绑定的字段一 一对应起来。以下的region也是逻辑。
input表单验证提示信息不消失
Moreisy的小镇
09-09 5090
当我点击取消后，表单验证的提示信息不消失，类似下图这种 此时，你要确保你的prop 和 v-model 里字段名称保持一致，就是下图的那俩字段； 然后，如果prop和v-model是一样的但是提示信息没有消失，程序在点击取消后给v-model赋值，但是验证提示文案没有消失，说明此时没有触发elementui的验证，此时可以手动重置验证 ； 官网给了一个resetFields方法 只要在点击取消后执行这个方法 this.$refs['formData'].resetFields();.
Element form表单校验不消失问题
热门推荐
ZHANGWEI19930118的博客
02-26 1万+
今天在使用Element表单校验的时候遇到的问题，有一个下拉框在第一次什么都不选时点击提交会触发校验提示，但是当提示后在为下拉框选择值得时候校验的提示依然存在不会消失。搞了好久都没找到问题，后来在百度上发现解决方法， 原因是表单域的item项的prop与组件的绑定值v-model的值要一样，比如;prop=&quot;aaa&quot;那么v-model的值也要等于“aaa” ...
vue中使用element-ui的表单验证功能prop属性
weixin_42333361的博客
02-09 5072
1.在标签中绑定 :rules=“方法名称”,然后在 data 里写规则 2.2.在标签绑定 prop=“规则名” <template> <!-- 登陆表单区域 --> <el-form :model="loginForm" :rules="loginFormRules"> <!-- 用户名 --> <el-form-item prop="username">..
element-ui 表单校验，el-row下的el-select校验失效，回显时校验失效，有值却校验
superwa的博客
10-28 944
form表单里面 el-row包裹下的el-form-item中的el-select会出现失效的情况 层级太深 检测不到form的变化。项目中有权限配置 弹窗中表单验证 回显时校验失效 一直触发表单验证 代码如下。2:在change事件里对form表单绑定的数据进行拷贝。1：强制更新dom触发（视图更新）
element-ui中的prop属性
weixin_45060666的博客
03-12 949
Vue组件库element-ui中的Form表单组件提供了表单验证功能 通过rules属性传入验证规则 Form-Item中的prop属性设置需要校验的字段名 如图所示，el-form-item元素的prop属性绑定字段名name，表单验证时，就会验证el-input元素绑定的变量ruleForm.name的值是否符合验证规则 官方文档对表单属性prop的说明： ...
Vue element-UI在表格中使用prop属性的方法
qq_43681850的博客
08-04 1万+
这里遇到一个需求实在表格中使用图片展示活动的头像 一开始使用el-table来做表格每一个分列都是使用prop属性来作为这个表格中的字段，但是在image当中你需要将字段作为image的src来使用因此使用了插件里面套用scope然后使用scope属性的办法来实现 //Vue Element-UI <el-table size="small" :data="listData" highlight-current-row v-loading="loading" border element-loadin
关于element ui 中使用表单校验字段，校验一直不消失的问题
weixin_54938190的博客
02-17 2895
关于element ui 中使用表单校验字段，校验一直不消失的问题
element ui 表单验证怎么设置不提示文字用代码实现一下
04-20
抱歉，由于您的问题涉及到技术问题，我可以尝试为您提供解答。对于element ui表单验证，您可以在验证规则中设置message为空字符串，这样就可以隐藏提示文字。以下是示例代码： ``` <Form :model="form"> <FormItem label="姓名" prop="name"> <Input v-model="form.name" placeholder="请输入姓名" /> </FormItem> <FormItem label="手机号" prop="phone"> <Input v-model="form.phone" placeholder="请输入手机号" /> </FormItem> <FormItem> <Button type="primary" @click="submit">提交</Button> </FormItem> </Form> <script> export default { data() { return { form: { name: "", phone: "" }, rules: { name: [{ required: true, message: "" }], phone: [ { required: true, message: "" }, { pattern: /^1[3456789]\d{9}$/, message: "手机号格式不正确" } ] } }; }, methods: { submit() { this.$refs.form.validate(valid => { if (valid) { // 满足验证规则，可以进行提交操作 } else { // 验证不通过，需要提示用户出错信息 } }); } } }; </script> ``` 在上述代码中，我们将验证规则中的message设置为空字符串。这样，在出错时就不会显示任何提示信息了。需要注意的是，必填字段依然需要设置为required:true，否则验证不通过时也无法自动聚焦到出错的表单项。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值