JS多步表单校验：复选框、单选框验证失效解决方案

你现有校验逻辑失效的核心原因很简单：所有字段都统一用value == ""做判空规则，但复选框（checkbox）、单选按钮（radio）的选中状态和value属性无关——哪怕是未选中的radio/checkbox，本身也自带默认value值，空值判断自然会直接跳过这两类字段的校验。
原有逻辑还有两个隐藏问题：

• 单选按钮是同name属性互斥的成组字段，不能逐个单元素判断是否合规，必须按组统计是否有选中项
• 给字段加invalid类前没有移除旧的错误类，多次校验会导致类名重复叠加
• 没有区分字段类型做差异化校验，不管什么输入都套同一个判空规则

直接替换原代码里的validateForm函数即可，兼容文本输入框、文本域、下拉框、单选、复选框全类型字段：

function validateForm() {
  var x, y, i, valid = true;
  var radioGroupStatus = {}; // 按name记录单选组的选中状态
  x = document.getElementsByClassName("tab");
  y = x[currentTab].querySelectorAll('textarea, input, select');
  
  // 先清除所有字段之前的错误标记
  for (i = 0; i < y.length; i++) {
    y[i].classList.remove("invalid");
  }

  // 第一轮遍历：校验普通字段、收集单选组选中状态
  for (i = 0; i < y.length; i++) {
    var field = y[i];
    var type = field.type ? field.type.toLowerCase() : field.tagName.toLowerCase();
    
    switch(type) {
      // 文本类输入、下拉框、多行文本域走非空校验
      case "text":
      case "email":
      case "password":
      case "number":
      case "tel":
      case "select-one":
      case "textarea":
        if (field.value.trim() === "") {
          field.classList.add("invalid");
          valid = false;
        }
        break;
      // 单个复选框（比如同意隐私协议）直接判断是否勾选
      case "checkbox":
        if (field.required && !field.checked) {
          field.classList.add("invalid");
          valid = false;
        }
        break;
      // 单选框先按name分组记录状态，不做单元素判断
      case "radio":
        if (field.name) {
          if (!radioGroupStatus[field.name]) radioGroupStatus[field.name] = false;
          if (field.checked) radioGroupStatus[field.name] = true;
        }
        break;
    }
  }

  // 第二轮遍历：校验单选组是否有选中项
  for (i = 0; i < y.length; i++) {
    var field = y[i];
    if (field.type && field.type.toLowerCase() === "radio" && field.name) {
      if (!radioGroupStatus[field.name]) {
        field.classList.add("invalid");
        valid = false;
      }
    }
  }

  // 校验通过标记当前步骤完成
  if (valid) {
    document.getElementsByClassName("step")[currentTab].classList.add("finish");
  }
  return valid;
}

• 需要必填的单选组、单个复选框只要加上原生required属性，就会自动被纳入校验，不需要额外改代码
• 如果是需要选N项的复选框组（比如至少选2个兴趣标签），可以在checkbox分支里加自定义逻辑：拿到同name属性的所有checkbox，统计选中数量和要求的阈值对比即可
• 代码里用classList做类名操作，替代原来直接拼接className的写法，避免重复添加invalid类的问题，兼容所有主流现代浏览器

内容的提问来源于stack exchange，提问作者Katy H.