最快方式是在submit事件中用window.confirm()并调用e.preventdefault()阻止默认提交；常见错误是未阻止取消后的提交或混淆return false的使用位置。
点击提交按钮时触发 confirm 弹窗
直接在 submit 事件里用 window.confirm() 最快，但要注意它会阻塞后续逻辑，且样式不可控。适合内部系统或临时调试：
document.getElementById('myForm').addEventListener('submit', function(e) {
if (!window.confirm('确定要提交吗？')) {
e.preventDefault();
}
});
常见错误现象：弹窗点了“取消”后表单仍提交——多半是没调 e.preventDefault()；或者用了 return false 却忘了加在事件处理器里（不是 HTML 的 onclick="return false" 那种写法）。
用 Bootstrap Modal 替代原生 confirm
原生 confirm() 丑、不能定制、iOS 上可能被拦截。改用 bootstrap-modal 更稳妥，关键是别在 submit 事件里直接 show()，否则表单会先提交再弹窗。
- 把
type="submit"改成type="button"，避免默认提交行为 - 绑定点击事件，手动收集表单数据并校验（比如先跑
form.checkValidity()） - 校验通过后再
new bootstrap.Modal(document.getElementById('confirmModal')).show() - 确认模态框里的“确定”按钮再执行真实提交（
form.submit()或fetch()）
容易踩的坑：data-bs-toggle="modal" 不能直接绑在提交按钮上——它不传参、不拦截、不等用户点确认就走了。
防止重复点击 + 提交中状态反馈
用户狂点“确定”会导致多次提交，尤其配合 AJAX 时更危险。Modal 确认框里那个“确定”按钮必须做防抖处理：
- 点击后立刻
btn.disabled = true，文字改为“提交中…” - 成功后调
modal.hide()，失败则恢复按钮状态 - 别只靠 CSS 类（如
disabled）控制，得同步禁用click事件监听器，否则 jQuery 或其他库可能绕过 - 如果用
fetch()，记得在finally块里恢复按钮，不然网络失败后按钮永远卡住
服务端插入成功后回显 Modal（非前端拦截）
有些场景必须等数据库写入完成才弹成功提示，这时前端不能提前弹窗。可靠做法是：PHP/Node.js 插入成功后重定向带参数，比如 success.php?modal=success，然后页面加载时检查 URL：
if (new URLSearchParams(window.location.search).has('modal')) {
const modal = new bootstrap.Modal(document.getElementById('successModal'));
modal.show();
}
注意别漏掉 history.replaceState() 清掉 URL 参数，否则刷新页面又弹一次。这个方案看似绕，但能真正保证“成功才提示”，比前端猜逻辑靠谱得多。
最易忽略的一点：Modal 的 id 必须和 JS 里 getElementById 用的一致，大小写、拼写、是否含空格——Bootstrap 不报错，只是静默失效。
