vue-element Form表单验证的一个小细节，不然一直提示错误信息

最新推荐文章于 2023-01-12 19:00:00 发布
原创 最新推荐文章于 2023-01-12 19:00:00 发布 · 1.2k 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#elementui #前端

博客作者分享了在使用vue-elementForm进行表单验证时遇到的问题，即prop的值与rules规则里的名字保持一致仍然报错。关键在于，prop不仅要与rules匹配，还需与input中的v-model数据名相同。通过确保这三个值的一致性，问题得到了解决。这是一个关于前端开发中Vue组件使用和表单验证的常见陷阱。

今天又发现一个小细节，把握住啊兄弟姐妹们！

在使用 vue-element Form表单验证时，prop的值与rules规则里面验证项的名字保持一致，却还是一直报错

 这tm的到底是为什么？？！！

男人一定要细，我说的是心一定要细QaQ~

prop的值不但要与rules规则里面验证项的名字保持一致，还要跟input框中v-model绑定的数据名一致

 

 修改之后三个值保持一致，成功解决问题

 

 

得益麻烦点个小小的赞哦~

vue element el-form多表单验证.txt
09-17
### Vue Element UI 多表单验证详解 在前端开发中，表单验证是十分重要的环节之一...在实际开发过程中，还可以根据具体需求进行扩展，比如增加更复杂的验证规则、自定义错误提示信息等，使得表单验证更加灵活和强大。
精选资源
Vue ~ element-ui 动态表单验证，支持添加和删除操作
07-27
本项目“Vue ~ element-ui 动态表单验证”是针对Vue和Element-UI的一个应用场景，主要关注的是动态表单验证以及表单元素的增删操作。下面我们将详细探讨这些知识点。 1. Vue.js动态表单验证： Vue.js允许开发者通过...
Element-UI
qq_45859670的博客
05-17 813
Vee Validata官网
Vue3——第十二章（Props）
why404
01-12 2万+
Vue3——第十二章（Props）
vue学习十一(全局局部组件、prop传不同值、 v-bind 动态赋值、单向数据流、prop校验)
全干工程师
09-29 6298
文章目录局部注册dom模板解析注意事项用 Prop 传递不同值类型用 Prop通过 v-bind 动态赋值用 Prop传递对象的所有属性用 Prop传递对象数组用 Prop传入一个数字单向数据流Prop 验证 局部注册 在这些情况下，你可以通过一个普通的 JavaScript 对象来定义组件： var ComponentA = { /* ... */ } 然后在 components 选项中定义...
el-form表单验证根据接口返回错误信息
xjf106的博客
08-06 1233
使用error属性绑定值，在接口函数回调里处理提示信息
vue-element Form表单验证（表单验证没错却一直提示错误）
weixin_30443747的博客
05-08 4228
在使用element-UI 的表单时，发生一个验证错误，例如已输入值但求验证纠错： 代码如下所示： <el-form :model="correction" :inline="true" :rules="rules" ref="correctionForm" class="demo-ruleForm" > ...
element 结合vue 在表单验证时有值却提示错误的解决办法
08-28
然而，在使用 Element 结合 Vue 进行表单验证时，有时可能会遇到一种情况，即虽然输入框中已经输入了值，但是仍然提示错误信息。这是什么原因导致的？如何解决这个问题呢？ 首先，我们需要了解 Element 的表单验证...
精选资源
vue-sku-form:基于 Vue & ElementUI 的电商 SKU 表单配置组件
05-29
Vue-Sku-Form 是一个专为电商领域设计的前端组件，它基于 Vue.js 框架和 ElementUI 组件库，旨在提供一个高度可配置的 SKU（Stock Keeping Unit，库存单位）表单生成器。在电商网站中，SKU 通常用于唯一标识商品的...
精选资源
vue-form-generator:vue3 + ts + element-plus表单生成器
04-10
Vue Form Generator是一款基于Vue.js的库，特别针对Vue 3、TypeScript以及Element Plus组件库设计的动态表单生成器。这个工具允许开发者通过JSON schema快速构建复杂的表单，极大地提高了开发效率，减少了手动编写...
form表单label添加提示图标
qq_28586135的博客
12-12 1824
form表单label添加提示图标
el-form表单使用error提示校验信息, 重复校验信息不显示
qq_43340606的博客
07-28 2696
error="errorObj.posId",第一次显示错误提示,之后再点击提交后就不显示错误提示了。查看element源码发现el-form-item的error属性监听的是watch。所以注意重新提交表单前,需要重置一下errorObj.posId。然后异步赋值需要显示的校验信息。...
Vue项目的手机号表单验证
qq_45228330的博客
02-24 4155
Vue项目的手机号表单验证 一、根据Vue官方文档写表单验证功能 二、检验规则写法 export default { data(){ //验证手机号的正则表达式 let reg=/^(((13[0-9]{1})|(15[0-9]{1})|(16[0-9]{1})|(17[3-8]{1})|(18[0-9]{1})|(19[0-9]{1})|(14[5-7]{1}))+\d{8})$/ //验证方法 let validatorPhone = function (phone, value, callb
el-form表单label添加icon提示和必填校验
口袋的天空的博客
04-23 5758
像下面这样，表单前面必填校验，再在label前面添加Icon 提示悬浮文字。 如何实现呢？ 如下： el-form-item标签上的label标签写在span的slot上 <el-col :span="12" v-if="addMenuForm.type == '0' || addMenuForm.type == '1'"> <el-form-item prop="url"> //标签
el-form表单验证报错[Element Warn][Form]model is required for validate to work!
智十七的博客
10-26 1237
报错截图如下图所示： 1.属性绑定错误：v-bind:model绑定，而不是v-model <el-form :rules="rules" ref="login" v-bind:model="loginForm" class="loginContainer"></el-form> 2.ref重复 检查是否在其它表单中使用了相同的ref命名 ...
vue+element ui 小问号提示
weixin_41294419的博客
08-07 1万+
效果： 代码： <el-form-item label="域类型"> <el-select v-model="temp.fieldType" class="filter-item"> <el-option v-for="item in fieldTypeList" :key="item.value" :label="item.label" :value="item.value" /> </el-sel
vue 手机号码校验 elment校验 简单校验 提交校验
weixin_44040867的博客
03-31 2175
<el-form :model="shipmentFormal" label-width="180px" class="query" :inline="true" :rules="rules" style="background-color: #fff; border: 1px solid #eaeaea" ...
Vue3: vue3 props接多个不同类型的参数，默认false
weixin_44016350的博客
12-12 7396
Vue3: vue3 props接多个不同类型的参数，默认false
在vue中使用rules的定义和校验规则
热门推荐
asdfghjkl521947的博客
09-18 5万+
表单内容里面定义属性: <From ref="rulesForm" :model="rulesForm" :label-width="100" :rules="rules"> <FormItem label="名称" prop="name"> <Input v-model="rulesForm.name" placeholder="名称"/> </FormItem> 在data()里面写具体的规则: rules { n
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值