JavaScript校验数组值命名复选框 错误提示重复显示问题修复

场景背景 #

现有动态JavaScript表单校验逻辑运行流程为：扫描指定步骤容器（HTMLElement）内的所有字段，将所有必填复选框的name属性收集存入checkbox_groups数组，再逐组校验是否至少有一个选项被选中，常规无特殊命名的场景下逻辑运行正常。

问题表现 #

当页面存在name格式为person[1]、person[2]、person[3]这类带数组索引的动态复选框时，校验生成的错误提示<p>标签会显示在每一个复选框下方，不符合交互设计预期。预期效果为：同组复选框校验不通过时，错误提示仅展示在该组最后一个复选框后方。

问题原因 #

原有逻辑存在两个缺陷：

• 收集复选框分组时直接使用完整name属性作为分组键，带不同索引的同组复选框会被识别为独立分组
• 校验未通过时直接在当前遍历到的复选框后方插入提示，没有定位同组最后一个元素、去重插入提示的逻辑

修复实现 #

核心修复逻辑 #

• 提取复选框分组名时，通过正则截断[数字索引]后缀，将同基础名的复选框归为同一组
• 每次校验前先清除同容器内历史生成的复选框错误提示，避免提示重复堆叠
• 逐组校验时，取组内最后一个复选框作为错误提示的唯一插入锚点

修复后完整校验函数 #

function validate_step_checkboxes(stepContainer) {
  let passValidate = true;
  // 清除历史错误提示
  stepContainer.querySelectorAll('.checkbox-error-tip').forEach(tip => tip.remove());
  const groupMap = {};

  // 按规则归类所有必填复选框
  stepContainer.querySelectorAll('input[type="checkbox"][required]').forEach(checkbox => {
    // 提取[索引]前的基础名作为分组键，普通name直接取原值
    const groupKey = checkbox.name.match(/^([^\[]+)/)?.[1] || checkbox.name;
    if (!groupMap[groupKey]) groupMap[groupKey] = [];
    groupMap[groupKey].push(checkbox);
  });

  // 逐组执行校验
  Object.values(groupMap).forEach(checkboxList => {
    const hasChecked = checkboxList.some(item => item.checked);
    if (!hasChecked) {
      passValidate = false;
      // 取组内最后一个复选框
      const lastItem = checkboxList[checkboxList.length - 1];
      // 生成错误提示
      const errorEl = document.createElement('p');
      errorEl.className = 'checkbox-error-tip form-error';
      errorEl.textContent = '请至少选择一个选项';
      // 优先插入到复选框包裹项后方，兼容常见DOM结构
      const wrapItem = lastItem.closest('.checkbox-item, .form-check');
      wrapItem ? wrapItem.after(errorEl) : lastItem.after(errorEl);
    }
  });

  return passValidate;
}

适配的HTML结构参考 #

<div class="step-container">
  <div class="checkbox-item">
    <input type="checkbox" name="person[1]" id="person1" required>
    <label for="person1">人员1</label>
  </div>
  <div class="checkbox-item">
    <input type="checkbox" name="person[2]" id="person2" required>
    <label for="person2">人员2</label>
  </div>
  <div class="checkbox-item">
    <input type="checkbox" name="person[3]" id="person3" required>
    <label for="person3">人员3</label>
  </div>
  <!-- 校验不通过时，错误提示固定插入到这个位置 -->
</div>

兼容说明 #

• 正则分组逻辑同时兼容普通无后缀的复选框name，以及带多级数组格式的name（比如user[hobby][1]会被归到user组），如果需要保留一级数组作为分组键，可调整正则规则为/^([^\[]+(\[\d+\])?)/
• 错误提示类名可根据现有项目的表单错误样式自行修改，不影响定位逻辑

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