在 Vue 中,循环生成的表单列表,并且每个表单中包含多个对象,使用 v-for 来创建这些表单,并且使用动态 prop 路径来验证单个对象是否满足必填校验。
<template><el-form ref="formRef" :model="form" :rules="rules"><div v-for="(item, index) in form.items" :key="index"><el-form-item :prop="`items.${index}.name`" :rules="[{ required: true, message: '名称不能为空', trigger: 'blur' }]"><el-input v-model="item.name" placeholder="请输入名称"></el-input></el-form-item><el-form-item :prop="`items.${index}.email`" :rules="[{ required: true, message: '邮箱不能为空', trigger: 'blur' }]"><el-input v-model="item.email" placeholder="请输入邮箱"></el-input></el-form-item><!-- 更多的表单项 --></div><el-button @click="validateSingleItem(0)">验证第一个对象</el-button></el-form>
</template><script setup>
import { reactive, ref } from 'vue';
import { ElForm, ElFormItem, ElInput, ElButton } from 'element-plus';const formRef = ref(null);
const form = reactive({items: [{ name: '', email: '' },{ name: '', email: '' },// ...更多对象]
});const rules = {items: form.items.map((_, index) => ({name: [{ required: true, message: '名称不能为空', trigger: 'blur' }],email: [{ required: true, message: '邮箱不能为空', trigger: 'blur' }]}))
};//该方法,需要将items上所有对象都校验通过,valid才能为true;
function validateSingleItem(index) => {formRef.value.validate((valid) => {if (valid) {console.log(`第 ${index} 个对象验证通过`);} else {console.log(`第 ${index} 个对象验证失败`);}}, `items.${index}`); // 验证指定索引的对象
};
</script>
//上述validateSingleItem(): 该方法,需要将items上所有对象都校验通过,valid才能为true;特此优化
//优化方法如下:该方法,只会校核当前的数组下标值的合法性;
function validateSingleItem(index) {const validate = (path) => {return new Promise((resolve) => {formRef.value.validateField(path, (errMessage) => {resolve(errMessage);});});};// 校验当前的for循环中的一项Promise.all([validate(`items.${index}.name`),validate(`items.${index}.email`),]).then((results) => {if (results.some((errMessage) => errMessage)) {console.log(`第 ${index} 个对象验证失败`);} else {console.log(`第 ${index} 个对象验证通过`);}});
}
- 使用 v-for 循环来生成表单列表,每个表单项都有一个 el-form-item。
- 使用 :prop 动态绑定每个表单项的验证路径。
- 使用 :rules 动态绑定每个表单项的验证规则。
- 定义了一个 validateSingleItem 方法来调用 el-form 的 validate 方法,并传入验证路径 items.${index},这将验证指定索引的对象是否满足必填条件。
请注意,这个示例假设使用的是 Element Plus 作为 UI 库。如果使用的是其他 UI 库,可能需要调整代码以适应该库的 API。此外,这个示例验证了列表中第一个对象,如果你需要验证其他对象,你可以修改 validateSingleItem 方法调用时传递的索引。