【无标题】el-form 校验失败原因分析

最新推荐文章于 2024-08-30 09:23:52 发布
原创 最新推荐文章于 2024-08-30 09:23:52 发布 · 812 阅读 · 2 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue #elementui

本文分析了el-form校验失败的常见原因，包括未绑定model、属性名不匹配等，并提供了初始化解决办法。

这里写自定义目录标题

el-form 校验失败原因分析

  1. 没有绑定model
  2. prop属性的值与规则校验中的名称不一致
  3. v-model 绑定的值不是model 绑定对象的属性
    在这里插入图片描述
    在这里插入图片描述
  4. 如果出现第一次有数据校验成功，第一次没有值校验失败，后面赋值了还是校验失败了，那就需要做初始化
    在这里插入图片描述
    因项目需求，通过多方查找资料与交流所得。如有侵权，请联系删除！
李小若98
关注
Element UI 表单验证规则动态失效问题
a1137588003的博客
09-14 1897
Element 版本：v2.15.3。
el-form 规则校验-清空规则校验
Aa12364567的博客
03-15 1115
el-form 规则校验-清空规则校验。
解决el-form表单prop和model绑定属性名不一致导致校验失败的问题
cscodeer的博客
10-16 1421
【代码】解决el-form表单prop和model绑定属性名不一致导致校验失败的问题。
element 表单使用校验 校验失效问题
paidaboluo的博客
08-17 1万+
element 表单使用校验 校验失效问题
el-form的表单验证不生效
qq_45183027的博客
02-28 6902
之前表单验证总是返回true不生效，没注意v-if的原因，记录一下 1.原因 1）prop和model绑定的数据名称和rules名称一致; 2）表单验证ref值唯一; 3）使用v-if表单的验证失效一直返回true；在el-form-item加上key值;或者使用v-show来渲染 2.el-form部分 验证规则rules。 //form form:any ={ sponsorId: 0, } //rules验证规则 rules: any = { sponsorId: [{ required
el-from 表单验证无效果
m0_46975894的博客
11-20 1132
2、 el-form-item 中没有设置prop="tmName" 不设置props验证规则无效。1. el-form 中 ：model='tranmarkparams'
el-table嵌套 el-form并且加正则校验
06-15
el-table 封装组件
el-form表单中的el-upload的文件表单验证
dayday_0724的博客
06-25 1897
解决使用element-ui的upload组件中文件表单验证问题
el-form-item不显示报错$option；label和input不是行内样式显示；el-form表单校验不生效；el-form表单校验正则
killerdoubie的博客
02-27 1474
el-form-item不显示报错$option;label和input不是同行显示；el-form表单校验不生效；el-form表单校验正则
el-form表单空格校验，提交校验
qq_42505501的博客
06-21 778
el-form表单空格校验，提交校验校验空格#实现的效果图template里面的代码 export default { name: ‘User’, data() { return { dialogVisibleAdd: false, form: { name: ‘’, sex: ‘’, age: ‘’, addr: ‘’, birthDate: ‘’ }, tableData: [{ name: ‘张三’, age: 15, sex: ‘男’, birthDate: ‘2022-02-08’, addr:
el-form表单中填了值，还弹出校验失败
weixin_38345306的博客
06-26 1175
el-form表单中填了值，还弹出校验失败
elementUI elfrom表单验证无效、不起作用常见原因
carbonzhao的专栏
09-16 6874
的问题，我就将
vue-elementui组件-el-form表单验证失败问题
no pains,no gains
12-14 2775
待写
vue中使用el-form表当校验失效，表单校验不起作用
qq_40462931的博客
08-30 685
我这个vue文件中存在多个表单，通过v-if判断，来依据步骤显示不同的表单，其中一个表单也有表单校验。那个表单校验是没问题的，看文章是因为表单渲染问题，表单没有从新渲染所导致的。今天开发中遇到这样一个问题，给签约功能表单增加表单校验，给每个表单输入项增加必填校验，结果只有最后一个手机号有必填校验，其他都失效了，没有起作用。开始我以为校验项是否哪里写错了，我一一对比，发现并没有哪里有问题，就是不生效，奇怪了。解决方法就是给每个表单增加一个不同的key，增加后问题确实解决了。
el-form 自定义校验规则失效之坑 elementUI
weixin_45654407的博客
09-30 4139
自定义校验 如果你发现校验没有触发，也进不了校验，有if判断都要加上else把callback返回，不然如果没进入if判断，就没法把callback返回了，同是也无法继续提交了。 this.$refs.returnForm.validate((valid) => { 这里都进不来 if (valid) { } 错误示范 var validUseBalance = (rule, value, callback)
el-form表单校验无效
monparadis的博客
05-21 3687
前言： 当表单填写完成，提交表单，使用表单验证的方法，如果验证通过保存表单，若验证不通过，则提示警告，可是validate，没有任何返回， 控制台也没有任何报错信息 产生原因：自己定义的验证方法，有种情况掉了callback返回（每个条件都需要callback返回，使validate事件进行下去） 定义解释： rule： 是自定义校验的规则 value：是被校验的数据 callback：是每一次校验之后，也就是if语句后都会返回一个callback，将结果给了validate从而继续执行代码，否
解决：v-if条件切换时，input框输入值未清空
weixin_45121510的博客
10-23 3172
用 key 管理可复用的元素： Vue 会尽可能高效地渲染元素，通常会复用已有元素而不是从头开始渲染。这么做除了使 Vue 变得非常快之外，还有其它一些好处。例如，如果你允许用户在不同的登录方式之间切换： <template v-if="loginType === 'username'"> <label>Username</label> <input placeholder="Enter your username"> </template&gt
el-form动态检验无法生效问题（已解决）
A_9888的博客
09-12 1797
要对el-form里面的字段动态生成校验规则，测试了一系列的骚操作也无法生效，要么是require视图生效了，校验规则还是不生效;
el-form表单多项控制校验；el-form表单新增表单项动态校验；el-form校验动态表单v-if不生效；
热门推荐
i_am_a_div的博客
06-30 1万+
el-form表单新增表单项动态校验；el-form校验动态表单v-if不生效；
el-form 校验el-select-tree
最新发布
10-10
在 `el-form` 中对 `el-select-tree` 进行校验，可借助自定义校验函数实现。以下是一个示例代码，详细展示了如何配置校验规则并进行校验： ```vue <el-form :model="formData" :rules="formRules" ref="formRef">...
评论 1
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值