使用Element Form 验证input输入信息，输入正确的值后，验证的错误信息不消失

最新推荐文章于 2024-05-29 15:42:29 发布
最新推荐文章于 2024-05-29 15:42:29 发布
阅读量1.9w 收藏 3
点赞数
分类专栏： element ui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/c2311156c/article/details/81508188
版权

问题描述如题。


解决方法：
1.rules里面的校验对象值要和el-form-item中的prop值完全一样；
2.el-form使用:model传入要绑定的form对象，el-input使用v-model来双向绑定其value值；

Daniel丶云焕
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
详解element-ui中form验证杂记
10-17
主要介绍了详解element-ui中form验证杂记，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
使用element-ui +Vue 解决 table 里包含表单验证的问题
09-16
此外，还可以自定义验证规则，通过在`rules`对象中定义一个函数，该函数接收输入值作为参数，并返回一个包含错误消息的对象或`null`。 总结起来，使用Element-UI和Vue.js解决表格内表单验证问题，需要理解`el-form`...
vue+antd表单已输入内容但校验一直不消失问题总结
最新发布
under taker
05-29 556
值得注意的是，如果你的表单是在弹框里，在弹框打开的方法中是否对form进行了重新赋值，如果用等于号赋值可能会导致form缺少字段，正确做法是用对象合并的方法。使用antd表单校验规则经常出现已经填写内容了但校验提示一直存在的情况，以下是我遇到并问题总结的解决方法，希望能帮到你们。5、在表单校验规则中，输入框、文本框的触发方式最好使用blur，日期选择器、普通选择器使用change。4、确认form绑定的model是否已初始化各个字段（最常见但容易忽略的情况）3、确认form绑定的model。
表单校验：vue表单校验提示输入内容提示、提示信息未消失
weixin_47659945的博客
06-27 2784
由于vue2 中监听不到对象属性值变化导致子组件没有收到 formLabel 对象属性；问题出现场景： vue 项目主子组件绑定的form对象为父组件传入的对象;子组件没有同步到父组件对应的对象值导致的；将formRules 对象里面对应的key修改与formLabel 对象的key一致就行；日常开发小问题随笔记录，方便后续遇到查阅。
vue element form rules表单规则验证，输入框有值，但验证始终不消失问题的个人解决办法
qq_38876396的博客
06-23 5263
本文章对element的表单规则验证中输入框有值，但验证始终不消失的问题，在个人项目的特殊情况下提出解决办法
关于Element ui加了验证后 填了值 验证不消失的问题
风华流沙君莫笑的博客
11-29 1339
由于不是专业的前端 所以这两天在做前端开发的时候遇到了很多坑 网上百度的答案也好多不管用 还都是复制粘贴 这里记录一下遇到的问题 以免以后再受折磨 之前的写法是这样 我感觉没啥问题 我以为就只加个:rules就好了 结果因为我这个是form.name 还是识别不了好像 最后去elementui看了一下 结果还要写个:model 绑定一下form <el-form :rules="rules" label-position="right" size="small"> <.
【elementui】必填项回填提示不清空。el-form表单联动el-tree进行赋值，赋值后依旧提示“xxx不能为空”的问题
ew45218的博客
01-13 635
点击input，出现弹出框，此时input失去焦点，并且input确实没有值，所以失去焦点会触发rules验证；当el-tree上的值赋值给input时，没有“失去焦点”操作，所以rules不会进行验证，而是维持上一次的验证结果，即提示用户没有输入值。4.此时element的验证会提示“xxx不能为空”，然而input中是有值A的，且不影响提交，5.二次点击input，选取el-tree的值，“xxx不能为空”的提示消失。el-form表单联动el-tree赋值，依旧提示“xxx不能为空”的问题。
vue-element Form表单验证（表单验证没错却一直提示错误）
weixin_30443747的博客
05-08 4123
在使用element-UI 的表单时，发生一个验证错误，例如已输入值但求验证纠错： 代码如下所示： <el-form :model="correction" :inline="true" :rules="rules" ref="correctionForm" class="demo-ruleForm" > ...
element 结合vue 在表单验证时有值却提示错误的解决办法
08-28
然而，在使用 Element 结合 Vue 进行表单验证时，有时可能会遇到一种情况，即虽然输入框中已经输入了值，但是仍然提示错误信息。这是什么原因导致的？如何解决这个问题呢？ 首先，我们需要了解 Element 的表单验证...
vue element table中自定义一些input的验证操作
10-15
本文将详细介绍如何在`el-form`与`el-table`结合使用时，自定义`input`的验证操作。 首先，`el-form`组件通过`:rules`属性接收一个对象，该对象定义了各个字段的验证规则。例如： ```javascript data() { return ...
vue中使用element-ui进行表单验证的实例代码
12-29
element-ui 中验证 一、简单逻辑验证（直接使用rules） 实现思路 •html中给el-form增加 :rules=”rules” •html中在el-form-item 中增加属性 prop=”名称” •js中直接在data中定义rules:{} •html部分 <el ref=...
vue+element-ui集成随机验证码+用户名+密码的form表单验证功能
01-19
在登入页面，我们往往需要通过输入验证码才能进行登入，那我们下面就详讲一下在vue项目中如何配合element-ui实现这个功能 第一步：自定义一个生产随机验证码的组件，其本质是使用canvas绘制，详细代码如下： ...
详解element-ui中表单验证的三种方式
01-21
最近项目中一直使用的element-ui作为前端框架，对于最常使用的表单验证，做出以下总结： 第一种常用方式：表单上加rules｛object｝ <el class=apply-form model=formData rules=rule ref=form> 姓名 prop=...
vue使用Element组件时v-for循环里的表单项验证方法
08-27
Vue 使用 Element 组件时 v-for 循环里的表单项验证方法 对 Vue 使用 Element 组件时 v-for 循环里的表单项验证方法进行详细介绍。主要讲解了如何在使用 Element 组件时处理 v-for 循环里的表单项验证问题。 首先...
vue element自定义表单验证请求后端接口验证
10-15
在Vue.js框架中，尤其是使用Element UI库进行前端开发时，经常会遇到需要进行复杂表单验证的情况。这里我们关注的是如何实现自定义表单验证并结合后端接口进行数据有效性检查。这个场景通常发生在需要确保输入的数据...
antd +vue3 a-form表单验证（校验）规则填写数值后提示仍然存在的问题 嵌套
lpfhjw的博客
10-24 4312
antd +vue3 a-form表单验证（校验）规则填写数值后提示仍然存在的问题 嵌套 TS 表单验证失效
form表单校验，有数据，但是提示文字不消失
细节怪的博客
12-26 1389
自定义form表单验证，符合表单规则后，提示文字仍然不消失。
Element form表单校验不消失问题
热门推荐
ZHANGWEI19930118的博客
02-26 1万+
今天在使用Element表单校验的时候遇到的问题，有一个下拉框在第一次什么都不选时点击提交会触发校验提示，但是当提示后在为下拉框选择值得时候校验的提示依然存在不会消失。搞了好久都没找到问题，后来在百度上发现解决方法， 原因是表单域的item项的prop与组件的绑定值v-model的值要一样，比如;prop=&quot;aaa&quot;那么v-model的值也要等于“aaa” ...
VUE3 中使用 Element Plus 获取表单验证通过的值
05-30
在 Vue3 中，Element Plus 的使用方式和 Vue2 有些差异，但是获取表单验证通过的值的方法基本相同。以下是一个示例代码： ```html <template> <el-form :model="form" :rules="rules" ref="formRef"> <el-form-item label="姓名" prop="name"> <el-input v-model="form.name"></el-input> </el-form-item> <el-form-item label="年龄" prop="age"> <el-input v-model.number="form.age"></el-input> </el-form-item> <el-form-item> <el-button type="primary" @click="submitForm">提交</el-button> </el-form-item> </el-form> </template> <script> import { ref } from 'vue'; export default { setup() { const formRef = ref(null); // 定义 ref const form = ref({ name: '', age: '', }); const rules = ref({ name: [ { required: true, message: '请输入姓名', trigger: 'blur' }, ], age: [ { required: true, message: '请输入年龄', trigger: 'blur' }, { type: 'number', message: '年龄必须为数字值' }, ], }); const submitForm = () => { formRef.value.validate((valid) => { if (valid) { console.log(form.value); // 获取表单数据 } else { console.log('表单验证失败'); return false; } }); }; return { formRef, form, rules, submitForm, }; }, }; </script> ``` 在上述代码中，我们使用了 Vue3 的新特性 `setup()` 函数来创建组件，使用 `ref` 来定义表单数据和规则，并通过 `ref` 获取表单组件的实例，然后在 `submitForm` 方法中通过 `formRef.value.validate()` 方法验证表单是否通过，如果通过则可以通过 `form.value` 来获取表单数据。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值