JavaScript表单验证无法正常运行，入门开发者无法定位错误原因

现有代码的问题点 #

• 未声明form变量就直接绑定事件，浏览器会抛出form is not defined的引用错误
• 表单提交的事件回调中仅阻止了默认提交行为，没有调用checkInputs验证函数，验证逻辑完全不会触发
• 只实现了setErrorFor错误提示函数，用到的setSuccessFor成功状态处理函数未定义，输入合法时会触发报错
• 名字字段的取值判断没有做去空格处理，用户输入纯空格时会被判定为合法输入，不符合验证要求
• 目前仅写了名字字段的验证逻辑，姓氏、邮箱、密码、手机号的验证规则完全缺失

修正后的参考代码 #

// 先获取form元素，若你的form标签设置了自定义id，可替换为对应的id选择器
const form = document.querySelector("form");
const fname = document.querySelector("#fname");
const lname = document.querySelector("#lname");
const email = document.querySelector("#email");
const password = document.querySelector("#password");
const phoneNumber = document.querySelector("#phone-number");

form.addEventListener("submit", (e) => {
  e.preventDefault();
  // 提交时触发验证逻辑
  checkInputs();
});

function checkInputs() {
  // 所有字段统一做去空格处理
  const fnameValue = fname.value.trim();
  const lnameValue = lname.value.trim();
  const emailValue = email.value.trim();
  const passwordValue = password.value.trim();
  const phoneNumberValue = phoneNumber.value.trim();

  // 名字验证
  if(fnameValue === "") {
    setErrorFor(fname, "该字段不能为空");
  } else {
    setSuccessFor(fname);  
  }
  // 其他字段的验证可按照上述逻辑扩展，比如邮箱可加正则校验、密码可加长度/字符规则校验
}

function setErrorFor(input, message) {
  const inputContainer = input.parentElement;
  const small = inputContainer.querySelector("small");
  small.innerText = message;
  // 先移除成功状态类，避免样式冲突
  inputContainer.classList.remove("has-success");
  inputContainer.classList.add("has-error");
}

// 补充缺失的成功状态处理函数
function setSuccessFor(input) {
  const inputContainer = input.parentElement;
  const small = inputContainer.querySelector("small");
  // 清空错误提示
  small.innerText = "";
  // 移除错误状态类
  inputContainer.classList.remove("has-error");
  inputContainer.classList.add("has-success");
}

额外注意事项 #

你需要在CSS中补充has-error和has-success对应的样式规则，比如错误状态下输入框边框变红、small标签文字显示红色，成功状态下输入框边框变绿，不然状态类修改后页面不会有视觉反馈。

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