JavaScript表单验证：如何在验证失败时阻止表单提交

你写的这段密码重置表单验证代码，触发错误弹窗后点击确定，表单还是会提交，问题出在事件监听的方式和阻止默认行为的逻辑上。

原代码（整理后） #

<form method="post" action="#" id="PasswordResetForm">
    <input type="hidden" name="token" value="toenhere">
    
    <label for="account_password">New Password:</label>
    <input type="password" id="account_password" name="account_password" required>
    
    <label for="account_password2">Confirm Password:</label>
    <input type="password" id="account_password2" name="account_password2" required>
    
    <button type="submit">Reset Password</button>
</form>

<script type="text/javascript">
  function validatePassword() {
    const password = document.getElementById("account_password").value;
    const password2 = document.getElementById("account_password2").value;
    const minLength = 8;
    const hasUppercase = /[A-Z]/;
    const hasLowercase = /[a-z]/;
    const hasNumber = /[0-9]/;
    const hasSymbol = /[!@#$%^&*]/;

    let errorMessage = "";

    // 检查密码是否为空
    if (password === "" || password2 === "") {
      errorMessage = "Please enter a password.";
    } else {
      // 检查密码强度
      if (password.length < minLength) {
        errorMessage = "Password must be at least " + minLength + " characters long.";
      } else if (!hasUppercase.test(password)) {
        errorMessage = "Password must contain at least one uppercase letter.";
      } else if (!hasLowercase.test(password)) {
        errorMessage = "Password must contain at least one lowercase letter.";
      } else if (!hasNumber.test(password)) {
        errorMessage = "Password must contain at least one number.";
      } else if (!hasSymbol.test(password)) {
        errorMessage = "Password must contain at least one symbol.";
      } else if (password !== password2) {
        errorMessage = "Passwords do not match.";
      }
    }

    // 显示错误信息或允许提交
    if (errorMessage) {
      alert(errorMessage);
      return false; // 试图阻止表单提交
    } else {
      return true; // 允许表单提交
    }
  }
  document.getElementById("PasswordResetForm").addEventListener("submit", validatePassword);  
</script>

问题根源 #

用addEventListener绑定submit事件时，函数里return false不会阻止表单提交——这种阻止方式只适用于传统的内联事件绑定（比如<form onsubmit="return validatePassword()">）。现代事件监听机制需要通过事件对象来主动阻止默认行为。

解决办法 #

修改validatePassword函数，接收事件参数，在需要阻止提交时调用event.preventDefault()：

function validatePassword(event) { // 接收事件参数
  const password = document.getElementById("account_password").value;
  const password2 = document.getElementById("account_password2").value;
  const minLength = 8;
  const hasUppercase = /[A-Z]/;
  const hasLowercase = /[a-z]/;
  const hasNumber = /[0-9]/;
  const hasSymbol = /[!@#$%^&*]/;

  let errorMessage = "";

  // 验证逻辑保持不变
  if (password === "" || password2 === "") {
    errorMessage = "Please enter a password.";
  } else {
    if (password.length < minLength) {
      errorMessage = "Password must be at least " + minLength + " characters long.";
    } else if (!hasUppercase.test(password)) {
      errorMessage = "Password must contain at least one uppercase letter.";
    } else if (!hasLowercase.test(password)) {
      errorMessage = "Password must contain at least one lowercase letter.";
    } else if (!hasNumber.test(password)) {
      errorMessage = "Password must contain at least one number.";
    } else if (!hasSymbol.test(password)) {
      errorMessage = "Password must contain at least one symbol.";
    } else if (password !== password2) {
      errorMessage = "Passwords do not match.";
    }
  }

  if (errorMessage) {
    alert(errorMessage);
    event.preventDefault(); // 调用此方法阻止表单默认提交行为
    return false; // 可选，增强旧浏览器兼容性
  } else {
    return true;
  }
}
document.getElementById("PasswordResetForm").addEventListener("submit", validatePassword);

另外，如果你更倾向于传统写法，也可以直接修改表单标签为内联绑定：

<form method="post" action="#" id="PasswordResetForm" onsubmit="return validatePassword()">

这种情况下原函数的return false就能生效，但现代开发更推荐事件监听+preventDefault的方式。

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