el-form表单使用error提示校验信息, 重复校验信息不显示

最新推荐文章于 2024-06-06 11:13:04 发布
最新推荐文章于 2024-06-06 11:13:04 发布
阅读量2.2k 收藏 1
点赞数 1
分类专栏： vue 文章标签： 前端 elementui vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43340606/article/details/126038060
版权

问题  :error="errorObj.posId" ,第一次显示错误提示, 之后再点击提交后就不显示错误提示了。

 查看element源码发现 el-form-item的error属性监听的是watch

 所以注意重新提交表单前, 需要重置一下errorObj.posId

然后异步赋值需要显示的校验信息

场景一: 前端异步赋值

 场景二: 前端调接口后, 根据后端返回来的校验信息而赋值

 

stubborn丶lili
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
vue中vee validate表单校验的几种基本使用
08-27
Vue 中 Vee Validate 表单校验的几种基本使用 Vee Validate 是一个流行的 JavaScript 库，用于表单校验。它提供了多种方式来实现表单校验，包括必填和长度校验、异步请求服务的校验、延迟校验等。下面将介绍 Vee ...
vue表单自定义校验规则介绍
10-18
这段代码中，我们使用了Element UI库的`el-form`组件来创建表单，并通过`:rules`属性绑定自定义验证规则。`prop`属性对应表单字段名，用于关联规则。 接着，我们定义了数据和规则： ```javascript data() { var ...
04. element-ui form表单校验：自定义error内容
qq_29517595的博客
10-19 6000
element-ui的form表单，可自定义校验规则，也可对错误提示自定义设定 form表单自定义校验及错误提示，有两种方式 方式一：错误信息只显示文本 方式二：自定义错误提示 表单校验实现 // 自定义校验规则 validateDockerfile (rule, value, callback) { let res if(!value) { res = rule.required ? new Error('请输入自定义文件内容') : undefined }.
elementUI el-form-item表单验证怎么显示后台返回的错误信息
wocwin的博客
09-03 1148
elementUI el-form-item表单验证怎么显示后台返回的错误信息
vue2的form利用插槽修改错误提示UI
最新发布
wzp20092009的博客
06-06 404
很多时候我们使用el-form想修改下错误提示的UI，比如table中使用form校验这类场景下错误提示的UI调整就非常重要。
el-form-item不显示报错$option；label和input不是行内样式显示；el-form表单校验不生效；el-form表单校验正则
killerdoubie的博客
02-27 1139
el-form-item不显示报错$option;label和input不是同行显示；el-form表单校验不生效；el-form表单校验正则
element ui form 行内错误提示
weixin_36878452的博客
03-13 5466
<template> <div id="app"> <el-form :model="ruleForm" :rules="rules" label-position="right" size="small" ref="ruleForm" label-width="100px" class="demo-ruleForm"> <el-...
三分钟细数 el-form 表单校验的坑点，前车之鉴，可助你避坑
热门推荐
本博客纯属个人网络笔记，如对阁下有用，甚喜；否则，关掉即可，不喜勿喷。专心写代码，不做键盘侠！
10-12 1万+
Vue 的 el-form 提供了表单校验功能，通过 :rules 属性设置校验规则，并通过 el-form-item 的 prop 属性绑定校验规则。通过封装，让前端校验更方便。具体使用过程中，有几个容易出错的地方，本文来整理一下。每一个坑都是笔者亲自趟过的，写完本文后，以后应该不会再踏入相同的坑。...
ElementUI-修改表单自带验证el-form-item__error的样式
meng的博客
03-26 5581
查看F12后发现是el-form-item__error类选择器控制的，但是在当前页面引用这个类选择器重写样式并不会生效。 用 深度作用选择器 >>> 用深度作用选择器>>>就可以啦，但仅作用与css； 如果是sass/less的话可能无法识别，这时需要用 /deep/ 选择器： /deep/ .el-form-item__error { } ...
Vue element-ui父组件控制子组件的表单校验操作
10-15
this.$message.error('保全信息不完整，请继续填写完整'); } }, } ``` 接下来，我们看看子组件的代码。子组件接收`addForm`作为props，用于初始化表单模型。在子组件内部，我们创建了一个`el-form`并绑定了`...
基于VueElementUI快速创建生成表单进行数据校验获取表单数据
08-10
例如，你可以这样使用`el-form`和`el-form-item`来创建一个简单的表单： ```html <el-form ref="form" :rules="rules" model="formData"> <el-form-item label="姓名" prop="name"> <el-input v-model=...
vue使用Element组件时v-for循环里的表单项验证方法
08-27
正常情况下，我们可以按照官方文档添加规则，需要验证的表单项设置 prop，然后提交表单时通过 form 的 validate 方法验证表单项。 但是，如果表单项里有通过 v-for 动态生成的表单项，如何设置验证规则就变得复杂了...
element ui :error 只提示一次的解决方法
一个在全能之路上越走越远的男人。
04-19 4092
没触发watch方法，手动触发一下。 参考https://andyliwr.github.io/2017/12/25/element_form_validate/
【bug】el-tabs重新赋值不触发，切换值没有对应回显，tabs下的蓝色横线没对应等踩坑记
花椒和蕊的博客
08-25 2775
el-tab-pane用的循环，从官网复制的时候，只定义了name，key随机定义的，发现key不对的时候，也只是改成了绑index，一直到重新翻文档的时候才发现，它的key绑的也是name，换成name后就对了。在b页面保存后，需要留在b页面，因为在保存的方法中先关闭路由，然后又重新打开路由，导致a页面数据还没有重新赋值，而tab的值已经先赋了，所以before-leave钩子函数报错，return之后，导致切不过去。bug2 首页切换到其他页签，再切回来的时候，tab的位置不能变。
VUE element-ui之form表单中input输入超过规定长度error提醒，并实时显示输入长度，可无限输入
HanXiaoXi_yeal的博客
09-21 3378
可以看到我们自定义name长度为120，当用户输入超过120会出现error提示，并实时显示用户输入的字符长度，可以无限输入但是无法通过校验。新建js文件写入下面的函数。
el-form 表单校验，el-select多选框进入页面自动校验
L221545的博客
03-04 2407
el-form 表单校验，el-select选择框校验Bug
7、el-form 自定义校验规则、修改校验提示信息样式
sunnnnh的博客
07-16 3921
1、自定义校验规则 参考：(14条消息) 对element的表单进行验证和限制（自定义验证规则）_阮俊维的博客-CSDN博客 2、修改校验提示信息样式 查看F12后发现是el-form-item__error类选择器控制的，但是在当前页面引用这个类选择器重写样式并不会生效 （1）css中：用 深度作用选择器 >>>（仅作用与css） （2）sass/less：需要用 /deep/ 选择器：/deep/ .el-form-item__error { } ...
el-form表单验证的一些方法总结
AC_Surprise的博客
01-23 6854
Form 组件提供了表单验证的功能，只需要通过 rules 属性传入约定的验证规则，并将 Form-Item 的 prop 属性设置为需校验的字段名即可。 知识点 根据文档说明，model为表单的数据对象，el-form通过model绑定数据。 reles为表单验证规则对象，其中字段名要与model中的字段名一一对应 el-form-item 容器，通过 label 绑定标签，prop属性设置为需要验证的字段名 表单组件通过 v-model 绑定 model 中的数据 表单校验相关属性 hide-re
el-dialog 内嵌el-form rules 不显示校验报错信息
03-22
2. 没有正确绑定校验结果：在 el-form 中使用 rules 进行校验后，需要将校验结果绑定到表单项上，以便显示错误信息。可以通过 `:error="errors['fieldName']"` 将错误信息绑定到对应的表单项上。 3. 没有正确显示...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值