jQuery 防止验证时的重复提交

在本文中，我们将介绍如何使用 jQuery Validate 插件防止在验证表单时的重复提交。

什么是 jQuery Validate 插件

jQuery Validate 是一个轻量级的 jQuery 插件，用于表单验证。它提供了一种简单而强大的方式来验证用户输入的数据，并提供实时反馈。

验证表单并防止重复提交

步骤 1：引入 jQuery 和 jQuery Validate 插件

首先，在页面中引入 jQuery 和 jQuery Validate 插件的库文件。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.min.js"></script>

步骤 2：创建表单

创建一个 HTML 表单，并为需要验证的字段添加相应的规则和消息。

<form id="myForm">
  <input type="text" name="name" required>
  <br>
  <input type="email" name="email" required>
  <br>
  <button type="submit">提交</button>
</form>

步骤 3：编写 JavaScript 代码

接下来，使用 JavaScript 编写代码，初始化表单验证并添加防止重复提交的逻辑。

$(document).ready(function() {
  // 初始化表单验证
  $("#myForm").validate();

  // 防止重复提交
  $("#myForm").submit(function(e) {
    // 验证表单
    if ($("#myForm").valid()) {
      // 禁用提交按钮
      $("button[type='submit']").attr("disabled", true);

      // 模拟提交过程
      setTimeout(function() {
        // 启用提交按钮
        $("button[type='submit']").attr("disabled", false);

        // 提交表单
        $("#myForm")[0].submit();
      }, 2000); // 2秒后才允许再次提交表单
    }

    e.preventDefault();
  });
});

在上面的代码中，我们使用了 $("#myForm").validate() 初始化了表单验证，并为 <form> 元素添加了 .submit() 事件。在事件处理程序中，我们首先验证表单是否有效，如果有效，则禁用提交按钮，模拟了一个延迟 2 秒的提交过程，并在延迟结束后启用提交按钮并提交表单。