表单循环验证

vue表单循环验证

普通的表单验证很简单，但当表单数据可增加，可删除，表单数据为一个数组时，普通的表单验证就会失效。此篇文章介绍的解决方法亲测有效

循环表单验证代码

页面模板部分：

 <Form
    ref="ruleForm"
    :model="ruleForm"
    :rules="ruleValidate"
    label-position="right"
    :label-width="100"
>	
    <div
      v-for="(item, index) in ruleForm.list"
      :key="index"
    >
    	<FormItem label="姓名" :prop="'list.'+index +'.name'" :rule="ruleValidate.name">
      		<Input v-model="item.name"/>
		</FormItem>
		<FormItem label="姓名" :prop="'list.'+index +'.age'" :rule="ruleValidate.age">
      		<Inmput v-model="item.age"/>
		</FormItem>
   	</div>
</Form>
          

数据部分：

export default{
	data(){
		return {
			ruleForm{
				job: "",
				list: [
					{
						name: "",
						age: "",
					},
					{
						name: "",
						age: "",
					}
				]
			},
			ruleValidate:{
				name: [{ required: true, message: "姓名为必填项", trigger: "blur" }],
				age: [{ required: true, message: "年龄为必填项", trigger: "blur" }]
			}
		}
	}
}

关键部分

每一个FormItem都要包含rules验证属性，prop要以这种形式命名