使用jQuery实现分步表单验证：拆分表单或单表单部分验证？

方案1：拆分为5个独立表单，分步验证后统一提交 #

完全可行，适合需要严格隔离各步骤数据的场景。

实现思路 #

• 用CSS控制5个独立表单的显示/隐藏，默认只展示第一个表单，完成当前步骤验证后切换到下一个。
• 每个步骤的「下一步」按钮触发当前表单的必填项验证，验证通过后将当前表单数据存入全局变量、localStorage或隐藏域，避免页面刷新丢失数据。
• 最后一步的「提交」按钮整合所有步骤的数据，通过AJAX提交到后端；也可在提交前再次做全量验证，确保数据完整。

核心代码示例 #

// 全局存储各步骤表单数据
const stepData = {};

// 步骤1验证与切换
$('#step1-next').on('click', function() {
  const $form = $('#form-step1');
  const requiredFields = $form.find('[required]');
  let isValid = true;

  // 验证当前步骤必填项
  requiredFields.each(function() {
    if ($(this).val().trim() === '') {
      isValid = false;
      $(this).css('border-color', 'red');
    } else {
      $(this).css('border-color', '');
    }
  });

  if (isValid) {
    // 保存当前步骤数据
    stepData.step1 = $form.serialize();
    // 切换步骤
    $('#form-step1').hide();
    $('#form-step2').show();
  } else {
    alert('请完成当前步骤的必填项');
  }
});

// 最终统一提交
$('#final-submit').on('click', function() {
  // 可选：全量验证所有步骤
  let allValid = true;
  $('form').each(function() {
    const required = $(this).find('[required]');
    required.each(function() {
      if ($(this).val().trim() === '') allValid = false;
    });
  });

  if (allValid) {
    // 合并所有步骤数据
    const finalData = Object.values(stepData).join('&');
    // 提交到后端
    $.ajax({
      url: '/api/submit-form',
      method: 'POST',
      data: finalData,
      success: function(res) {
        alert('提交成功');
      },
      error: function() {
        alert('提交失败，请重试');
      }
    });
  } else {
    alert('存在未完成的必填项，请检查所有步骤');
  }
});

方案2：保留单个大型表单，仅验证特定步骤 #

完全可行，这是更推荐的方案，原生表单结构无需额外数据整合，逻辑更简洁。

实现思路 #

• 将单个表单按步骤拆分为多个区块（用<div>包裹），通过CSS控制区块的显示/隐藏，默认仅展示第一个步骤区块。
• 「下一步」按钮仅验证当前可见区块内的表单元素，验证通过后切换到下一个区块。
• 最终提交时，可选择验证整个表单的所有必填项，或逐个步骤再次验证，确保数据完整。

核心代码示例 #

<form id="large-form" action="/api/submit-form" method="POST">
  <!-- 步骤1区块 -->
  <div class="form-step active" id="step1">
    <label>姓名：<input type="text" name="username" required></label>
    <button type="button" class="step-btn" data-target="step2">下一步</button>
  </div>
  <!-- 步骤2区块 -->
  <div class="form-step" id="step2">
    <label>邮箱：<input type="email" name="email" required></label>
    <button type="button" class="step-btn" data-target="step3">下一步</button>
  </div>
  <!-- 更多步骤区块... -->
  <!-- 最终提交按钮 -->
  <button type="submit" id="submit-btn" style="display: none;">提交</button>
</form>

.form-step {
  display: none;
}
.form-step.active {
  display: block;
}

// 步骤切换与验证
$('.step-btn').on('click', function() {
  const $currentStep = $(this).closest('.form-step');
  const targetStepId = $(this).data('target');
  const $targetStep = $('#' + targetStepId);

  // 验证当前步骤的必填项
  const $required = $currentStep.find('[required]');
  let isValid = true;
  $required.each(function() {
    if ($(this).val().trim() === '') {
      isValid = false;
      $(this).addClass('field-error');
    } else {
      $(this).removeClass('field-error');
    }
  });

  if (isValid) {
    $currentStep.removeClass('active').hide();
    $targetStep.addClass('active').show();
    // 如果是最后一步，显示提交按钮
    if ($targetStep.is(':last-of-type')) {
      $('#submit-btn').show();
    }
  } else {
    alert('请完成当前步骤的必填项');
  }
});

// 最终提交时的全量验证
$('#large-form').on('submit', function(e) {
  e.preventDefault();
  const $allRequired = $(this).find('[required]');
  let allValid = true;

  $allRequired.each(function() {
    if ($(this).val().trim() === '') {
      allValid = false;
      $(this).addClass('field-error');
      // 滚动到第一个错误字段
      if (allValid === false) {
        $(this).focus();
        return false;
      }
    } else {
      $(this).removeClass('field-error');
    }
  });

  if (allValid) {
    // 提交表单
    $(this).off('submit').submit();
  } else {
    alert('存在未完成的必填项，请检查');
  }
});

方案对比 #

• 方案1：优点是步骤数据隔离清晰，适合权限控制严格的场景；缺点是需要手动管理数据整合，代码冗余度较高。
• 方案2：优点是原生表单结构，数据自动序列化，逻辑更简洁，维护成本低；缺点是需要精准定位当前步骤的元素，但jQuery的选择器可以轻松实现。

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