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

最新推荐文章于 2022-12-12 20:23:14 发布
最新推荐文章于 2022-12-12 20:23:14 发布
阅读量918 收藏 1
点赞数
分类专栏： 踩坑 文章标签： elementui 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/DryJiuOver/article/details/119879239
版权

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

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

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

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

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

 

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

 

 

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

AWoodStick
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
Vue项目的手机号表单验证
qq_45228330的博客
02-24 3915
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
vue-sku-form:基于 Vue & ElementUI 的电商 SKU 表单配置组件
05-29
vue-sku-form 基于 Vue & ElementUI 的电商 SKU 表单配置组件 你或许感兴趣 一款开箱即用的 Vue 中后台管理系统框架
vue element el-form多表单验证.txt
09-17
在使用element-ui，想要多个表单同时验证时，可以使用promise的方法进行异步验证取得结果后再进行操作
el-form表单验证根据接口返回错误信息
xjf106的博客
08-06 1041
使用error属性绑定值，在接口函数回调里处理提示信息
vue-element Form表单验证（表单验证没错却一直提示错误）
weixin_30443747的博客
05-08 4115
在使用element-UI 的表单时，发生一个验证错误，例如已输入值但求验证纠错： 代码如下所示： <el-form :model="correction" :inline="true" :rules="rules" ref="correctionForm" class="demo-ruleForm" > ...
form表单label添加提示图标
qq_28586135的博客
12-12 1655
form表单label添加提示图标
el-form表单使用error提示校验信息, 重复校验信息不显示
qq_43340606的博客
07-28 2180
error="errorObj.posId",第一次显示错误提示,之后再点击提交后就不显示错误提示了。查看element源码发现el-form-item的error属性监听的是watch。所以注意重新提交表单前,需要重置一下errorObj.posId。然后异步赋值需要显示的校验信息。...
element 结合vue 在表单验证时有值却提示错误的解决办法
08-28
主要介绍了element 结合vue 在表单验证下，有值却提示错误的解决办法,需要的朋友可以参考下
vue-form-component:一个可以动态生成表单项的form表单组件
05-11
一个基于vue.js和element-ui可以动态生成表单项form表单 此动态form表单是基于element-ui里的el-form表单基础上进行修改而来，它实现了新增表单项、删除表单项、表单验证和重置表单、表单提交等form表单所拥有的基本...
Vue ~ element-ui 动态表单验证，支持添加和删除操作
最新发布
07-27
Vue 基于element-ui 组件，el-form与el-table结合使用实现动态表单验证，支持添加和删除操作；支持身份证号码验证、手机号验证; 开箱即用，方便快速二开，节省开发成本
el-form表单label添加icon提示和必填校验
口袋的天空的博客
04-23 5168
像下面这样，表单前面必填校验，再在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 1110
报错截图如下图所示： 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 9975
效果： 代码： <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
Element-UI
qq_45859670的博客
05-17 493
Vee Validata官网
vue学习十一(全局局部组件、prop传不同值、 v-bind 动态赋值、单向数据流、prop校验)
全干工程师
09-29 6036
文章目录局部注册dom模板解析注意事项用 Prop 传递不同值类型用 Prop通过 v-bind 动态赋值用 Prop传递对象的所有属性用 Prop传递对象数组用 Prop传入一个数字单向数据流Prop 验证 局部注册 在这些情况下，你可以通过一个普通的 JavaScript 对象来定义组件： var ComponentA = { /* ... */ } 然后在 components 选项中定义...
Vue3: vue3 props接多个不同类型的参数，默认false
weixin_44016350的博客
12-12 6295
Vue3: vue3 props接多个不同类型的参数，默认false
elementui的表单重置按钮不生效
weixin_44478972的博客
08-16 794
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm"> <el-form-item label="活动名称" ~~prop="name"~~ > <el-input v-model="ruleForm.name"></el-input> </el-form-item> <el-fo
java计算CRC16校验码
qingshui_qs的博客
10-27 1850
java计算校验和的一个公式，亲测可行有效 /** * 计算CRC16校验码 * * @param data 需要校验的字符串 * @return 校验码 */ public static String getCRC(String data) { data = data.replace(" ", ""); int len = data.length(); if (!(len % 2 == 0)) { return "0000"; } int num = le
（vue+element）解决两个表单通过if判断切换 表单验证发生冲突的问题
weixin_39277183的博客
07-29 2192
（vue+element）解决两个表单通过if判断切换 表单验证发生冲突的问题 需求：根据不同的类型进行form切换，以及要实现表单校验 失败尝试：再每个不一样的form里每个子元素加了key不行（错误示范） 可能造成的原因：即使两个表单绑定的值不同，但是浏览器在解析时，先解析第一个表单，此时表单上是有绑定ref，之后再解析第二个表单时，浏览器发现这它的prop和第一个表单的prop一样，所以就认为这两个表单是同一个表单，就没有重新渲染，而ref本身是作为渲染结果被创建的，所以第二个表单没能.
重新写一个vue3的element-plus的表单验证
06-07
好的，以下是一个简单的使用 Vue 3 和 Element Plus 实现表单验证的示例： ```html <el-form :model="form" :rules="rules" ref="form"> <el-form-item label="用户名" prop="username"> <el-input v-model=...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值