layui分步表单怎么跳转到下一步-Layui教程-PHP中文网

layui分步表单需手动调用step.next()触发下一步，常见失效原因包括step实例未正确保存、按钮绑定时机不当、校验未通过或未调用step.render()；跳转指定步骤用step.goto(index)，索引从0开始。

layui分步表单怎么跳转到下一步

layui分步表单怎么触发下一步跳转

layui 的 step 组件本身不提供表单跳转逻辑，所谓“分步表单”的下一步行为，必须由开发者手动控制 step.next() 方法，配合表单校验和 DOM 操作来实现。

为什么点击按钮没反应？常见原因

直接给按钮加 onclick="step.next()" 通常无效，因为：step 实例未正确获取、方法调用时机不对、或当前步骤被禁用。

step 初始化后必须保存实例引用（不能只靠 layui.use 回调内定义）
按钮需在对应步骤的 DOM 内，或通过事件委托绑定；否则 this 上下文可能丢失
若上一步表单校验失败，应阻止 next()，但 layui 不自动做这事——得自己写 form.verify 并在点击时检查
使用 step.render() 后，再调用 step.next() 才有效；仅引入模块不够

正确的 next() 调用方式（带校验）

推荐在每步底部按钮上绑定函数，显式校验 + 手动跳转：

深蓝色网站后台管理系统layui框架模板-AdminPro

一款深蓝色网站后台管理系统layui框架模板

下载

// 假设 step 已初始化为 stepIns
form.on('submit(next1)', function(data){
  // 自定义校验逻辑，例如检查必填项
  if(!$('#username').val().trim()) {
    layer.msg('请输入用户名');
    return false;
  }
  // 校验通过才跳转
  stepIns.next();
  return false; // 阻止表单默认提交
});

注意：next() 是同步执行，不会等待异步操作（如 AJAX 提交）。如果需要“提交本步数据后再跳”，得把请求成功回调放在 stepIns.next() 里面。