element-plus校验单个form对象合法性

在 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} 个对象验证通过`);
      }
  });
}

1. 使用 v-for 循环来生成表单列表，每个表单项都有一个 el-form-item。
2. 使用 :prop 动态绑定每个表单项的验证路径。
3. 使用 :rules 动态绑定每个表单项的验证规则。
4. 定义了一个 validateSingleItem 方法来调用 el-form 的 validate 方法，并传入验证路径 items.${index}，这将验证指定索引的对象是否满足必填条件。

请注意，这个示例假设使用的是 Element Plus 作为 UI 库。如果使用的是其他 UI 库，可能需要调整代码以适应该库的 API。此外，这个示例验证了列表中第一个对象，如果你需要验证其他对象，你可以修改 validateSingleItem 方法调用时传递的索引。