Vue+iview 组件中通过v-for循环动态生成form表单进行表单校验

在做项目时,需要根据需要动态添加或新增表单,同时还需要对表单做校验。详情如下图:

刚开始做表单验证的时候,对于这个动态的表单验证有点难搞,试了好几种方法都没有搞定。最后按照下面这种方法实现了,以此篇博客留作记录,方便下次遇到类似的需求时直接开发。

XML 复制代码
			<row v-for="(item,index) in dataList">
				<i-Form :model="item" :ref="'dataList'+index" :label-width="language=='en'?140:120">
					<i-col span="10" >
						<Form-Item label="<@s.message code ="KSGL.LABLE.KAOSHIRQI"/>"  :rules="[{required: true, message: '必填'}]"A prop="ksrqs">
						<date-picker :value="item.ksrqs" @on-change="item.ksrqs=$event" format="yyyy-MM-dd" type="date" placeholder="" style="width: 200px"></date-picker>
						</Form-Item>
					</i-col>
					<i-col span="10" >
						<Form-Item label="备注1" prop="bz">
							<i-Input type="text" v-model="item.bz"></i-Input>
						</Form-Item>
					</i-col>
					<i-col span="4" >
						<i-Button size="small" type="error"	@click="handleRemove(index)"><@s.message code ='ACTION.REMOVE'/></i-Button>
					</i-col>
				</i-Form>
			</row>
javascript 复制代码
					let arr = [];
					for (var i=0;i<self.dataList.length;i++){
						let form = 'dataList' + i;
						self.$refs[form][0].validate((valid) => {
							if (valid) {
								arr.push(true);
							} else {
								arr.push(false);
							}
						});
					}
					let flag = arr.every((item) => {
						console.log('item',item)
						return item === true;
					});
					if (flag) {
						self.$Modal.confirm({
							title: i18n('MODEL.CONFIRM_TITLE'),
							content: i18n('MODEL.CONFIRM_CONTENT'),
							//loading: true,
							okText: i18n('MODEL.CONFIRM_OK_TEXT'),
							cancelText: i18n('MODEL.CONFIRM_CANCEL_TEXT'),
							onOk: function()  {

							},
							onCancel: function() {
								self.$Message.info({content:i18n('MODEL.CONFIRM_ON_CANCEL'),duration: 10,background: true,closable: true});
							}
						});
					} else {
						self.$Message.error({content:i18n('VALIDATE.FORM_ERROR'),duration: 10,background: true,closable: true});
					}
相关推荐
转转技术团队11 分钟前
多代理混战?用 PAC(Proxy Auto-Config) 优雅切换代理场景
前端·后端·面试
南囝coding12 分钟前
这几个 Vibe Coding 经验,真的建议学!
前端·后端
gnip26 分钟前
SSE技术介绍
前端·javascript
yinke小琪41 分钟前
JavaScript DOM节点操作(增删改)常用方法
前端·javascript
枣把儿1 小时前
Vercel 收购 NuxtLabs!Nuxt UI Pro 即将免费!
前端·vue.js·nuxt.js
望获linux1 小时前
【Linux基础知识系列】第四十三篇 - 基础正则表达式与 grep/sed
linux·运维·服务器·开发语言·前端·操作系统·嵌入式软件
爱编程的喵1 小时前
从XMLHttpRequest到Fetch:前端异步请求的演进之路
前端·javascript
喜欢吃豆1 小时前
深入企业内部的MCP知识(三):FastMCP工具转换(Tool Transformation)全解析:从适配到增强的工具进化指南
java·前端·人工智能·大模型·github·mcp
豆苗学前端1 小时前
手把手实现支持百万级数据量、高可用和可扩展性的穿梭框组件
前端·javascript·面试
不见_1 小时前
不想再写周报了?来看看这个吧!
前端·命令行