表单验证不放过，双剑合璧更轻松

2023-09-22 02:59:11

多表单验证：巧用Element，轻松搞定复杂表单

在网站开发中，表单无处不在，它们负责收集用户输入的信息，支持从注册、登录到提交查询和购买等各种功能。当一个页面上存在多个表单时，就需要考虑如何对这些表单进行同时验证，确保用户提交的数据有效且完整。

深入剖析Element的多表单同时验证机制

Element UI是一个功能强大的前端框架，它提供了全面的表单验证系统，可以轻松实现多种验证需求，包括对多个表单进行同时验证。

配置表单

首先，为每个表单添加一个唯一的ref属性，以便可以通过JavaScript访问该表单：

<form ref="form1">
  <!-- 表单字段和元素 -->
</form>

<form ref="form2">
  <!-- 表单字段和元素 -->
</form>

定义验证规则

接下来，定义验证规则来验证表单字段的输入是否有效。Element提供了内置的验证规则，也可以自定义规则：

const rules1 = {
  name: [
    { required: true, message: '姓名不能为空', trigger: 'blur' },
    { type: 'string', min: 2, max: 10, message: '姓名长度必须在2到10个字符之间', trigger: 'blur' }
  ],
  email: [
    { required: true, message: '邮箱不能为空', trigger: 'blur' },
    { type: 'email', message: '邮箱格式不正确', trigger: 'blur' }
  ]
};

const rules2 = {
  // 定义其他表单字段的验证规则
};

添加验证

使用form-item组件将验证规则添加到表单字段：

<el-form-item prop="name" :rules="rules1.name">
  <el-input v-model="formData1.name"></el-input>
</el-form-item>

<el-form-item prop="email" :rules="rules1.email">
  <el-input v-model="formData1.email"></el-input>
</el-form-item>

触发验证

在用户提交表单之前，需要触发验证：

document.querySelector('form[ref="form1"]').addEventListener('submit', (event) => {
  this.$refs.form1.validate((valid) => {
    if (valid) {
      // 表单验证通过，可以提交
    } else {
      // 表单验证失败，阻止提交
      event.preventDefault();
    }
  });
});