Vue 中实现多个 el-form 表单提交统一校验的两种方法

在 Vue 开发中，经常会遇到需要同时处理多个 el-form 表单提交并进行统一校验的情况。下面将为您介绍两种有效的实现方法。

方法一：使用自定义校验规则

可以创建一个全局的校验函数来处理多个表单的规则。在这个函数中，接收表单数据作为参数，并根据具体的校验逻辑进行判断。通过在每个 el-form 中引用这个全局校验函数，实现统一的校验。

例如，定义一个校验用户名是否合法的函数：

function validateUsername(username) {
  // 具体的校验逻辑，如用户名长度、字符类型等
  if (username.length < 6 || username.length > 12) {
    return '用户名长度应在 6 到 12 个字符之间';
  }
  // 其他校验条件
  return '';
}

在 el-form 中使用：

<el-form :rules="formRules">
  <!-- 表单元素 -->
  <el-input v-model="username" :rules="[validateUsername]" />
</el-form>

方法二：利用表单组管理

将多个 el-form 表单分组管理，为每个表单组设置一个唯一的标识。在校验时，通过遍历表单组，获取每个表单的相关数据进行校验。

// 定义表单组对象
const formGroups = {
  group1: {
    // 表单字段和校验规则
    username: {
      rules: [validateUsername]
    }
  },
  group2: {
    // 其他表单字段和规则
  }
};

// 提交时的校验函数
function validateAllForms() {
  for (const groupKey in formGroups) {
    const group = formGroups[groupKey];
    for (const fieldKey in group) {
      const field = group[fieldKey];
      const value = this[fieldKey];
      const rules = field.rules;
      for (const rule of rules) {
        const errorMessage = rule(value);
        if (errorMessage) {
          // 处理校验不通过的情况
          return false;
        }
      }
    }
  }
  // 校验通过
  return true;
}

通过以上两种方法，可以在 Vue 中方便地实现多个 el-form 表单提交的统一校验，提高开发效率和代码的可维护性。根据项目的具体需求和结构，选择适合的方法来确保表单数据的准确性和完整性。