使用IE时表单偶发重复提交问题求助及代码说明

嘿，我帮你排查了下这个问题，结合你给出的代码，核心问题和修复方案如下：

1. 最关键的问题：submit事件未传入事件对象e #

你写的submit事件处理函数里没有声明事件参数e，导致在IE（尤其是旧版本）里e是undefined，那段阻止默认提交的代码完全没生效！这是重复提交的核心原因。

修复后的document ready代码：

$(document).ready(function() {
  // 必须传入事件参数e，兼容IE的事件模型
  $("#myForm").submit(function (e) {
    // 统一获取事件对象（兼容旧IE）
    e = e || window.event;
    // 阻止默认提交行为
    e.preventDefault ? e.preventDefault() : (e.returnValue = false);
    // 阻止事件冒泡
    e.stopImmediatePropagation ? e.stopImmediatePropagation() : (e.cancelBubble = true);
    
    // 新增：先检查表单验证是否通过
    var validator = $(this).data("validator");
    if (validator && validator.form()) {
      // 验证通过后立即禁用提交按钮，防止重复点击
      $("#submit").prop("disabled", true);
    } else {
      // 验证不通过时恢复按钮可用状态
      $("#submit").prop("disabled", false);
    }
  });
  Validatit();
});

2. 检查提交按钮的onclick属性 #

你提到按钮代码是<button id="submit" on...，如果这个按钮是type="submit"，同时onclick里又手动调用了$("#myForm").submit()，就会触发两次提交逻辑。

建议调整按钮类型并优化触发逻辑：

<button id="submit" type="button">提交</button>

然后添加按钮点击事件：

$("#submit").click(function() {
  var form = $("#myForm");
  var validator = form.data("validator");
  // 验证通过后再提交表单
  if (validator && validator.form()) {
    $(this).prop("disabled", true);
    form.submit();
  }
});

3. 避免重复绑定submit事件 #

如果Validatit()函数或者其他地方重复执行了submit事件绑定，会导致多次触发提交逻辑。可以在绑定前先解绑，确保只绑定一次：

$("#myForm").off("submit").submit(function (e) {
  // 你的处理逻辑
});

4. 额外的防重复提交兜底措施 #

在IE下，页面响应慢时用户可能多次点击按钮，除了禁用按钮，还可以给表单加一个提交状态标记：

var isSubmitting = false;
$("#myForm").submit(function (e) {
  // 如果正在提交，直接阻止
  if (isSubmitting) {
    e.preventDefault ? e.preventDefault() : (e.returnValue = false);
    return;
  }
  isSubmitting = true;
  
  // 若是异步提交，记得在请求完成后恢复状态
  // 示例：
  // $.post("/submit-url", $(this).serialize())
  //   .done(function() {})
  //   .fail(function() {
  //     $("#submit").prop("disabled", false);
  //     isSubmitting = false;
  //   });
});

内容的提问来源于stack exchange，提问作者NoviceDeveloper