如何使用Bootstrap Validator实现分步标签页表单验证及提交

我来帮你搞定这个多标签页的表单验证需求，结合Bootstrap Validator的特性，我们可以实现分步验证+标签页切换的逻辑，下面是具体的实现方案：

核心思路 #

• 页面初始化时，仅显示第一个标签页的内容，其余标签页默认隐藏
• 点击「下一步」按钮时，先对当前激活标签页内的所有表单元素进行验证，只有验证通过后才切换到下一个标签页
• 点击「完成」按钮时，先确保所有标签页的表单元素都验证通过，再将表单提交到服务器

完整代码实现 #

HTML结构 #

<form id="multiTabForm" method="post">
  <!-- 标签页导航 -->
  <ul class="nav nav-tabs" role="tablist">
    <li class="active"><a href="#tab1" role="tab" data-toggle="tab">基本信息</a></li>
    <li><a href="#tab2" role="tab" data-toggle="tab">详细信息</a></li>
    <li><a href="#tab3" role="tab" data-toggle="tab">确认提交</a></li>
  </ul>

  <!-- 标签页内容 -->
  <div class="tab-content">
    <!-- 第一个标签页 -->
    <div class="tab-pane active" id="tab1">
      <div class="form-group">
        <label for="name">姓名</label>
        <input type="text" class="form-control" id="name" name="name" required>
      </div>
      <div class="form-group">
        <label for="email">邮箱</label>
        <input type="email" class="form-control" id="email" name="email" required>
      </div>
      <button type="button" id="nextToTab2" class="btn btn-primary">下一步</button>
    </div>

    <!-- 第二个标签页 -->
    <div class="tab-pane" id="tab2">
      <div class="form-group">
        <label for="phone">手机号</label>
        <input type="tel" class="form-control" id="phone" name="phone" required>
      </div>
      <div class="form-group">
        <label for="address">地址</label>
        <input type="text" class="form-control" id="address" name="address" required>
      </div>
      <button type="button" id="nextToTab3" class="btn btn-primary">下一步</button>
      <button type="button" id="backToTab1" class="btn btn-default">上一步</button>
    </div>

    <!-- 第三个标签页 -->
    <div class="tab-pane" id="tab3">
      <div class="well">
        <p>请确认以下信息：</p>
        <p><strong>姓名：</strong><span id="confirmName"></span></p>
        <p><strong>邮箱：</strong><span id="confirmEmail"></span></p>
        <p><strong>手机号：</strong><span id="confirmPhone"></span></p>
        <p><strong>地址：</strong><span id="confirmAddress"></span></p>
      </div>
      <button type="submit" id="submitForm" class="btn btn-success">完成提交</button>
      <button type="button" id="backToTab2" class="btn btn-default">上一步</button>
    </div>
  </div>
</form>

JavaScript逻辑 #

$(document).ready(function() {
  // 初始化Bootstrap Validator
  $('#multiTabForm').bootstrapValidator({
    feedbackIcons: {
      valid: 'glyphicon glyphicon-ok',
      invalid: 'glyphicon glyphicon-remove',
      validating: 'glyphicon glyphicon-refresh'
    },
    fields: {
      name: {
        validators: {
          notEmpty: {
            message: '姓名不能为空'
          }
        }
      },
      email: {
        validators: {
          notEmpty: {
            message: '邮箱不能为空'
          },
          emailAddress: {
            message: '请输入有效的邮箱地址'
          }
        }
      },
      phone: {
        validators: {
          notEmpty: {
            message: '手机号不能为空'
          },
          regexp: {
            regexp: /^1[3-9]\d{9}$/,
            message: '请输入有效的手机号'
          }
        }
      },
      address: {
        validators: {
          notEmpty: {
            message: '地址不能为空'
          }
        }
      }
    }
  });

  var validator = $('#multiTabForm').data('bootstrapValidator');

  // 下一步到第二个标签页
  $('#nextToTab2').on('click', function() {
    // 验证第一个标签页的表单元素
    validator.validateContainer('#tab1');
    if (validator.isValidContainer('#tab1')) {
      // 验证通过，切换到第二个标签页
      $('#tab2').tab('show');
    }
  });

  // 下一步到第三个标签页
  $('#nextToTab3').on('click', function() {
    // 验证第二个标签页的表单元素
    validator.validateContainer('#tab2');
    if (validator.isValidContainer('#tab2')) {
      // 填充确认信息
      $('#confirmName').text($('#name').val());
      $('#confirmEmail').text($('#email').val());
      $('#confirmPhone').text($('#phone').val());
      $('#confirmAddress').text($('#address').val());
      // 切换到第三个标签页
      $('#tab3').tab('show');
    }
  });

  // 上一步按钮逻辑
  $('#backToTab1').on('click', function() {
    $('#tab1').tab('show');
  });
  $('#backToTab2').on('click', function() {
    $('#tab2').tab('show');
  });

  // 提交表单
  $('#multiTabForm').on('success.form.bv', function(e) {
    // 阻止默认提交，这里可以换成你的服务器提交逻辑
    e.preventDefault();
    var $form = $(e.target);
    // 这里可以用ajax提交表单
    $.post('/your-submit-url', $form.serialize(), function(response) {
      // 处理服务器返回的结果
      alert('提交成功！');
    });
  });
});

关键知识点说明 #

• 分步验证：使用validator.validateContainer('#tabId')可以针对指定标签页内的表单元素进行验证，validator.isValidContainer('#tabId')判断该区域是否验证通过
• 标签页切换：通过$('#tabId').tab('show')方法切换标签页，Bootstrap会自动处理导航和内容的激活状态
• 表单提交：监听success.form.bv事件，在所有验证通过后执行服务器提交逻辑，这里用$.post作为示例，你可以根据实际需求调整

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