重构JS表单验证函数后弹窗仍提交的问题咨询

• 你的推测完全正确，必须在onsubmit事件的调用处添加return checkEmptyFields();才能阻止不符合条件的表单提交。
• 核心原因：onsubmit事件的返回值直接决定表单是否继续提交——只有当它返回false时，浏览器才会终止提交流程。如果只是单纯调用checkEmptyFields()而不返回其结果，哪怕函数内部返回了false，onsubmit事件本身相当于返回undefined，浏览器会默认执行提交操作。

代码示例对比 #

错误写法（无法阻止提交）：

<form onsubmit="checkEmptyFields();">
  <!-- 表单元素 -->
</form>

正确写法（可阻止提交）：

<form onsubmit="return checkEmptyFields();">
  <!-- 表单元素 -->
</form>

确保函数返回值正确 #

同时要保证你的checkEmptyFields()函数逻辑正确，验证不通过时返回false，通过时返回true：

function checkEmptyFields() {
  // 示例：检查用户名输入框
  const usernameInput = document.getElementById('username');
  if (!usernameInput.value.trim()) {
    alert('用户名不能为空');
    return false; // 验证失败，返回false
  }
  // 其他字段验证逻辑...
  return true; // 所有验证通过，返回true
}

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