点击提交按钮时先弹出确认对话框，需在form的onsubmit事件中调用confirm()并阻止默认行为，仅当用户确认后才手动提交；自定义样式应使用DOM模态框配合状态标记控制流程，并禁用按钮或加提交锁防重复提交，服务端仍需幂等校验。
点击提交按钮时弹出确认对话框
用户点 submit 按钮后不立即发请求，而是先用浏览器原生 confirm() 拦一下。关键在阻止表单默认提交行为，等用户点了“确定”再手动触发提交。
- 给
<form>绑定onsubmit事件，返回false或调用event.preventDefault() - 在事件处理函数里调用
confirm("确定要提交吗？")，只在返回true时调用form.submit() - 别在按钮上写
onclick="return confirm(...)"，这样无法拦截回车提交或form.submit()调用
<form id="myForm" onsubmit="return confirm('数据将被保存，确定提交？')">
<input type="text" name="username">
<button type="submit">提交</button>
</form>
需要自定义样式时改用模态框（非 confirm）
confirm() 样式不可控、无法国际化、在部分 iOS 版本会阻塞页面渲染。真要定制，得用 DOM 模态框 + 状态标记来控制提交流程。
- 把
onsubmit改成调用自定义函数，内部设一个isConfirmed标志位 - 首次点击提交 → 显示模态框，阻止提交；用户点“确定” → 设
isConfirmed = true，再调一次form.submit() - 第二次提交时检查标志位，为
true就放行，否则重置标志位并 return - 注意：模态框关闭或取消按钮必须重置
isConfirmed，否则刷新前无法再次触发确认
防止重复提交 + 二次确认要同时生效
用户狂点提交按钮，可能在确认弹窗还没关时就又点了一次，导致多次提交。二次确认本身不防重提，得叠加处理。
- 在确认逻辑开始前禁用提交按钮：
button.disabled = true，确认后恢复或仅在最终提交时禁用 - 更稳妥的是在
form.submit()前加个锁：if (submitting) return; submitting = true;，提交成功或失败后重置 - 服务端仍需做幂等校验，前端控制只是体验优化，不是安全防线
Vue/React 等框架中怎么处理
框架里不要直接操作 form.submit()，容易绕过响应式或生命周期。应统一收口到事件处理器中。
立即学习“前端免费学习笔记（深入）”；
- Vue：在
@submit.prevent里调confirm()，true时触发axios.post()或提交逻辑 - React：用
event.preventDefault()，确认后调handleSubmit()，里面包含 API 调用或formRef.current?.submit() - 避免在 JSX/模板里写内联
confirm()，不利于测试和状态管理
真正麻烦的不是弹窗本身，而是确认之后的状态同步——比如用户点了“取消”，但表单某些字段已被 JS 修改，或者异步校验刚返回结果，这些边缘情况得在确认前快照关键状态。
