Vue3 element ui 中多个form表单使用同一个表单必填校验规则

多个表单使用同一个校验规则 ，点击按钮的时候一起校验

• 在vue页面中有多个form对象，且绑定了多个数据对象，使用的同一个必填校验规格；html文件如下：

<template>
  <!--第一个form对象，:model="formData"绑定的数据  :rules="rules"定义的规则-->
  <el-form :model="formData" :rules="rules" ref="form">
    <el-form-item label="用户名" prop="username">
      <el-input v-model="formData.username"></el-input>
    </el-form-item>
    <el-form-item label="密码" prop="password">
      <el-input type="password" v-model="formData.password"></el-input>
    </el-form-item>
  </el-form>
 
  <!--第二个form对象，:model="formData"绑定的数据  :rules="rules"定义的规则-->
  <el-form :model="formData2" :rules="rules" ref="form2">
    <el-form-item label="邮箱" prop="email">
      <el-input v-model="formData2.email"></el-input>
    </el-form-item>
  </el-form>
 
  <el-button @click="submitForm">提交</el-button>
</template>
 

• 在JS中进行校验，点击按钮同时校验两个或者多个form对象中的必填，且同时通过后才能执行后续操作，代码如下： 

<script setup>
import { reactive, ref } from 'vue';
 
//定义的数据变量对象，存储的数据
const formData = reactive({
  username: '',
  password: '',
  email: ''
});
 //此处省略简单使用赋值的同一个，如有不同自行定义
const formData2 = formData;
 
// 定义表单校验必填的规则
const rules = {
  username: [
    { required: true, message: '请输入用户名', trigger: 'blur' }
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { min: 6, max: 12, message: '密码长度在 6 到 12 个字符', trigger: 'blur' }
  ],
  email: [
    { required: true, message: '请输入邮箱', trigger: 'blur' },
    { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
  ]
};
 
// 必填校验使用的变量
const form = ref(null);
const form2 = ref(null);
 
// 点击按钮触发的事件
const submitForm = () => {
  
 //这里使用Promise.all来回调函数进行监听，成功通过校验的在then中进行逻辑校验 ，失败则打印和提示错误
  Promise.all([form.value.validate(), form2.value.validate()]).then(() => {
    //必填校验成功
    console.log('两个表单验证通过，可以提交数据:', formData);
    // 这里执行你的提交操作
  }).catch((error) => {
    // 必填校验失败
    if (error.error) {
      console.error('验证失败', error.error);
    }
  });
};
</script>

• 运行结果