真正防重复提交需前端动态禁用控件+后端一次性token校验并立即作废；静态disabled无效，submit事件中批量禁用所有提交控件并配合AbortController防并发，token须服务端生成、绑定session、一次有效且校验后即销毁。
仅靠 <input> 标签自身属性无法防止重复提交——disabled 静态写死、novalidate、autocomplete="off" 全都无效。真正起作用的只有两件事：前端在 submit 事件中动态禁用所有提交控件 + 后端校验一次性 submit_token 并立即作废。
为什么给 input[type="submit"] 加 disabled 属性静态写死没用
静态设置 <input type="submit" disabled> 会让按钮从一开始就不能点，用户根本没法提交。而重复提交发生在“第一次提交已发出、但响应未返回”这个窗口期。此时需要的是动态控制：点击/回车触发后才禁用，且必须覆盖所有提交路径。
-
disabled必须在form.addEventListener('submit', ...)中动态设置，不能写死在 HTML 里 - 只禁用单个
<input>不够——表单可能有多个button[type="submit"]或通过 JS 调用form.submit() - 禁用后若不恢复，失败时用户无法重试；若无条件在
finally恢复，又可能在请求未完成时提前解锁
监听 form submit 事件批量禁用所有提交控件
这是唯一可靠入口。回车、form.requestSubmit()、多个提交按钮、JS 手动调用，全都会触发该事件。
- 用
form.querySelectorAll('button[type="submit"], input[type="submit"]')获取全部提交控件，逐个设btn.disabled = true - 禁用前先调
form.checkValidity()，避免校验失败后按钮被永久锁死 - 不要用内联
onsubmit="..."，它难维护、无法统一管理状态 - 禁用后建议改文案（如
btn.textContent = '提交中…'），提供明确反馈
fetch 场景下必须配 AbortController 防并发请求
按钮禁用只拦 UI，挡不住快速点击触发的多个并发 fetch 请求。尤其在慢网或接口延迟高时，用户点两下，后端就收到两个请求。
立即学习“前端免费学习笔记（深入）”；
- 声明全局变量
let currentController = null - 每次提交前执行
currentController?.abort()，再新建new AbortController()并赋值 - 把
currentController.signal传进fetch的options -
catch中显式判断err.name === 'AbortError'，避免把中止当成业务错误上报 - IE 不支持
AbortController，老项目需降级用Promise.race([fetch(), timeoutPromise])
隐藏字段里的 submit_token 只是运输载体，关键在后端消费逻辑
<input type="hidden" name="submit_token" value="..."> 本身不防重。token 必须由后端生成、绑定 session、一次有效，且校验通过后必须立刻销毁。
- token 生成必须服务端完成（如 PHP 的
bin2hex(random_bytes(16))），不能是Math.random()或时间戳哈希 - 必须存入
$_SESSION['form_token']或 Redis（带过期时间），并绑定当前用户 session 和表单类型 - 提交时比对
$_POST['submit_token'] === $_SESSION['form_token']，通过则立刻unset($_SESSION['form_token'])或DEL - 最容易被忽略的是：token 校验通过后没
unset或DEL，导致后续请求仍能通过
复杂点不在前端怎么禁按钮，而在后端 token 的生命周期管理是否严格——生成、传输、校验、销毁，四步缺一不可。任何一步松动，前端做得再细也白搭。
