<dialog>本身不防重复提交，需结合动态禁用按钮、submit_token及表单校验等手动策略实现；其价值在语义化、可访问性与焦点管理，防重逻辑须开发者自行实现。
<dialog> 本身不防重复提交，它只是个语义化模态容器。真正起作用的，是把它和表单提交逻辑解耦后，配合动态禁用 + submit_token 的组合策略。
为什么<dialog>不能直接防重
<dialog> 没有内置防重机制，也不拦截表单行为。用户在弹窗里点两次“提交”按钮、按两次回车、甚至快速关闭再打开弹窗重填——这些操作它都完全不管。它的价值在于结构清晰、可访问性好、自带焦点管理，但防重还得靠你手动加逻辑。
- 它默认不居中，必须写 CSS（比如
margin: auto+ 固定宽高或place-items: center） - Safari 15.4 之前不支持
showModal()，得降级为div+aria-modal="true" - 弹窗关闭是异步动画，
dialog.close()执行后 DOM 还没消失，此时若立刻重开弹窗并点提交，可能触发并发请求
监听form.submit事件批量禁用按钮
别给按钮写 onclick="this.disabled=true"，它漏掉回车提交、form.requestSubmit()、多个提交按钮等所有非点击路径。唯一可靠入口是绑定到 form 元素：
<pre class="brush:php;toolbar:false;">const form = document.querySelector('#feedback-form');
form.addEventListener('submit', function(e) {
e.preventDefault();
// 先校验，失败就别锁按钮
if (!form.checkValidity()) return;
// 批量禁用所有 type="submit" 的控件
const buttons = form.querySelectorAll('button[type="submit"], input[type="submit"]');
buttons.forEach(btn => {
btn.disabled = true;
btn.textContent = '提交中…';
});
// 发起 fetch 或 submit()
});
- 必须调
form.checkValidity() 前置校验，否则按钮锁死后用户无法修改再试 - 禁用的是整个集合，不是单个按钮——弹窗里常有“保存”“保存并新建”两个按钮
- 禁用后记得在
fetch().catch()或.finally()中恢复按钮，但仅限失败场景；成功后保持禁用，等弹窗关闭后再重置
submit_token 必须由后端生成且一次有效
前端禁用只是障眼法。<input type="hidden" name="submit_token" value="…"> 这行 HTML 本身不防重，它只是 token 的运输载体。关键在后端：
立即学习“前端免费学习笔记（深入）”；
- token 必须由服务端生成（如 PHP 的
bin2hex(random_bytes(16))），不能是前端Math.random()拼的 - 必须存入 session 或 Redis，绑定当前用户 + 表单类型，并设 5–15 分钟过期
- 提交时比对通过后，**立刻作废**该 token（
unset($_SESSION['submit_token'])或DELRedis key） - 若用
fetch提交，需手动取值：document.querySelector('[name="submit_token"]').value，否则不会自动携带 - 校验失败必须返回明确 HTTP 状态码（如
400 Bad Request）和错误信息，前端据此提示“请刷新页面重试”
弹窗打开/关闭时的状态重置时机
最容易出问题的是状态重置时机。别在 dialog.close() 后立刻恢复按钮，因为关闭有动画延迟。正确做法是：在弹窗 open 事件里重置，而不是在 close 之后。
- 给
<dialog id="feedback-modal">绑定addEventListener('open', () => { resetForm(); }) - 提交成功后只执行
dialog.close()，不碰按钮状态 - 提交失败时，在
catch里恢复按钮 + 显示错误提示，让用户改完再交 - 如果弹窗里用了 Element UI 的
el-dialog，则用@open和@closed钩子，而非原生open事件
真正难的不是写几行 JS，而是把按钮状态、弹窗生命周期、token 消费、网络异常恢复这四件事的时间点对齐。错一个，就可能卡死按钮、漏发请求、或放行重复数据。
