解决el-form表单验证深度问题，v-for循环后表单验证

最新推荐文章于 2024-07-01 16:58:32 发布

黛玉葬花也葬你

最新推荐文章于 2024-07-01 16:58:32 发布

阅读量2.8k

点赞数

文章标签： vue.js elementui

本文链接：https://blog.csdn.net/weixin_48802343/article/details/124349204

版权

本文详细介绍了在Vue.js中进行深度表单验证的方法，包括如何处理嵌套对象的验证、动态循环验证以及如何设置正确的prop和rules属性。通过示例代码展示了如何在el-form组件中设置prop来匹配复杂数据结构，并动态绑定rules实现有效验证。

摘要由CSDN通过智能技术生成

el-form表单验证深度问题

首先看一下表单验证的方法

<el-form :rules="rules" :model="formData" res="form">
	<el-form-item prop="name">
		<el-input v-model="formData.name"></el-input>
	</el-form-item>
</el-form>


script
data(){
	return{
		formData:{
			name:''
		},
		rules:{
			name:{required: true, message: '请输入活动名称', trigger: 'blur'}
		}
	}
}

rules:表单验证的地方；
model:验证的值；
res:兜底验证使用，具体请看官网

这是正常的表单验证

有的时候我们的验证不止只在formData里面，它里面还有对象。。。

<el-form :rules="rules" :model="formData" res="form">
	<el-form-item prop="name">
		<el-input v-model="formData.one.name"></el-input>
	</el-form-item>
</el-form>


script
data(){
	return{
		formData:{
			one:{
				name:''
			}
		},
		rules:{
			name:{required: true, message: '请输入活动名称', trigger: 'blur'}
		}
	}
}

这样肯定是验证不到的，因为el-form 标签上面的:model只对formData中的值校验（大白话就是看看formData中的name值存不存在）

可以再 el-form-item prop="name"上面加层级例如：

<el-form :rules="rules" :model="formData" res="form">
	<el-form-item prop="one.name">
		<el-input v-model="formData.one.name"></el-input>
	</el-form-item>
</el-form>


script
data(){
	return{
		formData:{
			one:{
				name:''
			}
		},
		rules:{
			one:{
				name:{required: true, message: '请输入活动名称', trigger: 'blur'}
			}
			
		}
	}
}

这样name就可以校验了 -。- 我

v-for循环后表单验证

<el-form :rules="rules" :model="formData" res="form">
		<el-form-item v-for="(item,index) in formData.formlist" :key="index" >
			<el-input v-model="item.value"></el-input>
		</el-form-item>
</el-form>


script
data(){
	return{
		formData:{
			formlist:[{id:1,value:"name"},{id:1,value:"name"}.{id:1,value:"name"}]
		},
		rules:{
			name:{required: true, message: '请输入活动名称', trigger: 'blur'}
		}
	}
}

表单验证怎么办呢，你定义prop肯定是验证不到的，


//首先动态绑定prop => :prop
//然后再去绑定一个 :rules
//在rules中定一个formlist和yanzheng两个验证
<el-form :rules="rules" :model="formData" res="form" >
		<el-form-item v-for="(item,index) in formData.formlist" :key="index" :prop=`formlist[${index}].value` :rules="rules.yanzheng">
			<el-input v-model="item.value"></el-input>
		</el-form-item>
</el-form>


script
data(){
	return{
		formData:{
			formlist:[{id:1,value:"name"},{id:1,value:"name"}.{id:1,value:"name"}]
		},
		rules:{
			formlist:{
				value:{required: true, message: '请输入活动名称', trigger: 'blur'}
			}
			yanzheng:{required: true, message: '请输入活动名称', trigger: 'blur'}
		}
	}
}