el-form表单对象内还嵌套对象，绑定的prop规则校验会失效

最新推荐文章于 2024-05-07 10:21:25 发布
最新推荐文章于 2024-05-07 10:21:25 发布
阅读量5.8k 收藏 16
点赞数 5
分类专栏： element-ui 文章标签： vue ui chrome
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42190844/article/details/121532087
版权

继续踩坑~。因为受限于后端返回的数据格式，整个表单是个对象，但是里面还会嵌套对象。
而我们在绑定字段时，自然而然是去绑定最里层的字段。

在这里插入图片描述
el-form的model是去绑定大的表单对象。
而我这里的表单项则是绑定final_transfer.acc_profit_name。但我这里prop写的是acc_profit_name。对应规则里面的prop。
在这里插入图片描述
在这里插入图片描述

按官方文档的，如果表单对象不涉及嵌套，这样绑定是没问题的。但如果涉及到了嵌套。我们这里这样绑定prop，即使表单的值改变了，校验也还是会存在。
在这里插入图片描述

解决办法：

prop和rules的值修改如下。
在这里插入图片描述
在这里插入图片描述

源码的匹配逻辑大家可以去看看，这里简单讲一下就是。你在el-form-item填写的prop是这里 prop对象的k值。
o对象是需要校验的表单字段
prop.o[this.prop || ’ '] 这里就会根据el-form-item的prop去取值rules里要校验的字段
在这里插入图片描述

流浪码农~
关注
  • 5
    点赞
  • 踩
  • 16
    收藏
    觉得还不错? 一键收藏
  • 6
    评论
专栏目录
Element-ui 为什么el-form-item的rules校验规则不生效
星云
10-04 6904
# 原因 ## 错误 ```html <el-form-item :label="label" prop="id"> <el-input v-model="form.id" :placeholder="`请输入${label}`" :rules="rules"/> </el-form-item> ``` ## 改正 ```html <el-form-item :label="label" :rules="rules"
el-form 多层级表单的实现示例
11-19
前言 ...el-form 使用，详情可参见： Form 表单 有几个比较重要的属性： ref 相当于标签的 id model 表单数据对象 rules 表单验证规则 prop 表单域 model 字段 label 标签文本 在提交按钮的
VUE el-form 当表单数据多层嵌套，校验不生效或校验一直显示不成功的提示。
最新发布
m0_67477481的博客
05-07 379
我的方法很简单粗暴 ，rules 这里对应的表单数据结构，写出对应的校验数据结构。可以看出表单数据结构是多了一层 orderProductList数组，那么对应的rules也多了这个数组orderProductList。首先我的表单数据是这样的,也就是多了一层orderProductList这个数组。那要怎么校验这个多出来的一层的数据呢？el-form 官方的表单数据是这样的,只有浅浅的一层。
表单验证rules，多层嵌套对象获取value值为undefined，输入有值却校验失败？
weixin_44208883的博客
10-06 1205
原因分析： 表单验证rules，多层嵌套对象获取value值为undefined，输入有值却校验失败？ 对象里的值要一一对应到输入框的model，rules也要一一对应。 解决方案： <s-form :model="models" :rules="rules" > <s-form-title title="商品信息" /> <div v-for="(item, index, key) in models.sku_list" :key="key
elementui 表单数据嵌套过深导致校验不了问题解决
jiangjunyuan168的博客
01-23 966
在使用 elementui 表单校验的过程中发现表单中存在嵌套多个层级的数据不能进行校验。
el-form面对表单内容有数组嵌套时校验，和数组表单校验不生效的解决办法（element-ui框架），输入之后表单依然有验证提示，每次添加表单某一项，我们处理表单验证的方法
zxq1640058349的博客
07-18 1382
【代码】el-form面对表单内容有数组嵌套时校验，和数组表单校验不生效的解决办法（element-ui框架）
element form表单验证无效
南乡人的博客
12-09 2153
重点查询四个地方，是否统一 1. el-form ：model务必绑定到，每个el-form-item绑定的v-model，且需绑定:rules 2. el-form-item el-form-item上的prop必须与v-model同名 如果嵌套层级比较深，可参考这篇博客 3. data “FormModel” 应该存在"FormModel",即上述v-model中绑定的对象 4. ...
vue elementUI 表单校验功能之数组多层嵌套
12-08
总结一下，处理Vue Element UI表单的数组多层嵌套校验，关键在于理解如何正确地绑定和校验数组内的对象属性。无论是通过内嵌的`el-form`组件还是动态`prop`，都能实现预期的校验效果。在实际开发中，理解并灵活运用...
el-table树形表格表单验证(列表生成序号)
10-15
这里的`form`是表单数据对象，`rules`是验证规则对象，`rows`属性对应`el-table`中的数据数组。在实际应用中，你需要根据业务需求定义具体的验证规则，例如： ```javascript const rules = { rows: [ { children...
el-table，el-form在vue中封装组件化，含操作按钮和插槽.pdf
12-16
`el-form`用于创建表单，它通过`v-model`与外部数据进行双向绑定。在提供的模板中，`v-for`指令用于遍历`searchList`数组，动态生成表单元素。`searchList`应该是一个包含各种表单字段配置的对象数组，包括类型...
redux-form-antd:Redux表单的Ant设计绑定
05-14
redux-form和antd的绑定。 该库应与redux形式和react-final形式兼容。 欢迎索取最终形式的故事。 是一组包装器，用于促进将redd 与antd组件一起使用。 :eyes: 安装 使用 ： $ npm install --save redux-form-...
el-form循环生成el-form-item校验失败原因
weixin_45654407的博客
01-13 1828
划重点： :prop="‘specificationsCopy.’+scope.$index+’.name’" :rules=“rules.name” 如果:rules=“rules.name” 换成required就会报错xxx is required <el-form-item label="商品规格:" required> <div class="table"> <el-table :data="ruleForm.sp
el-form 表单项前面显示星号 但又不校验这一项代码怎么实现
killerdoubie的博客
06-19 1750
el-form 表单项前面显示星号 但又不校验这一项代码怎么实现
element-ui的el-table和el-form嵌套使用表单校验的用法及可能出错的情况及解决方法
DcTbnk的博客
06-22 3549
el-form套el-table并校验element-ui的el-table和el-form嵌套使用表单校验element-ui动态删除表单项后导致表单验证报错"please transfer a valid prop path to form item!"隐藏浏览器控制台输出async-validator验证警告 element-ui的el-table和el-form嵌套使用表单校验 → element-ui的el-table和el-form嵌套使用表单校验 <!--添加-->
el-form中数组嵌套对象的验证
qq_38344363的博客
11-22 2532
el-form数组嵌套对象验证
关于循环element-form验证如何使用/验证不起效果
qq_36821274的博客
06-28 428
如：rateList:[{operatorName:'',tradePrice:'',tradeServiceChargePercentForm:'',radeServiceChargeMax:'',tradeServiceChargeMin:'',auctionPriceUnitMin:'',auctionPriceLimitMin:''}],1、需要注意:prop="`rateList.${index}.operatorName`" :rules="rules.operatorName"
[element-ui]el-form自定义校验规则传参，解决循环校验问题
xxuxioxx的博客
03-13 1881
表单自定义校验规则传参
记一次 Element-UI 嵌套组件不生效的问题
qq_39249627的博客
06-09 1462
这种问题表现出来就非常的玄学：当我更改代码后编译运行打开这个页面时，一切都很正常，点击 button 也能够正常显示气泡确认框。但运行一段时间后，再去点击 button，则很有可能无法显示气泡确认框了...
el-form表单校验规则
05-24
el-form 表单组件可以使用 `rules` 属性来添加校验规则，具体步骤如下： 1. 在表单控件上添加 `prop` 属性，该属性的值对应表单数据对象中的属性。 2. 在 el-form 上添加 `rules` 属性，该属性的值是一个对象，对象的 key 是对应表单控件的 prop 值，value 是一个数组，数组中包含校验规则。 3. 在表单控件上添加 `v-model` 属性，该属性的值对应表单数据对象中的属性。 例如，在一个登录表单中，需要对用户名和密码进行校验，可以这样写： ```html <template> <el-form :model="loginForm" :rules="loginRules"> <el-form-item label="用户名" prop="username"> <el-input v-model="loginForm.username"></el-input> </el-form-item> <el-form-item label="密码" prop="password"> <el-input type="password" v-model="loginForm.password"></el-input> </el-form-item> <el-form-item> <el-button type="primary" @click="submitForm">登录</el-button> </el-form-item> </el-form> </template> <script> export default { data() { return { loginForm: { username: '', password: '', }, loginRules: { username: [ { required: true, message: '请输入用户名', trigger: 'blur' }, { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }, ], password: [ { required: true, message: '请输入密码', trigger: 'blur' }, { min: 6, max: 20, message: '长度在 6 到 20 个字符', trigger: 'blur' }, ], }, }; }, methods: { submitForm() { this.$refs.loginForm.validate((valid) => { if (valid) { // 表单校验通过，可以提交表单 console.log(this.loginForm); } else { // 表单校验未通过，不可以提交表单 return false; } }); }, }, }; </script> ``` 在这个例子中，我们使用了两个 el-form-item 组件来包含用户名和密码的输入框，分别对应 loginForm 对象的 username 和 password 属性。在 el-form 上设置了 loginRules 对象来指定校验规则，其中 username 和 password 分别指定了两个校验规则。在 submitForm 方法中，我们使用了 `$refs` 来获取表单组件，并调用了 validate 方法来进行表单校验。`validate` 方法的回调函数中，如果校验通过，则会返回 `true`，否则会返回 `false`。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值