vue3中动态添加form表单校验

<template>
  <div>
    <div v-for="(formData, index) in forms" :key="index">
      <u-form :model="formData" :rules="rules" ref="formRefs">
        <u-form-item label="用户名" prop="username">
          <u-input v-model="formData.username"></u-input>
        </u-form-item>
        <u-form-item label="密码" prop="password">
          <u-input type="password" v-model="formData.password"></u-input>
        </u-form-item>
      </u-form>
    </div>
    <u-button @click="submitForm()">提交</u-button>
  </div>
</template>

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

const forms = reactive([
  { username: "", password: "" },
  { username: "", password: "" },
  // 可以根据需要添加更多的表单数据
]);

const formRefs = ref([]);

const rules = {
  username: [{ required: true, message: "请输入用户名", trigger: "blur" }],
  password: [{ required: true, message: "请输入密码", trigger: "blur" }],
};

const submitForm = () => {
  if (formRefs.value?.length) {
    Promise.all(formRefs.value?.map((ref) => ref.validate()))
      .then((results) => {
        console.log("验证结果", results);
        if (results.some((res) => !res)) {
          uni.$u.toast("请正确填写必填项!");
        } else {
          console.log("校验通过")
        }
      })
      .catch((errors) => {
        uni.$u.toast("请正确填写必填项!");
      });
  }
};
</script>