jQuery SmartWizard v5步骤验证：阻止跳转及手动URL片段访问

针对你遇到的两个核心问题——AJAX返回错误时阻止跳转、拦截手动通过URL片段访问未完成步骤——可以通过优化showStep和leaveStep事件逻辑来解决，重点是避免showStep的循环跳转问题，同时严格维护步骤完成状态：

核心优化点 #

1. 给showStep事件添加跳转标志，防止强制跳转时重复触发该事件导致循环
2. 在showStep中精准判断目标步骤是否可访问，跳转到最近的已完成步骤
3. 强化leaveStep的AJAX错误处理，确保失败时不更新步骤完成状态

完整代码实现 #

// 步骤完成状态标记
let step1Completed = false;
let step2Completed = false;
// 防止showStep循环跳转的标志
let isRedirecting = false;

// 处理步骤显示事件，拦截手动URL跳转
$('#smartwizard').on('showStep', function (e, anchorObject, stepNumber) {
    if (isRedirecting) return; // 正在跳转时直接返回，避免循环

    // 检查目标步骤是否可访问
    if (!step1Completed && stepNumber !== 0) {
        // 第一步未完成，强制跳回第一步
        isRedirecting = true;
        $('#smartwizard').smartWizard("goToStep", 0);
        isRedirecting = false;
    } else if (step1Completed && !step2Completed && stepNumber >= 2) {
        // 第一步完成但第二步未完成，强制跳回第二步
        isRedirecting = true;
        $('#smartwizard').smartWizard("goToStep", 1);
        isRedirecting = false;
    }
});

// 处理离开步骤事件，控制AJAX验证与跳转
$('#smartwizard').on("leaveStep", function (e, anchorObject, stepNumber) {
    // 处理第一步离开逻辑
    if (stepNumber === 0 && !step1Completed) {
        $.ajax({
            // 替换为你的AJAX参数：url、请求类型、表单数据等
            url: '/register-submit',
            type: 'POST',
            data: $('#step1-form').serialize()
        }).then(function(response) {
            if (response.success) {
                step1Completed = true;
                $('#smartwizard').smartWizard("next");
            } else {
                // AJAX失败，提示错误，不跳转
                alert('注册信息有误，请检查后重试');
            }
        }, function() {
            // 请求异常，提示错误
            alert('网络异常，请稍后再试');
        });
        return false; // 阻止默认跳转，等待AJAX结果
    }

    // 处理第二步离开逻辑
    if (stepNumber === 1 && !step2Completed) {
        $.ajax({
            url: '/otp-verify',
            type: 'POST',
            data: $('#step2-form').serialize()
        }).then(function(response) {
            if (response.success) {
                step2Completed = true;
                $('#smartwizard').smartWizard("next");
            } else {
                alert('OTP验证码错误，请重新输入');
            }
        }, function() {
            alert('网络异常，请稍后再试');
        });
        return false; // 阻止默认跳转，等待AJAX结果
    }

    // 第三步及以后允许正常离开（可根据需求调整）
    return true;
});

关键说明 #

• isRedirecting标志：当通过goToStep强制跳转时，暂时标记为正在跳转，避免showStep事件再次触发导致无限循环
• showStep判断逻辑：精准对应不同完成状态下的可访问步骤，确保用户无论手动修改URL到哪个未完成步骤，都会被拉回最近的已完成步骤
• leaveStep返回值：AJAX请求发起时返回false阻止默认跳转，只有当AJAX成功并更新步骤状态后，才主动调用next完成跳转

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