表单验证通过后如何防止表单多次提交？

数据老陈

2026-7-10

解决表单重复提交问题

你的核心问题是：表单验证通过后，用户多次点击提交按钮会导致重复录入数据。现有代码的问题在于一开始就禁用按钮，但验证不通过时没有恢复状态，也没正确控制表单提交时机。

修正后的实现方案

HTML（补充必要输入框）

<form class="info" method="post" id="form1">
  <input type="email" class="email" placeholder="请输入邮箱">
  <input type="tel" class="phone" placeholder="请输入手机号">
  <input type="text" id="data" placeholder="请输入内容">
  <input class="submitBtn" type="submit" value="提交">
</form>

JavaScript 代码

$(function() {
  $('.submitBtn').on('click', function(e) {
    // 先阻止表单默认提交行为，手动控制提交流程
    e.preventDefault();
    const $submitBtn = $(this);

    // 如果按钮已经禁用，直接返回，避免重复触发
    if ($submitBtn.prop('disabled')) return;

    let isValid = true;
    // 遍历验证必填字段
    $('.email, .phone, #data').each(function() {
      const inputVal = $(this).val().trim();
      if (!inputVal) {
        isValid = false;
        // 可选：给空字段加错误样式提示用户
        $(this).addClass('input-error');
      } else {
        $(this).removeClass('input-error');
      }
    });

    if (isValid) {
      // 验证通过，禁用按钮防止重复点击
      $submitBtn.prop('disabled', true).addClass('disabled');
      // 手动提交表单
      $('#form1').submit();
    } else {
      // 验证不通过，恢复按钮可用状态
      $submitBtn.prop('disabled', false).removeClass('disabled');
      alert('请填写所有必填字段');
    }
  });
});