表单防重复提交必须监听form的submit事件批量禁用所有type="submit"控件，配合form.checkvalidity()校验、fetch+abortcontroller中止并发请求及后端submit_token幂等校验，缺一不可。
submit事件中禁用所有type="submit"按钮
按钮双击触发重复提交，本质是submit事件被多次执行。唯一可靠入口是监听form的submit事件，而不是给按钮绑click。因为回车、JS主动调用requestSubmit()等路径都绕不开这个事件。
常见错误是只禁用一个按钮，但表单可能有多个提交入口（如“保存”“保存并退出”）。正确做法是批量操作：
- 用
form.querySelectorAll('button[type="submit"], input[type="submit"]')选中全部提交控件 - 禁用前建议先调用
form.checkValidity()，避免校验失败时误锁按钮 - 禁用后必须在请求完成（无论成功或失败）时恢复，否则用户无法重试
- 不要用
form.submit()，它绕过事件机制；改用form.requestSubmit()，兼容性需留意（Safari 15.4+起支持）
fetch提交时必须配AbortController防并发
用fetch替代原生提交时，单纯禁用按钮不够——用户快速点击后网络延迟导致多个请求已发出，按钮虽灰但后端仍在收包。
关键是在每次提交前中止上一次未完成的请求：
Claude风格HTML汇报文件
下载
生成Claude风格的精美单页HTML汇报文件。当用户需要生成"汇报"、"周报"、"月报"、"项目进度"、"复盘"、"演示"、"slide deck"、"状态报告"、"工作总结"时触发。支持6种模板：周报(weekly)、项目进度(project)、月度总结(monthly)、复盘报告(postmortem)、演示文稿(slid
- 声明一个全局
currentController变量，类型为AbortController - 提交前先执行
currentController?.abort()，再新建实例并传入signal选项 -
catch中过滤AbortError，避免把中止当业务错误上报 - 注意：
AbortController不兼容IE，老项目需降级为Promise.race([fetch(), timeoutPromise])
服务端submit_token必须绑定session且一次性消费
前端禁用只是用户体验优化，真正防重靠后端。随便用Math.random()生成的隐藏字段值毫无意义，攻击者可直接复用。
有效submit_token需满足三个硬性条件：
- 由后端生成，签名不可伪造，有效期5–15分钟
- 绑定当前用户
session_id和表单类型（如order_form），不能跨表单复用 - 提交时校验通过后立即在服务端标记为“已使用”，再次提交返回
400 Bad Request - 若用
fetch提交，需手动取document.querySelector('[name="submit_token"]').value拼进body，不能依赖表单自动携带
别信onclick内联禁用，它漏掉回车和多按钮场景
写成<button onclick="this.disabled=true; submitForm()"></button>看着快，但问题明确：
- 回车触发表单提交时，
onclick根本不会执行 - 多个
type="submit"按钮时，只禁了当前这个，其他按钮仍可点 - 请求失败后按钮永远卡死，没有恢复逻辑
- 违反HTML/JS分离原则，后续加校验、埋点、A/B测试都得改HTML
真实项目里，最易被忽略的是移动端软键盘“搜索”键误触——它等价于点击第一个type="submit"按钮，而你的onclick根本监听不到。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
