Spring MVC后端校验不通过时如何触发前端Bootstrap模态框弹出

你可以通过后端返回校验标记+前端自动触发模态框的方式实现需求，改动如下：

1. 后端Spring MVC接口改造 #

首先修改控制器逻辑，校验不通过时往Model中存入显示模态框的标记，同时支持跳过校验的参数（用于用户点击模态框「继续」按钮后的提交场景）：

@PostMapping(value = "/pairs")
public String addPair(@ModelAttribute StepForm addPairStepForm,
                      // 新增跳过校验的参数，非必传
                      @RequestParam(required = false) Boolean skipValidation,
                      Model model) {
    // 未设置跳过校验时，执行你的业务校验逻辑
    if (!Boolean.TRUE.equals(skipValidation)) {
        // 替换为你实际的校验逻辑，比如判断pair是否已存在
        boolean pairIsExisted = checkPairExist(addPairStepForm.getPair());
        if (pairIsExisted) {
            // 存入模态框显示标记
            model.addAttribute("showValidationModal", true);
            // 可选：存入自定义提示文案，适配不同校验场景的提示
            model.addAttribute("modalTip", "Pair already exists for the same exchange.");
            // 回写表单数据，避免用户已输入内容丢失
            model.addAttribute("stepForm", addPairStepForm);
            // 返回原表单页的视图名称，替换为你实际的模板名
            return "pair-add-form";
        }
    }

    // 校验通过或用户选择跳过校验，执行正常业务逻辑
    savePairData(addPairStepForm);
    // 操作成功跳转到列表/成功页
    return "redirect:/pair/list";
}

// 替换为你自己的校验逻辑
private boolean checkPairExist(String pair) {
    // 实现存在性校验逻辑
    return xxx;
}

2. 前端Bootstrap页面改造 #

首先修改模态框的提示内容，支持后端传入的自定义文案，然后新增JS逻辑判断后端返回的标记，自动弹出模态框，同时处理「继续」按钮的提交逻辑：

2.1 模态框内容调整 #

<div class="modal-body" th:text="${modalTip}?: 'Pair already exists for the same exchange.'">
</div>

2.2 新增JS逻辑 #

在页面底部已引入的jQuery、Bootstrap JS之后添加如下代码：

<script th:inline="javascript">
$(function () {
    // 读取后端返回的模态框显示标记
    const needShowModal = /*[[${showValidationModal}]]*/ false;
    if (needShowModal) {
        // 初始化Bootstrap 5模态框并弹出
        const validationModal = new bootstrap.Modal(document.getElementById('validationModal'));
        validationModal.show();

        // 绑定模态框「继续」按钮点击事件
        $('#validationModal .btn-primary').off('click').on('click', function () {
            // 给表单添加跳过校验的隐藏参数
            $('<input>').attr({
                type: 'hidden',
                name: 'skipValidation',
                value: 'true'
            }).appendTo('#add_pair_form');
            // 提交表单
            $('#add_pair_form').submit();
            validationModal.hide();
        });
    }
});
</script>

可选优化（无刷新体验） #

如果不想提交表单刷新页面，可以拦截表单的submit事件，用Ajax异步提交请求，后端返回JSON格式的校验结果，前端根据返回结果直接控制模态框弹出，体验更流畅。

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