el-form多表单同步提交校验

问题描述

在开发公司的管理系统时，页面存在多个互不关联的表单，需点击提交按钮后 全部校验通过才执行提交逻辑

解决方案

1、每个表单分配唯一 ref
2、每个表单绑定独立的 v-model 和校验规则 rules
3、提交时通过 this.$refs[refName].validate() 获取每个表单的校验结果，用 Promise.all 统一处理。

完成以上设置就可以实现需求了。

<template>
  <div class="multi-form">
    <!-- 表单1：用户信息 -->
    <el-form 
      ref="formUser" 
      :model="userForm" 
      :rules="userRules" 
      label-width="100px"
      class="form-item"
    >
      <el-form-item label="用户名" prop="username">
        <el-input v-model="userForm.username"></el-input>
      </el-form-item>
    </el-form>

    <!-- 表单2：地址信息 -->
    <el-form 
      ref="formAddress" 
      :model="addressForm" 
      :rules="addressRules" 
      label-width="100px"
      class="form-item"
    >
      <el-form-item label="省份" prop="province">
        <el-input v-model="addressForm.province"></el-input>
      </el-form-item>
    </el-form>

    <el-button type="primary" @click="submitAllForms">提交全部表单</el-button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 表单1
      userForm: {},
      // 表单1
      userRules: {},
      // 表单2
      addressForm: {},
      // 表单2：校验规则
      addressRules: {}
    }
  },
  methods: {
    // 提交全部表单（核心方法）
    submitAllForms() {
      // 收集所有表单的校验Promise
      const validatePromises = [
        this.$refs.formUser.validate(), // 表单1校验
        this.$refs.formAddress.validate() // 表单2校验
      ];

      // 统一处理所有表单校验结果
      Promise.all(validatePromises)
        .then((results) => {
          // results 是数组，每个元素为对应表单的校验结果（true/false）
          const allPass = results.every(res => res);
          if (allPass) {
            // 所有表单校验通过，执行提交逻辑（如接口请求）
            console.log('全部表单校验通过，提交数据：', {
              user: this.userForm,
              address: this.addressForm
            });
            // 这里可添加 resetFields() 重置表单
            // this.$refs.formUser.resetFields();
            // this.$refs.formAddress.resetFields();
          }
        })
        .catch((err) => {
          // 若有表单校验失败，Element UI 会自动提示错误，此处可补充异常处理
          console.log('表单校验失败：', err);
        });
    }
  }
};
</script>