VUE框架：el-form表单验证功能注意事项（表单验证不起作用或者满足验证规则但还是提示失败信息）

最新推荐文章于 2024-06-20 22:56:52 发布
最新推荐文章于 2024-06-20 22:56:52 发布
阅读量1.2w 收藏 9
点赞数 2
分类专栏： 前端设计 编程语言 文章标签： vue el-form表单验证 表单验证出错 vue中的el-form的表单验证使用
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u012891980/article/details/84975286
版权

el-form表单验证对了也是警告 - 解决方案

这个问题也是干扰了一下我，经过网上搜索和自己试验，才得知以下两点注意事项：

  1. el-form中的:model绑定的对象和在item中绑定的数据的对象一定要是一样的：

​​​​​​​

 2. el-form-item中的prop的值一定要和rules中的键名一致：

李虎军
关注
  • 2
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 9
    评论
专栏目录
Vue ~ element-ui 动态表单验证，支持添加和删除操作
07-27
总之，“Vue ~ element-ui 动态表单验证”项目展示了如何利用Vue.js和Element-UI的强大功能，结合动态表单和验证规则，实现一个灵活且功能丰富的后台表单系统。通过掌握这些技术，开发者可以更高效地处理各种表单...
vue element el-form多表单验证.txt
09-17
在使用element-ui，想要多个表单同时验证时，可以使用promise的方法进行异步验证取得结果后再进行操作
elementUI表单验证的怪异问题-填入符合要求的数据校验不通过
Annie的博客
03-26 4336
一、现象 select选中选项后，提交表单，校验未通过 input填入符合要求的内容后，提交表单，校验未通过 二、代码 两个问题都是由于数据格式不匹配校验未通过，在select中，可以强制将option的value改为string类型，解决问题。但在input的例子中，我们需要的必须是number类型。在代码中强制转换为number类型，...
el-form表单验证报错[Element Warn][Form]model is required for validate to work!
热门推荐
Aimee的博客
08-18 1万+
在项目中偶尔出现表单报错，报错截图如下图所示： 1.<el-form>属性绑定错误：model绑定，而不是v-model <el-form :model="form" ref="form" :rules="rules"> </el-form> 2.ref重复 检查是否在其它表单中使用了相同的ref命名 ...
Vue中使用ElementUI组件Form组件的校验validate
最新发布
weixin_43589681的博客
06-20 451
3.需要校验的元素上需要加上prop，这个是对应校验的内容的。注意的是 如果是双向绑定的如（input）的prop的名字必须和绑定的元素名字一样，比如我的收集数据为SkuForm.skuName那么prop值为skuName就好了，否则有可能校验不起来。元素 这里面el-form中:model(v-bind:model)是单项绑定的，如果你写成了v-model=""可能会出现校验没有效果的情况。1.在el-form中绑定一个ref，名字自拟,后续触发检验结果需要使用到它。这是校验过后的结果了。
element form 表单的校验异常
weixin_43910427的博客
03-16 542
这个表单的validate 有问题，可以是以下几个方面 ： el-form 上面有没有绑定表单 :model = ‘表单’ el-form-item 上有没有绑定正确的prop 有没有自定义的校验，如果有，是否有回调函数 校验规则 rules 是不是没绑定或者写错了 绑定的表单和绑定给具体的值的是不是同一个form 自定义校验回调的时候执行报错, 也会进catch ...
vue-element Form表单验证（表单验证没错却一直提示错误）
weixin_30443747的博客
05-08 4123
在使用element-UI 的表单时，发生一个验证错误，例如已输入值但求验证纠错： 代码如下所示： <el-form :model="correction" :inline="true" :rules="rules" ref="correctionForm" class="demo-ruleForm" > ...
[Vue warn]: Error in v-on handler: “TypeError: Cannot read property ‘validate’ of undefined“表单提交验证报错
qq_51720257的博客
05-16 1549
vue2+element-ui表单提交验证报错
vue 添加和编辑用同一个表单,el-form表单提交后清空表单数据操作
01-21
然后是主要用到了el-form表单有一个清空重置表单数据的事件方法resetField()，在子组件表单弹窗打开的时候清空一下，在关闭子组件表单弹窗的时候还需要调用resetField()去重置表单数据。这样编辑数据之
解决vue+ element ui 表单验证有值但验证失败问题
01-19
如图：有值但是验证失败 二. <el model=form rules=rules> <el label=数据模板 prop=template> <el span=20> <el type=textarea v-model=form.template rows=8 placeholder=请输入数据模板 readonly=true></el> ...
element-ui表单校验成功，一直发出警告
shsyzhzhgn的博客
07-14 714
表单校验成功validate返回true,控制台报错，警告信息fieldValue:“”
三分钟细数 el-form 表单校验的坑点，前车之鉴，可助你避坑
本博客纯属个人网络笔记，如对阁下有用，甚喜；否则，关掉即可，不喜勿喷。专心写代码，不做键盘侠！
10-12 1万+
Vue 的 el-form 提供了表单校验功能，通过 :rules 属性设置校验规则，并通过 el-form-item 的 prop 属性绑定校验规则。通过封装，让前端校验更方便。具体使用过程中，有几个容易出错的地方，本文来整理一下。每一个坑都是笔者亲自趟过的，写完本文后，以后应该不会再踏入相同的坑。...
ElementUI表单校验不生效
weixin_52688746的博客
11-19 1万+
问题：vue中使用element-ui进行表单校验的时候，必填项按照规则输入，但是一直不通过，问题如下图： 解决办法： 出现问题的原因是 v-model 和 :model 的区别问题（ v-model 通常是用于 input 的双向绑定，但是它不会向子组件传递数据； 而 ：model 表示绑定自定义的属性，它只是将父组件的数据传递给子组件，没有实现父子组件间的数据双向绑定）。我在 form 表单中使用了 v-model 所以出现了错误，正确使用如下： <el-form :model="logi
奇怪的bug——elementui的el-form校验生效但提示文字不显示
qq_45840993的博客
07-13 5715
el-form校验生效但提示文字不显示
关于element form表单的验证错误提示信息位置没有出现在文本框下的问题
lvdoubing81的博客
12-01 7203
今天带我的大佬碰到一个有意思的坑，现象如图，错误提示没有在文本框下，而是出现在最左边的文字下。 原因：el-form 没有加上 label-width，默认宽度为0，导致验证错误的提示信息直接出现在了最左边。 解决： 给el-form加上label-width 或者是 el-form-item 上加上label-width 就可以正常显示了。 没什么难度，只是觉得有点意思，所以记录一下。 ...
el-form手动增加验证，提示错误信息。
sssuuuunnn的博客
10-21 1389
利用动态增减表单验证的方法 export default { data() { return { rules: { age: [{ required: true, message: "请输入年龄", trigger: "blur" }] } } } }, methods() { isAdult() { this.rules.age.push({ validator: (rule, value, callback) => { if (valu
el-form表单校验无效
monparadis的博客
05-21 3470
前言： 当表单填写完成，提交表单，使用表单验证的方法，如果验证通过保存表单，若验证不通过，则提示警告，可是validate，没有任何返回， 控制台也没有任何报错信息 产生原因：自己定义的验证方法，有种情况掉了callback返回（每个条件都需要callback返回，使validate事件进行下去） 定义解释： rule： 是自定义校验的规则 value：是被校验的数据 callback：是每一次校验之后，也就是if语句后都会返回一个callback，将结果给了validate从而继续执行代码，否
el-form表单使用error提示校验信息, 重复校验信息不显示
qq_43340606的博客
07-28 2260
error="errorObj.posId",第一次显示错误提示,之后再点击提交后就不显示错误提示了。查看element源码发现el-form-item的error属性监听的是watch。所以注意重新提交表单前,需要重置一下errorObj.posId。然后异步赋值需要显示的校验信息。...
vue项目多层数据结构导致表单校验失效（如输入内容仍提示不能为空）
H30919的博客
09-02 3258
vue项目多层数据结构导致表单校验失效（如输入内容仍提示不能为空、号码格式正确仍显示格式错误）
vue3中el-input表单验证
08-18
在Vue 3中，可以使用element-plus组件库中的el-form和el-form-item来进行表单验证。首先，在template中使用el-form组件，并将需要验证的表单项包裹在el-form-item中。例如，可以像这样设置一个姓名输入框的验证： `...
评论 9
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值