纯JS多步表单验证实现方法

本文深入讲解了一种纯原生 JavaScript 实现的多步骤表单验证方案，精准解决 HTML 原生 required 属性在跨步骤交互中的局限性——特别是对单选按钮组（radio group）无法统一校验、错误提示不明确、跳转逻辑失控等痛点；通过按步骤收集必填字段、分类定制验证逻辑（文本输入判空、下拉框检查选择、单选组检测任一选中）、动态添加 invalid 样式与无障碍属性，并结合事件委托和 FormData 提交，构建出健壮、可复用、无依赖、语义清晰且体验友好的验证流程，让开发者轻松实现专业级多步表单交互。

本文介绍使用原生 JavaScript 对多步骤表单进行逐步验证的方法，重点解决文本框、下拉选择、单选组（radio group）的必填校验逻辑，确保用户只有填完当前步骤所有必填项才能进入下一步，同时提供清晰的错误反馈。

在构建多步骤表单时，仅靠 HTML 的 required 属性不足以支撑跨步骤的交互式验证——尤其当涉及单选按钮组（<input type="radio">）时，浏览器默认只检查「是否有任意一个被选中」，但不会自动高亮整个分组或阻止跳转。下面是一套健壮、可复用的纯 JS 验证方案。

✅ 核心思路：按步骤收集并验证必填字段

我们不再遍历所有 <input>, <select>，而是聚焦于 required 属性存在且值为空/未选中的控件，并为每类控件定制验证逻辑：

• 文本输入（text, email, number 等）与 <select>：检查 .value.trim() === ''；
• 单选组（type="radio"）：检查同名 name 下是否至少有一个被 checked；
• 复选框（type="checkbox"）：按需处理（本文默认视为可选，跳过验证）；
• 隐藏错误状态：为无效字段添加 .invalid 类，并可配合 CSS 提示（如红色边框、图标）。

✅ 实现代码（完整可运行）

const formContainer = document.getElementById('forms');
const forms = formContainer.querySelectorAll('form');
let currentStep = 0;

// 全局验证函数：返回 true 表示当前表单通过验证
function validateCurrentForm() {
  const form = forms[currentStep];
  const requiredFields = form.querySelectorAll('[required]');
  let isValid = true;

  // 清除上一次的 invalid 标记
  requiredFields.forEach(el => el.classList.remove('invalid'));

  requiredFields.forEach(field => {
    const { type, name, value, tagName } = field;

    if (tagName === 'SELECT' || (tagName === 'INPUT' && !['radio', 'checkbox'].includes(type))) {
      // 普通 input 或 select：检查 value 是否为空
      if (!value.trim()) {
        field.classList.add('invalid');
        isValid = false;
      }
    } else if (type === 'radio') {
      // radio 组：检查同 name 下是否有任一被选中
      const radioGroup = form.querySelectorAll(`input[type="radio"][name="${name}"]`);
      const isChecked = [...radioGroup].some(r => r.checked);
      if (!isChecked) {
        // 为整组第一个 radio 添加 invalid（便于 CSS 定位提示）
        radioGroup[0].classList.add('invalid');
        isValid = false;
      }
    }
  });

  return isValid;
}

// 表单提交事件委托（监听整个容器，避免重复绑定）
formContainer.addEventListener('submit', function (e) {
  e.preventDefault();
  if (!validateCurrentForm()) return; // 验证失败，不继续

  const currentForm = forms[currentStep];
  const formData = new FormData(currentForm);
  const stepData = Object.fromEntries(formData);

  console.log(`Step ${currentStep + 1} data:`, stepData);

  // 切换到下一步
  currentForm.hidden = true;
  currentStep++;

  if (currentStep >= forms.length) {
    console.log('✅ 表单提交完成！最终数据：', Array.from({ length: forms.length }, (_, i) => 
      Object.fromEntries(new FormData(forms[i]))
    ));
    // 此处可发起最终 POST 请求，或显示完成页
  } else {
    forms[currentStep].hidden = false;
  }
});

✅ HTML 结构建议（语义清晰、利于 JS 选择）

<div id="forms">
  <form class="step-form">
    <h3>步骤 1</h3>
    &lt;input type=&quot;text&quot; name=&quot;fullName&quot; placeholder=&quot;姓名&quot; required&gt;
    &lt;select name=&quot;country&quot; required&gt;
      <option value="">请选择国家</option>
      <option value="CN">中国</option>
      <option value="US">美国</option>
    &lt;/select&gt;
    <label>&lt;input type=&quot;radio&quot; name=&quot;agree&quot; value=&quot;yes&quot; required&gt; 同意条款</label>
    <label>&lt;input type=&quot;radio&quot; name=&quot;agree&quot; value=&quot;no&quot;&gt; 不同意</label>
    <button type="submit">下一步</button>
  </form>

  <form class="step-form" hidden>
    <h3>步骤 2</h3>
    &lt;input type=&quot;email&quot; name=&quot;email&quot; placeholder=&quot;邮箱&quot; required&gt;
    &lt;input type=&quot;tel&quot; name=&quot;phone&quot; placeholder=&quot;电话&quot;&gt;
    <button type="submit">下一步</button>
  </form>

  <form class="step-form" hidden>
    <h3>步骤 3</h3>
    &lt;textarea name=&quot;message&quot; placeholder=&quot;留言（可选）&quot;&gt;&lt;/textarea&gt;
    <button type="submit">提交</button>
  </form>
</div>

⚠️ 注意事项与最佳实践

• 不要依赖 form.checkValidity()：它对 radio 组支持不一致（尤其在未初始化时），手动校验更可控；
• CSS 增强体验：为 .invalid 添加样式，例如：

  .invalid { border-color: #e74c3c; box-shadow: 0 0 4px rgba(231, 76, 60, 0.5); }

• 无障碍友好：为无效字段动态添加 aria-invalid="true" 和 aria-describedby 关联错误提示；
• 防重复提交：可在验证通过后禁用提交按钮，或添加加载态；
• 扩展性：如需支持自定义校验规则（如邮箱格式、密码强度），可在 validateCurrentForm() 中为字段添加 data-validate="email" 并扩展判断逻辑。

这套方案完全基于原生 JavaScript，无外部依赖，逻辑清晰、易于调试和维护，适用于各类多步骤表单场景。

以上就是《纯JS多步表单验证实现方法》的详细内容，更多关于的资料请关注golang学习网公众号！