vue循环遍历出来的表单输入框 如何做校验?

本文讨论了在Vue.js中如何针对通过循环遍历生成的表单输入框进行个体校验。当参数类型数量不同时,如何动态展示并确保每个value输入框的验证功能。关键代码和实现效果展示了一个智能的排序和显示机制,确保在paramsInfo只有一个元素时不显示序号,超过一个时则按顺序呈现。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

需求:当有多个参数类型时候,便利显示,并且value的输入框能各自校验。
1、表单代码:

<el-form-item 
	label="参数类型:" 
	label-width="150px">
	
	<div v-for="(item,index) in form.paramsInfo" :key="index">
		<el-form-item 
			label="value" 
			:prop="`paramsInfo.${index}.value`" 
			:rules="checkStripe"
			label-width="90px"
			label-position="left">
			<el-input v-model="item.value" clearable></el-input>
		</el-form-item>
		
		<el-form-item 
			:label="form.paramsInfo.length>1?`名称 ${index+1} `:`名称 ` " 
			label-width="90px">
			<el-input v-model="item.name"></el-input>
		</el-form-item>
	</div>
	
</el-form-item>

2、数据源

export default {
	data() {
		return {
			form:{
				paramsInfo:[
					{
						value: 0,
						name: '实参'
					}
					{
						value: 1,
						name: '形参'
					}
				]
			}
			// value输入框的校验
			checkStripe:[
				{ required: true, message: '请输入value', trigger: 'blur' },
			],
		}
	}
}

此需求的关键代码:

:prop="`paramsInfo.${index}.value`" // props不唯一化
:rules="checkStripe" // 校验规则

3、实现效果:

当paramsInfo只有一条数据的时候就不显示 名称1 / 名称2 中的1/2数字,
当大于1时候才依次排序
在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值