JS+CSS选项卡表单单选框校验问题及校验函数拆分咨询

看起来你在单选框校验这里踩了个常见的小坑！问题出在你逐个检查每个单选框是否被选中——但单选框组本来就只有一个会被选中，其他都是未选中的，所以循环里每碰到一个未选中的单选框就把valid设为false，这肯定会导致校验失败。

一、修复单选框校验逻辑 #

你需要先把当前tab里的单选框按name属性分组（同一组单选框的name是相同的），然后针对每一组检查是否有且仅有一个选项被选中。修改后的校验函数如下：

function validateForm() { 
  // This function deals with validation of the form fields 
  var x, y, i, valid = true; 
  x = document.getElementsByClassName("tab"); 
  y = x[currentTab].getElementsByTagName("input"); 

  // 先处理文本输入框校验
  for (i = 0; i < y.length; i++) { 
    if (y[i].type === "text") { 
      // 用trim()避免空空格误判
      if (y[i].value.trim() === "") { 
        y[i].classList.add('invalid'); 
        valid = false; 
      } else { 
        y[i].classList.remove('invalid'); 
      }
    }
  }

  // 单独处理单选框组校验
  const radioGroups = {};
  // 第一步：按name属性分组所有单选框
  for (i = 0; i < y.length; i++) {
    if (y[i].type === 'radio') {
      const name = y[i].name;
      if (!radioGroups[name]) {
        radioGroups[name] = [];
      }
      radioGroups[name].push(y[i]);
    }
  }

  // 第二步：遍历每个组，检查选中数量是否为1
  for (const groupName in radioGroups) {
    const group = radioGroups[groupName];
    const checkedCount = group.filter(radio => radio.checked).length;
    
    if (checkedCount !== 1) {
      // 选中数量不符合要求，给组内所有单选框标记为无效
      group.forEach(radio => radio.classList.add('invalid'));
      valid = false;
    } else {
      // 校验通过，移除无效标记
      group.forEach(radio => radio.classList.remove('invalid'));
    }
  }

  // If the valid status is true, mark the step as finished and valid: 
  if (valid) { 
    document.getElementsByClassName("step")[currentTab].className += " finish"; 
  } 
  return valid; // return the valid status 
}

关键修改点说明： #

• 把文本框和单选框的校验逻辑分开，避免互相干扰
• 用radioGroups对象按name分组单选框，准确识别同一组的选项
• 对每组单选框统计选中数量，只有当数量恰好为1时才校验通过

二、是否需要拆分校验函数？ #

非常建议拆分！把不同类型字段的校验逻辑拆成独立的小函数，会让代码更易维护、可读性更强。比如：

• 每个小函数只负责一种类型的校验，逻辑单一清晰
• 后期修改规则时（比如给文本框加长度限制），不会影响其他类型的校验
• 可复用性更高，其他场景需要同类校验时可以直接调用

拆分后的示例代码：

// 校验单个文本输入框
function validateTextInput(input) {
  if (input.value.trim() === "") {
    input.classList.add('invalid');
    return false;
  } else {
    input.classList.remove('invalid');
    return true;
  }
}

// 校验单个单选框组
function validateRadioGroup(group) {
  const checkedCount = group.filter(radio => radio.checked).length;
  const isValid = checkedCount === 1;
  
  group.forEach(radio => {
    isValid ? radio.classList.remove('invalid') : radio.classList.add('invalid');
  });
  
  return isValid;
}

// 主校验函数
function validateForm() { 
  let valid = true; 
  const currentTabEl = document.getElementsByClassName("tab")[currentTab];
  const inputs = currentTabEl.getElementsByTagName("input"); 

  // 校验所有文本框
  for (const input of inputs) {
    if (input.type === "text" && !validateTextInput(input)) {
      valid = false;
    }
  }

  // 分组并校验所有单选框组
  const radioGroups = {};
  for (const input of inputs) {
    if (input.type === 'radio') {
      const name = input.name;
      radioGroups[name] = radioGroups[name] || [];
      radioGroups[name].push(input);
    }
  }

  for (const group of Object.values(radioGroups)) {
    if (!validateRadioGroup(group)) {
      valid = false;
    }
  }

  if (valid) { 
    document.getElementsByClassName("step")[currentTab].className += " finish"; 
  } 
  return valid; 
}

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