vue3多个表单一起校验

当定义了多个表单但是保存时需要同时校验的时候可以这样做

<template>
   <el-form :model="userForm1" 
     label-width="auto"
     ref="userFormRef1">
   </el-form>
   <el-form :model="userForm2" 
     label-width="auto" 
     ref="userFormRef2">
   </el-form>
   <el-button type="primary" @click="handleSave"> 保存 </el-button>
<template>

<script setup lang="ts">
  import type { FormInstance } from "element-plus";
  const userFormRef1 = ref<FormInstance>();
  const userFormRef2 = ref<FormInstance>();

  const handleSave = async () => {
     const refForm1 = async () => {
       if (!userFormRef1 .value) return;
       return await userFormRef.value?.validate((valid: any, fields) => {
         if (valid) {
         } else {
           return false;
         }
       });    
     };
    const refForm2 = async () => {
      if (!userFormRef1 .value) return;
      return await organizationFormRef.value?.validate((valid: any, fields) => {
       if (valid) {
       } else {
         return false;
       }
      });
    };

    const formRes = await Promise.all([refForm1 (), refForm2 ()]);
    if (formRes[0] == true && formRes[1] == true) {

      console.log('校验成功')

    } else {
      console.log('校验失败')
    }

  };
</script>