JavaScript阻止表单提交代码失效，可能原因有哪些？

兄弟，你的代码里藏着一个致命问题，直接导致阻止表单提交的逻辑完全失效了，我给你拆解清楚：

核心问题：手动触发了不受控制的原生提交 #

你看这段代码：

event.preventDefault(); 
$('#signUpForm').unbind().submit(); 

你刚用event.preventDefault()阻止了表单的默认提交行为，紧接着就调用unbind()移除了表单上所有的submit事件绑定，然后又调用submit()——这时候触发的是表单原生的提交行为，完全绕过了你刚才写的阻止逻辑，所以前面的preventDefault()相当于白做了。

其他潜在问题 #

• 你最后写的return false根本没机会发挥作用，因为在调用$('#signUpForm').unbind().submit()之后，代码的执行流程已经被打断，原生提交已经触发了。
• 如果你是想先验证表单再提交，这种写法完全搞反了逻辑顺序。

正确的写法示例 #

如果你的需求是验证通过再提交，不通过就阻止，可以这么写：

$('#signUpForm').submit(function (event) {
  debugger;
  console.log('test');
  
  // 先执行你的验证逻辑
  const formIsValid = IsValid(); // 假设IsValid()返回true/false
  
  if (!formIsValid) {
    // 验证不通过，阻止提交
    event.preventDefault();
    // 这里可以加用户提示，比如 alert('请填写正确的信息')
    return false;
  }
  
  // 验证通过的话，不需要额外操作，表单会自动提交
});

如果你的需求是先阻止默认提交，处理完逻辑后再手动提交，可以这么写（注意用原生DOM元素的submit方法，避免再次触发绑定的事件）：

$('#signUpForm').submit(function (event) {
  debugger;
  console.log('test');
  
  // 先阻止默认提交
  event.preventDefault();
  
  // 执行你的业务逻辑（比如异步请求、数据处理）
  if (IsValid()) {
    // 验证通过，触发原生提交（this是原生表单元素）
    this.submit();
  } else {
    console.log('表单验证失败，请检查输入');
  }
});

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