layui实现分步表单

Layui是一款基于jQuery的前端UI框架，可以快速开发出美观、易用的Web界面。分步表单是指将一个表单分成多个步骤进行填写，使得用户填写表单更加方便和清晰。Layui中可以使用form组件和step组件来实现分步表单的功能。

首先，使用step组件来实现表单步骤的切换。step组件需要引入layui.css和layui.js文件，然后在HTML页面中添加step组件的HTML代码和相应的CSS样式。

其次，使用form组件来实现表单的填写和提交。在每个表单步骤中，可以使用form组件的HTML代码来创建表单元素，并添加相应的CSS样式。在最后一个步骤中，可以使用按钮来提交表单数据。

下面是一个简单的分步表单的实现代码示例：

<!-- 引入layui.css和layui.js -->
<link rel="stylesheet" href="layui/css/layui.css">
<script src="layui/layui.js"></script>

<!-- step组件HTML代码 -->
<div class="layui-container">
  <div class="layui-row">
    <div class="layui-col-md12">
      <div class="layui-card">
        <div class="layui-card-header">分步表单</div>
        <<div class="layui-card-body">
          <div class="layui-row">
            <div class="layui-col-md12">
              <div class="layui-step layui-progress-big" lay-filter="step-form">
                <div class="layui-step-item layui-step-item-active" data-step="1">
                  <div class="layui-step-content">
                    <div class="layui-step-title">第一步</div>
                  </div>
                </div>
                <div class="layui-step-item" data-step="2">
                  <div class="layui-step-content">
                    <div class="layui-step-title">第二步</div>
                  </div>
                </div>
                <div class="layui-step-item" data-step="3">
                  <div class="layui-step-content">
                    <div class="layui-step-title">第三步</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- form组件HTML代码 -->
  <form class="layui-form" action="" lay-filter="form">
    <div class="step-form-content" data-step="1">
      <div class="layui-row">
        <div class="layui-col-md12">
          <label class="layui-form-label">姓名：</label>
          <div class="layui-input-block">
            <input type="text" name="username" lay-verify="required" placeholder="请输入姓名" autocomplete="off" class="layui-input">
          </div>
        </div>
      </div>
      <button type="button" class="layui-btn layui-btn-primary next">下一步</button>
    </div>

    <div class="step-form-content" data-step="2" style="display:none;">
      <div class="layui-row">
        <div class="layui-col-md12">
          <label class="layui-form-label">年龄：</label>
          <div class="layui-input-block">
            <input type="text" name="age" lay-verify="required|number" placeholder="请输入年龄" autocomplete="off" class="layui-input">
          </div>
        </div>
      </div>
      <button type="button" class="layui-btn layui-btn-primary prev">上一步</button>
      <button type="button" class="layui-btn layui-btn-primary next">下一步</button>
    </div>

    <div class="step-form-content" data-step="3" style="display:none;">
      <div class="layui-row">
        <div class="layui-col-md12">
          <label class="layui-form-label">性别：</label>
          <div class="layui-input-block">
            <input type="radio" name="sex" value="男" title="男" checked="">
            <input type="radio" name="sex" value="女" title="女">
          </div>
        </div>
      </div>
      <button type="button" class="layui-btn layui-btn-primary prev">上一步</button>
      <button type="submit" class="layui-btn">提交</button>
    </div>
  </form>

  <!-- JavaScript代码 -->
  <script>
    layui.use(['form', 'jquery', 'step'], function() {
      var form = layui.form;
      var $ = layui.jquery;
      var step = layui.step;

      // 初始化step组件
      step.render({
        elem: '#step-form',
        stepWidth: '33%'
      });

      // 表单步骤切换
      $('.next').click(function() {
        var index = $(this).parents('.step-form-content').data('step');
        $('.step-form-content[data-step="' + index + '"]').hide();
        $('.step-form-content[data-step="' + (index + 1) + '"]').show();
        step.next('#step-form');
      });

      $('.prev').click(function() {
        var index = $(this).parents('.step-form-content').data('step');
        $('.step-form-content[data-step="' + index + '"]').hide();
        $('.step-form-content[data-step="' + (index - 1) + '"]').show();
        step.prev('#step-form');
      });

      // 提交表单数据
      form.on('submit(form)', function(data) {
        console.log(data.field);
        return false;
      });
    });
  </script>
</div>