vue form表单数组、嵌套对象数组校验

1、当表单数据为数组时

<template>
  <el-form :model="ruleList" ref="formRef">
    <div v-for="(item, index) in ruleList" :key="index">
      <el-form-item
        label="姓名"
        :prop="`${index}.name`"
        :rules="[{ required: true, message: '姓名不能为空', trigger: 'blur' }]"
      >
        <el-input v-model="item.name" placeholder="请输入姓名" />
      </el-form-item>
    </div>

    <el-button type="primary" @click="submitForm">提交</el-button>
  </el-form>
</template>
<script setup>
import { ref } from "vue";

const ruleList = ref([
  {
    name: "",
  },
]);

const formRef = ref();

// 提交表单方法
const submitForm = () => {
  formRef.value.validate((valid) => {
    if (valid) {
      console.log("校验通过，提交数据:", ruleList.value);
      alert("提交成功！");
    } else {
      console.log("校验失败");
      alert("请填写所有必填项！");
    }
  });
};
</script>

2、当表单数据包含嵌套对象数组时

<template>
  <el-form :model="ruleList" ref="formRef">
    <el-form-item
      label="姓名"
      :prop="name"
      :rules="[{ required: true, message: '姓名不能为空', trigger: 'blur' }]"
    >
      <el-input v-model="ruleList.name" placeholder="请输入姓名" />
    </el-form-item>
    <div v-for="(item, index) in ruleList.message">
      <el-form-item
        label="科目"
        :prop="`message.${index}.subject`"
        :rules="[{ required: true, message: '科目不能为空', trigger: 'blur' }]"
      >
        <el-input v-model="item.subject" placeholder="请输入科目" />
      </el-form-item>
    </div>

    <el-button type="primary" @click="submitForm">提交</el-button>
  </el-form>
</template>

<script setup>
import { ref } from "vue";

const ruleList = ref([
  {
    name: "",
    message: [
      {
        subject: "",
        grade: "",
      },
    ],
  },
]);

const formRef = ref();

// 提交表单方法
const submitForm = () => {
  formRef.value.validate((valid) => {
    if (valid) {
      console.log("校验通过，提交数据:", ruleList.value);
      alert("提交成功！");
    } else {
      console.log("校验失败");
      alert("请填写所有必填项！");
    }
  });
};
</script>