JavaScript表单校验：仅标记失败输入框红框及多字段校验异常问题

你当前的写法存在几个明确问题：

• 用if/else if/else互斥分支处理多字段校验的思路本身就不合理：这类分支结构同一时间仅会执行一个匹配的代码块，你为了覆盖双字段同时失败的场景，硬加前置的&&组合判断，不仅代码冗余，后续新增校验字段时需要枚举所有失败组合，完全无法维护。
• 双字段失败的分支里存在低级笔误：你要设置红框的评论输入框ID是commentText，代码里错写成了commentName，如果页面上不存在ID为commentName的元素，这行代码会直接抛出空引用错误中断执行，表现出来就是这个if块看起来始终没有正常运行。
• 缺少校验前的边框重置逻辑：如果用户第一次校验失败触发红框，修改内容后再次提交，即使字段符合规则，之前的红框也不会自动消失。
• 额外提一句：你最初版本的代码中用输入长度和字符串"30"、"100"做大小比较，虽然JS隐式类型转换不会直接报错，但属于不稳定写法，容易出现非预期结果，更新版改成数字类型的写法是正确的。

不要枚举所有字段的失败组合，改成逐字段独立校验、统一收集错误的逻辑，不管有多少个校验字段都能适配，不会出现漏处理的情况：

// 表单提交事件回调中写以下逻辑，建议直接用回调参数里的事件对象，不要依赖全局event
form.addEventListener("submit", (e) => {
  // 提前获取DOM元素，避免每次判断都重复查询DOM
  const nameInput = document.getElementById("name");
  const commentInput = document.getElementById("commentText");
  // 第一步：重置所有输入框的默认边框，清除上次校验的红框
  nameInput.style.border = "";
  commentInput.style.border = "";

  const errorList = [];

  // 第二步：逐个字段独立校验，逻辑完全互不影响
  if (nameInput.value.length > 30) {
    nameInput.style.border = "2px solid red";
    errorList.push("Name must have fewer than 30 characters");
  }
  if (commentInput.value.length > 100) {
    commentInput.style.border = "2px solid red";
    errorList.push("Comment must have fewer than 100 characters");
  }

  // 第三步：统一处理校验结果
  if (errorList.length > 0) {
    // 多个错误用换行拼接展示，不需要提前写死各种组合的提示文案
    alert(errorList.join("\n"));
    e.preventDefault();
  } else {
    // 校验通过后的业务逻辑写在这里
  }
})

这个写法的优势很明显：

• 不需要手动枚举单字段失败、多字段同时失败的所有场景，哪个字段校验失败就自动给哪个字段加红框，逻辑不会遗漏
• 后续新增校验字段只需要新增一个独立的if判断块即可，维护成本极低
• 提前重置样式，不会残留历史校验的红框状态
• DOM仅查询一次，性能更好，也能第一时间发现ID写错的问题（如果ID写错，获取元素时就会抛出空错误，很容易定位）

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