【vue+elementui】v-for循环生成的表单项、动态生成的表单项的校验

最新推荐文章于 2023-03-17 16:50:31 发布
最新推荐文章于 2023-03-17 16:50:31 发布
阅读量3.3k 收藏 4
点赞数 2
分类专栏： elementUI vue 文章标签： vue elementui 表单验证 v-for验证 动态表单
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/it429/article/details/112849057
版权
本文探讨了在Vue和ElementUI中，如何使用v-for循环和动态生成的表单项进行有效的表单验证。通过利用:prop属性，解决了prop不确定导致的验证问题，确保了动态表单的正确校验。
摘要由CSDN通过智能技术生成

v-for循环生成的表单项、动态生成的表单项都有个特性，就是prop不确定，没有prop的话我们就无法像普通表单验证那样校验，所以我们要用:prop来校验。

语法：

:prop="`v-for绑定的数组.${v-for的索引}.v-model绑定的变量`"

示例如下：

<el-form :model="organForm" ref="organForm"
最低0.47元/天 解锁文章
小花花inhere
关注
专栏目录
Vue组件中通过v-for循环动态生成form表单进行表单校验
二三的博客
11-03 8908
在做项目时，需要根据需要动态添加或新增表单，同时还需要对表单做校验。详情如下图： 刚开始做表单验证的时候，对于这个动态的表单验证有点难搞，试了好几种方法都没有搞定。最后按照下面这种方法实现了，以此篇博客留作记录，方便下次遇到类似的需求时直接开发。 <a-form :model="warnData" ref="warnDataRef" :rules="rules" :label-col="labelCol"> <div class="title"> <strong&
vue使用Element组件时v-for循环里的表单项验证方法
08-27
主要介绍了vue使用Element组件时v-for循环里的表单项验证方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
关于vue的UI框架Element，多层嵌套v-for循环下的表单验证
qq_26642611的博客
11-03 1691
以下为一层嵌套 <el-form-item v-for="(item,itemIndex) in form.button" :key="item.itemIndex" label="一级菜单" > <el-form-item :prop="'button.'+ itemIndex + '.name'" :rules="rules.inputTxt"> <el-input v-model="item.name" style="
vue+ele 实现v-for动态数据循环表单，然后对每个结构进行表单校验的方法
weixin_39277183的博客
08-08 3192
vue+ele 实现v-for动态数据循环表单，然后对每个结构进行表单校验的方法 项目开发时遇到form结构是动态遍历出来的，但是每个遍历出来的表单都需要做相对应的检验处理，ele提供的办法只能对单个表单有效，mou度很多方法都试了，但是都没有说出重点和要注意的地方！！！ 下面贴出我实现的代码： <el-form label-width="200px" class="dlrMode" ref="addInfo" :rules="DLRRules" :model="add
vue3 Element通过v-for循环渲染的form表单验证
山海也有意难平
11-01 3731
在我们的业务开发中，有时候会经常遇到动态v-for循环渲染出el-form-item，那么这些动态生成的el-form-item如何来进行表单验证 <el-form :model="accountFormDatas" :inline="true" ref="accountFormRef" label-width="120px" :rules="rulesTwo"> <div> <el-form-item label="RFID">
Vue动态生成form表单+校验
qq_25757181的博客
04-08 1万+
Vue动态生成form表单+校验
基于Vue+elementUI实现动态表单的校验功能(根据条件动态切换校验格式)
10-17
- 使用v-for指令动态生成el-form-item和el-input组件，并为每个el-form-item赋予一个prop属性，这是因为elementUI需要该属性来追踪校验的字段。 - 对于校验规则，采用了一个名为inputRules的对象来集中管理不同类型...
vue.js+ElementUI实现进度条提示密码强度效果
10-15
在HTML模板中，我们将使用ElementUI的表单组件`<el-form>`，并将定义好的规则`rules`绑定到密码表单项`<el-form-item>`上。密码强度的进度条通过`<el-progress>`组件动态展示，并通过`v-model`与`passwordPercent`...
vue elementui 实现搜索栏公共组件封装的实例代码
10-15
在本文的代码示例中，`searchForm.vue`作为搜索栏表单组件，它会接受一个配置项数组，并循环遍历来渲染具体的表单项。每个表单项使用`formItem`组件进行封装，`formItem`组件根据传入的配置项来决定渲染什么类型的表...
Vue+Element实现动态生成新表单并添加验证功能
12-29
首先有一个这样的需求，表单中默认有一个联系人信息，用户可以再添加新的联系人信息 点击添加更多联系人之后 官方文档中有写用v-for来实现新增表单，但是那是单表单的新增，现在多表单的新增，可以考虑的实现方法是先写死一个必须的表单，需要新增的两个表单放在一个div里，在div中使用v-for生成，达到同时新增的效果 代码如下 //必填一个联系人的表单 <el class=rules label=通知对象: prop=notifyobject> &lt;el-input v-model=ruleForm.notifyobject placeholder
Vue ElementUi动态表单(多个表单) 的校验及提交
热门推荐
weixin_34268843的博客
06-06 1万+
恳求sf的管理大大，不让驳回我的文章了，我是把文章的好多注释直接写到代码里边了，并不是文章太短 前言 有这么一个需求，根据登录用户的权限，页面上会动态显示几个表单,是的，独立的几个表单(就是有这样的需求)。这些动态的表单呢，样式都一样，都需要做校验，并且提交的时候，只能提交有权限且验证通过的表单线上demo:http://an888.ne...
vue v-for循环渲染动态ref表单校验的实现技巧
朝阳39的博客
03-10 1162
v-for循环渲染动态ref <div v-for="(item, index) in fundList" :key="index"> <el-form :ref="'RefForm' + index" :model="formData" label-width="100px" size="mini" > </el-form> </div> 要点 :ref="'RefForm' + index" 动态ref.
vue表单 循环生成校验， 自定义校验规则，手动触发某条校验规则
shaoliao_qian的博客
09-03 7006
普通校验（具体直接看前端框架的官方文档就好了） formRules: { name: [ { required: true, message: '请输入名称', trigger: 'blur' } ] }, 循环生成的form-item要校验 直接写在iten上面 <Form-item :label="'选项' + (index + 1)" v-for="(item,index) in dataForm.option" :rules="[{ required: true,me.
Element通过v-for循环渲染的form表单校验
前端踩坑之路
03-15 1万+
普通的form表单校验 日常业务开发中，对于中后台管理系统，form表单校验是一个很常见的问题。 查阅Element官方文档，我们了解到，form表单校验是这样的，需要给所校验的el-form-item添加prop属性值，这个属性值便就是当前元素v-model 所绑定的值。如图所示： v-for 循坏的表单校验 那么问题来了，通过v-for 遍历循环渲染的form表单怎么添加校验呢？主要问题就在...
【vue】基于ElementUI实现动态表格
coralime的博客
07-30 1万+
【代码背景】 有这样一个业务需求场景，有大概十几张表归属于某个类别，用户希望在同一个页面，通过选择不同的查询指标展示不同的表格，这些表的表头样式类似但是又不完全相同，怎么做呢？ 到目前为止所有基于Element UI的表格样式都是直接在页面写死的，像官方这样： <el-table :data="tableData" style="width: 100%"> <el-table-column prop="date" label="日期" wid...
v-for循环绑定
SanOrintea的博客
02-11 588
//绑到dataform.use1、dataform.use2、dataform.use3…… <div v-for="(item,index) in ['一','二','三','四','五','六']" v-bind:key="index"> <el-checkbox v-model="dataform[`use${index+1}`]">使用{{item}}号分区</el-checkbox> </div> ...
【vue】element-ui、el-table使用V-for循环动态添加表头和数据
蓝胖子的博客
03-17 1万+
【vue】element-ui、el-table使用V-for循环动态添加表头和数据
vue 动态添加 多项目 表单_使用Vue生成动态表单
weixin_39685836的博客
12-19 1070
开需求会了，产品说这次需求的表单比较多，目前有18个，后期的表单可能会有增加、修改。我作为这次的前端开发，看到这样的需求，心里知道要这样搞不得把自己累死，首先表单居多，还会有变更，以后维护起来也让人心力憔悴。于是我提议做动态表单，做一个表单的配置系统，在系统里配置表单类型、表单得字段、以及对表单得管理。后来重新评审了需求，系统部分由后端自行开发，我要处理的部分是动态生成表单，展现提交的表单，以及对...
vue3 el-form使用validate事件效验表单项是否为空
最新发布
09-15
在Vue 3中使用`<el-form>`组件进行表单验证时，可以通过`validate`方法来校验表单项是否为空。下面是一个示例代码，演示了如何在表单提交时验证所有表单项： ```javascript <el-form ref="formRef" :model=...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值