使用async回调函数时，如何阻止Bootbox弹窗在表单验证不通过时自动关闭？

这个问题我之前也踩过坑！核心原因很简单：async函数的回调默认返回的是Promise对象，而Bootbox的confirm组件只会识别同步回调返回的布尔值。你写的return false其实是返回了一个resolved为false的Promise，Bootbox根本不会用这个结果来判断是否关闭弹窗，所以才会出现验证不通过弹窗依然关闭的情况。

下面给你一个完美的解决方案，核心思路是手动接管弹窗的关闭控制权，用onHide事件来决定是否允许弹窗关闭，同时把异步操作和表单验证逻辑分开处理：

具体实现步骤 #

1. 定义一个变量跟踪弹窗是否允许关闭；
2. 在按钮回调里处理表单验证和异步操作：
   • 点击"No"时直接允许关闭；
   • 点击"Yes"先做表单验证，不通过就显示提示且不允许关闭；
   • 验证通过后执行异步操作，完成后再允许并手动关闭弹窗；
3. 用onHide事件返回允许关闭的状态，拦截弹窗的默认关闭行为。

修改后的代码 #

// 定义变量跟踪是否允许弹窗关闭
let canCloseDialog = false;

// 创建Bootbox弹窗并保存实例
const confirmDialog = bootbox.confirm({
    message: 'Test',
    buttons: {
        confirm: {
            label: 'Yes',
            className: 'btn-primary'
        },
        cancel: {
            label: 'No',
            className: 'btn-danger'
        }
    },
    callback: async function (isConfirm) {
        // 用户点击"No"按钮，直接允许关闭弹窗
        if (!isConfirm) {
            canCloseDialog = true;
            return;
        }

        // 用户点击"Yes"按钮，先做表单验证
        const isFormValid = $('#form').valid();
        if (!isFormValid) {
            // 显示必填项提示，这里用你原来的提示方式即可
            bootbox.alert('此字段为必填项');
            // 不允许关闭弹窗，保持打开状态
            return;
        }

        // 表单验证通过，执行异步操作
        try {
            const formData = await self.createData();
            // 用await处理AJAX请求，替代then链式调用
            await $.ajax({
                type: "POST",
                url: "/your-api-endpoint", // 替换成你的实际接口地址
                data: formData,
                contentType: "application/json" // 根据实际情况调整
            });

            // 异步操作成功，允许关闭弹窗并手动触发关闭
            canCloseDialog = true;
            confirmDialog.modal('hide');
        } catch (error) {
            // 处理异步操作失败的情况，比如显示错误提示
            bootbox.alert('操作失败，请稍后重试');
            // 失败时保持弹窗打开，用户可以重新尝试
        }
    },
    // 拦截弹窗关闭事件，返回是否允许关闭的状态
    onHide: function() {
        return canCloseDialog;
    }
});

原理说明 #

• onHide是Bootbox提供的生命周期事件，返回false时会阻止弹窗关闭，完美适配我们的需求；
• 通过canCloseDialog变量控制弹窗的关闭权限，避免了async回调返回Promise导致的判断失效问题；
• 异步操作放在验证通过之后，确保只有合法的请求才会被发送，同时操作完成后再关闭弹窗，提升用户体验。

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