告别错误信息重复提交，轻松掌握Element Form表单的正确用法

2023-07-22 18:56:07

掌握 Element Form 表单验证的艺术：前端和后端规则的双重保障

在构建复杂的 Web 应用程序时，表单扮演着至关重要的角色。它们允许用户输入数据、提供反馈，并与应用程序进行交互。Element Form 表单库为 Vue.js 提供了一系列强大的组件，用于创建功能齐全且易于使用的表单。

前端规则：浏览器端的守护者

前端规则在提交表单之前由浏览器执行。它们确保在数据发送到服务器之前满足某些要求。Element Form 提供了一组丰富的验证规则，例如：

必填： 确保表单字段不为空。
长度： 验证输入的字符长度是否在指定的范围内。
格式： 确保输入符合特定的模式，例如电子邮件或电话号码。

<el-form-item label="用户名">
  <el-input v-model="username" :rules="[{ required: true, message: '用户名不能为空' }]"></el-input>
</el-form-item>

后端规则：服务器端的验证

后端规则在服务器端执行，在数据存储在数据库之前对其进行进一步验证。它们可以处理前端规则无法覆盖的更复杂的情况。例如，服务器端规则可以：

检查唯一性： 确保输入的值在数据库中是唯一的。
执行业务逻辑： 根据应用程序的特定要求验证数据。
防止 CSRF 攻击： 保护应用程序免受跨站点请求伪造的攻击。

后端规则通常在请求处理程序或控制器中实现。

if (!unique_username($username)) {
  return response()->json(['error' => '用户名已存在'], 400);
}

防止表单重复提交：消除烦人的错误

表单重复提交可能会导致数据丢失和其他问题。Element Form 提供了防止这种情况的内置机制。

禁用提交按钮： 在提交过程中，提交按钮将被禁用，防止用户意外多次点击。
显示加载状态： 提交按钮可以显示一个加载状态，向用户指示正在处理请求。

Element Form 表单的触发方式

Element Form 表单可以通过两种方式触发验证：

blur： 当表单项失去焦点时触发。
change： 当表单项的值发生变化时触发。

默认情况下，Element Form 表单的触发方式为 blur。可以通过设置 validateOnBlur 属性来更改触发方式。

<el-form :validate-on-blur="false">
  <!-- 表单字段 -->
</el-form>

设置规则的两种方法

有两种方法可以设置 Element Form 表单的验证规则：

1. 直接在表单项上设置

<el-input v-model="username" :rules="[{ required: true, message: '用户名不能为空' }]"></el-input>

2. 通过表单对象的 rules 属性设置

const form = new Form({
  rules: {
    username: [{ required: true, message: '用户名不能为空' }]
  }
});

结论

Element Form 表单为构建灵活且可定制的表单提供了强大的工具。通过利用前端和后端规则的双重保障，可以确保用户输入数据的准确性和一致性。防止表单重复提交和灵活的触发方式进一步增强了用户体验。

常见问题解答

1. 如何自定义验证消息？

您可以通过设置 message 属性来自定义验证消息。例如：

<el-input v-model="username" :rules="[{ required: true, message: '请填写用户名' }]"></el-input>

2. 如何阻止表单提交失败后重复提交？

在提交失败后，您可以通过以下方式阻止表单重复提交：

form.resetFields();

3. 如何使用 Form 实例进行验证？

可以使用 validate 方法手动触发验证：

form.validate((valid) => {
  if (valid) {
    // 表单验证通过
  } else {
    // 表单验证失败
  }
});

4. 如何在父组件中访问子组件中的表单？

可以使用 ref 属性在父组件中访问子组件中的表单：

<template>
  <el-form ref="form">
    <!-- 表单字段 -->
  </el-form>
</template>

<script>
export default {
  mounted() {
    this.$refs.form.validate(); // 在父组件中访问子组件中的表单
  }
};
</script>

5. 如何处理异步验证？

对于需要进行异步验证的规则，可以使用 validator 属性。它接受一个函数，该函数返回一个 Promise：

rules: {
  username: [
    {
      validator: (rule, value, callback) => {
        setTimeout(() => {
          if (value === 'admin') {
            callback(new Error('用户名已存在'));
          } else {
            callback();
          }
        }, 1000);
      }
    }
  ]
}