Element表单v-for循环校验问题

最新推荐文章于 2024-06-20 20:43:52 发布
最新推荐文章于 2024-06-20 20:43:52 发布
阅读量647 收藏 1
点赞数
文章标签： vue.js html5 typescript css3 es6
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/popping_Sun/article/details/117528813
版权

开发过程中碰到了这个问题，自己也是搜索了一番，刚开始跟着网上的答案进行了一番操作没有实现，后来在一条答案中发现官方上就有，去ElementUi官网看了一下，跟着官网试了一下，立马实现。为了解决这个问题还到gitHub上的issues搜过，没想到官网就有相关例子，真是踏破铁鞋无觅处，得来全不费工夫。在此记录总结一下，不要再重蹈覆辙，浪费时间。相关详情可以移步到官网

Elemnt

要想实现效果，最主要的是prop一定要跟官网上一样，而且prop要写成:prop，因为是动态加载

一定要注意v-model与prop字段保持一致，这样就能实现了。

 

popping_Sun
关注
处理elementUI的的v-for生成多个el-form-item如何绑定动态prop
MSITC的博客
09-01 1513
【代码】处理elementUI的的v-for生成多个el-form-item如何绑定动态prop。
Vue使用Element-plus表单v-for校验规则问题
LittleLogan的博客
12-31 2181
Vue使用Element-plus表单v-for循环校验规则
v-for动态数据循环表单验证
weixin_43400431的博客
08-03 404
v-for动态数据循环表单验证， prop为动态验证 每一项都要加上 :rules="rules.docName"
ElementUi 使用 el-select 表单 el-option v-for 循环使用数字值 验证你不通过的注意事项
热门推荐
05-16 1万+
说真的 ELEMENT-UI真的时很强大的 UI库 但是使用的时候 验证的部分的坑还是挺多的, 官方文档 说的又不详细 我遇到的这个问题 希望能够帮助大家 一,首先要保证 model 使用的对象 和你需要验证的对象 的关联关系 二,其次要保证 rules 的属性 和你想要验证的 prop 也是父子关系 三 如果你的你的选择框时 v-for 循环 并且使用数字型ID 你要保...
vue 动态循环出的多个select 不能重复选择相同的数据（转）
qq_43526066的博客
06-19 6386
转自执着慕晚的流年 <template> <div class="program" v-for="(items,index) in parArr" :key="items.guid"> <Select v-model="parItem.id" @on-change="onChangeProgram"> <Option v-for=...
表单校验使用forEach提交表单时如何终止循环，解决element消息提示重叠
Winsom1的博客
06-24 562
1.使用try{ //forEach循环体 }catch(error){}，循环体中使用throw new Error('end') // 终止循环 如下： try { this.list.forEach(item => { ..... throw new Error('end') }) } catch(err) { console.log('err',err) } // 实例 confirm() { try { this.quest
vue使用Element组件时v-for循环里的表单项验证方法
08-27
主要讲解了如何在使用 Element 组件时处理 v-for 循环里的表单项验证问题。 首先，Element 组件提供了一套完善的表单验证方法，官方文档中也详细介绍了相关 API。正常情况下，我们可以按照官方文档添加规则，需要...
Vue3、Element Plus使用v-for循环el-form表单进行校验
m0_67584973的博客
06-13 3130
在开发中遇到了这样一个需求有一个form是通过v-for生成出来的，并且数量不确定，每个表单中的字段都需要做校验，就将自己的解决方法记录了下来。
ElementUI Form表单里使用 v-for循环创建表单元素校验
a123456234的博客
06-20 2019
Form表单里的使用 v-for循环创建的表单元素校验
vue+Element项目中v-for循环+表单验证
TianXuab的博客
07-25 2380
如果在Form 表单里有通过v-for动态生成，如何设置验证呢？
element ui 中，数组v-for渲染表格时，使用index作为prop的属性值时，index失效
weixin_63584316的博客
11-02 334
最后发现index要转一下数据类型，转成。
关于element ui表单组件在vue的v-for循环的校验规则以及prop的设置
Nancy的博客
04-15 3838
关于element ui表单组件在vue的v-for循环的校验规则以及prop的设置，
vue中使用element-ui的表单验证功能prop属性
weixin_42333361的博客
02-09 5172
1.在标签中绑定 :rules=“方法名称”,然后在 data 里写规则 2.2.在标签绑定 prop=“规则名” <template> <!-- 登陆表单区域 --> <el-form :model="loginForm" :rules="loginFormRules"> <!-- 用户名 --> <el-form-item prop="username">..
el-form中数组(一重数组、二重数组以及多重数组)绑定检验的实例（prop以及rules的赋值）
都已经是第二年的立春、又何必执着于、当年的盛​夏呢？
02-12 6224
prop的绑定就有上文提到的这两种方式，因此不管是几重数组都是可以的（当然没有试过三重四重数组， 应该是可以的，当然项目中应该不会出现这种情况）
elementUI中表单验证el-form-item嵌套包含多个prop
細水、長流√的专栏
05-20 6624
在element-ui的el-form中，如果要重置一个表单的话，可以用resetFields方法，先看下面的例子： <template> <div> <el-form :inline="true" :model="formInline" class="demo-form-inline " ref="form"> <el-form-item label="输入姓名" prop='name'> <
el-form嵌套多重循环的表单验证
大哼的小世界
11-25 870
<el-form :model="saveParams" :rules="rules" ref="ruleFormRef"> <el-form-item label="任务时间" label-width="100px" prop="endTime"> <el-date-picker :disabled="isDisabled" :picker-options="taskS.
Element通过v-for循环渲染的form表单校验
m0_70547044的博客
06-12 838
如图：v-for 循坏的el-form-item，区分他们的是index，domain是一个数组对象，每个el-form-item 中绑定的值是每一项的value，设置每个prop为图中标识的那样，从而实现校验。官网中通过字符串拼接的方式添加prop，看着稍稍比较繁琐，可以通过ES6中的模版字符串替换。通过v-for 遍历循环渲染的form表单怎么添加校验呢？，诶，动态增减，好像和我的需求差不多呢，也有校验，点开看看。再次阅读官方文档，发现这样一个行字，v-for 循坏的表单校验。
el-form表单点击添加一样的表单内容并且校验
请叫我欧皇！的博客
06-09 559
需求:el-form表单有初始的样式，之后点击添加按钮后，出现相同的样式，但是内容是不影响的，并且新添加的样式也会有表单校验。代码我直接全部贴了，需要直接复制粘贴就行，代码量不大，挺好实现的。这样就实现啦，是不是很简单，文章到此结束，希望对你有所帮助~提交后得到的数据结构如下图，根据后端所需结构传入。点击添加姓名年龄，并且不输入点击提交后如下图。如果后端需要的数据对象结构，如下这样写就行了。
el-form v-for循环列表的表单如何校验
weixin_44443380的博客
03-11 4163
prop 属性动态绑定 :prop="'overridePolicy.' + policyIndex + '.overriders.' + overridersIndex + '.operType。1、普通的表单校验直接在最外层 :model="数据" :rules="规则" ，再在层设置prop值与model里数据定义的key保持一致即可。则：:model="formData"，:prop="overriders.${
vue3 v-for动态表单校验
最新发布
01-10
### Vue3 中 `v-for` 动态表单校验 在 Vue3 和 Element Plus 结合使用的场景下，对于通过 `v-for` 循环生成的动态表单项进行校验，可以采用特定的方式设置 `el-form-item` 的属性来确保每一项都能被正确地验证。 #### 设置 `el-form-item` 属性 为了使每一个由 `v-for` 创建出来的子表单项能够参与整体表单的校验逻辑，在创建这些项目时需指定唯一的 `prop` 属性。这可以通过拼接字符串的方式来完成，例如： ```html <template> <el-form :model="dynamicForm" ref="ruleFormRef"> <div v-for="(item, index) in dynamicForm.items" :key="index"> <!-- 使用索引来构建唯一路径 --> <el-form-item :label="&#39;Item &#39; + (index + 1)" :prop="&#39;items.&#39; + index + &#39;.value&#39;" :rules="formRules.itemValueRule"> <el-input v-model="item.value"></el-input> </el-form-item> </div> </el-form> </template> ``` 上述代码片段展示了如何利用模板语法中的表达式为每个迭代元素分配独特的 `prop` 值[^2]。这样做不仅使得各个字段可以在整个表单上下文中得到识别，同时也允许针对它们应用具体的校验规则。 #### 定义校验规则 接着定义适用于所有重复项目的公共校验规则对象，并将其应用于相应的 `el-form-item` 上： ```javascript <script setup> import { reactive } from "vue"; const ruleFormRef = ref(null); // 表单模型数据结构 let dynamicForm = reactive({ items: [ { value: &#39;&#39; }, // 更多初始条目... ] }); // 校验规则配置 const formRules = { itemValueRule: [{ required: true, message: &#39;请输入内容&#39;, trigger: &#39;blur&#39; }] }; </script> ``` 这段脚本初始化了一个包含多个可编辑域的数据列表，并指定了一个简单的必填项校验条件给所有的输入框。 #### 提交并触发校验 当准备提交表单时，可通过调用 `$refs.ruleFormRef.validate()` 方法来进行完整的表单有效性检查。如果只想单独检验某个特定部分，则应使用 `validateField(field)` 函数传递目标字段名称作为参数[^3]。 ```javascript async function submitForm() { await ruleFormRef.value.validate((valid) => { if (!valid) return; console.log(&#39;Submit!&#39;); }); } ``` 以上就是基于 Vue3 和 Element Plus 对于动态生成的表单执行全面或局部校验的一种有效方式[^4]。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值