使用preventDefault()进行表单验证时遇到提交失效问题

原代码存在的问题 #

• 变量初始化时机错误：uname和uemail在页面加载时就获取了输入框的值，后续用户输入内容不会更新这两个变量，导致验证逻辑永远基于初始空值判断。
• 表单元素引用不匹配：HTML中输入框的name属性是uname和email，但JS里用document.forms["myForm"]["userName"]获取，名称对应错误，无法正确拿到输入值。
• 空值判断逻辑有漏洞：判断条件是等于单个空格" "，但用户可能输入空字符串或多个空格，无法覆盖这类无效输入场景。
• 提交阻止逻辑错误：当前代码无条件调用e.preventDefault()，即便验证通过也会阻止表单提交。

修复后的完整代码 #

HTML代码

<form id="signUp" name="myForm">
  Name: <input type="text" name="uname" id="userName">
  <br> Email: <input type="email" name="email" id="userEmail">
  <button type="submit">sign up</button>
</form>

JavaScript代码

let form = document.getElementById("signUp");

function validateForm() {
  // 实时获取输入框的最新值，并去除前后空格
  let uname = document.forms["myForm"]["uname"].value.trim();
  let uemail = document.forms["myForm"]["email"].value.trim();

  if (!uname) {
    alert("Name is Empty");
    return false;
  } 
  if (!uemail) {
    alert("Email is Empty");
    return false;
  }
  return true;
}

form.addEventListener("submit", function(e) {
  // 仅在验证失败时阻止表单提交
  if (!validateForm()) {
    e.preventDefault();
  }
});

修复说明 #

1. 将获取输入值的逻辑移到validateForm函数内部，确保每次验证都使用用户最新输入的内容。
2. 修正表单元素的名称引用，与HTML中的name属性保持一致。
3. 使用trim()处理输入内容，覆盖空字符串、全空格等无效输入的判断。
4. 修改提交事件逻辑，仅当验证不通过时调用e.preventDefault()，验证通过则正常提交表单。

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