为何调用preventDefault()后表单仍会提交？

问题根源 #

你的代码存在三个核心错误，导致preventDefault()完全起不了作用：

1. 事件对象误用：forEach的第二个参数是遍历的索引（数字类型），不是事件对象，你拿索引调用preventDefault()不仅无效，还会抛出错误。
2. 未绑定提交事件：当前代码只是页面加载时遍历一次表单元素，根本没监听表单的提交动作，自然无法阻止默认提交行为。
3. 空值判断错误：直接判断element == ""是拿DOM元素和空字符串做比较，永远不会成立，应该取元素的value属性来判断，还要排除提交按钮这类无需校验的元素。

修正后的代码 #

JavaScript 代码

const form = document.getElementById("fakeForm");

// 监听表单的submit事件，点击提交按钮时触发
form.addEventListener('submit', function(e) {
  // 阻止表单默认提交行为
  e.preventDefault();
  
  // 遍历表单元素，检查是否有空字段
  const hasEmptyField = Array.from(form.elements).some(element => {
    // 排除提交按钮、普通按钮这类无需校验的元素
    if (element.type === 'submit' || element.type === 'button') return false;
    // 去除首尾空格后判断是否为空
    return element.value.trim() === '';
  });
  
  if (hasEmptyField) {
    alert("Please complete all fields!");
  } else {
    // 校验通过，可手动提交表单或执行其他逻辑
    form.submit();
  }
});

HTML 代码（无需修改）

<form action="" name="fakeForm" id="fakeForm">
  <input type="text" placeholder="first name">
  <input type="text" placeholder="last name">
  <input type="submit" value="submit">
</form>

关键修正说明 #

• 绑定表单的submit事件，此时的e才是真正的提交事件对象，调用e.preventDefault()就能有效阻止默认提交。
• 用some方法遍历元素，只要发现一个空字段就停止遍历，比forEach更高效。
• 加入元素类型判断，跳过提交按钮，只校验输入类字段；用trim()处理输入值，避免用户只输入空格的情况。

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