jQuery -浏览多步骤表单的最佳方式是什么

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.min.js"></script>

<form id="multi-step-form">
  <div class="step" id="step-1">
    <!-- 步骤1的表单字段 -->
    <input type="text" name="field1" required>
    <button class="next">下一步</button>
  </div>
  <div class="step" id="step-2">
    <!-- 步骤2的表单字段 -->
    <input type="text" name="field2" required>
    <button class="prev">上一步</button>
    <button class="next">下一步</button>
  </div>
  <div class="step" id="step-3">
    <!-- 步骤3的表单字段 -->
    <input type="text" name="field3" required>
    <button class="prev">上一步</button>
    <button type="submit">提交</button>
  </div>
</form>

$(document).ready(function() {
  $('#multi-step-form').validate({
    errorClass: 'error',
    errorPlacement: function(error, element) {
      error.insertAfter(element);
    },
    rules: {
      field1: 'required',
      field2: 'required',
      field3: 'required'
    },
    messages: {
      field1: '请输入字段1',
      field2: '请输入字段2',
      field3: '请输入字段3'
    },
    submitHandler: function(form) {
      // 表单验证通过后的提交处理逻辑
      form.submit();
    }
  });

  $('.step').not(':first').hide(); // 隐藏除第一个步骤外的其他步骤

  $('.next').click(function() {
    var currentStep = $(this).closest('.step');
    var nextStep = currentStep.next('.step');
    if ($('#multi-step-form').valid()) {
      currentStep.hide();
      nextStep.show();
    }
  });

  $('.prev').click(function() {
    var currentStep = $(this).closest('.step');
    var prevStep = currentStep.prev('.step');
    currentStep.hide();
    prevStep.show();
  });
});