前端限制表单提交频率不能代替后端幂等校验，但能减少无效请求、改善体验；必须监听form submit事件并preventdefault，禁用全部提交控件，结合checkvalidity、abortcontroller中止未完成请求，并配合后端生成的一次性submit_token及幂等设计。
前端限制表单提交频率不能代替后端幂等校验，但能显著减少无效请求、改善用户体验。关键不是“拦住所有重复”，而是“让 UI 和请求流协同不打架”。
监听 submit 事件而非按钮点击
只给按钮绑 onclick 或用内联 onsubmit，会漏掉回车提交、form.requestSubmit() 调用、外部 <button form="xxx"></button> 等合法提交路径。
- 必须监听
<form></form>元素的submit事件，这是唯一覆盖全部触发方式的入口 - 在回调里第一件事是
e.preventDefault()，否则默认跳转或刷新会立刻发生 - 禁用操作要作用于所有提交控件：
form.querySelectorAll('button[type="submit"], input[type="submit"]')，不能只禁当前点击的那个 - 如果表单含必填校验，记得先调
form.checkValidity()；校验失败就别禁用按钮，否则用户无法修改重试
用 AbortController 中止上一个未完成请求
按钮禁用只锁 UI，挡不住用户快速连点下已发出的多个 fetch 请求——尤其在网络慢、接口响应长时，后端可能收到并发请求。
- 声明一个全局变量
currentController（类型为AbortController） - 每次提交前执行
currentController?.abort()，再新建实例赋值：currentController = new AbortController() - 把
currentController.signal传进fetch的options，并在catch中显式过滤AbortError，避免误报业务异常 - IE 不支持
AbortController，老项目需降级：用Promise.race([fetch(), timeoutPromise])模拟中止逻辑
submit_token 必须由后端生成且一次性消费
前端所有控制都可被绕过。真正防重靠后端，但随便塞个 Math.random() 进隐藏字段等于没做。
-
submit_token需由后端生成（如带签名的 UUID），有效期建议 5–15 分钟 - 必须绑定当前用户
session_id和具体表单类型（如user_register_form），不可跨表单复用 - 服务端收到后，先查 Redis/DB 是否存在且未使用；校验通过立即标记为“已消费”，再次提交返回
400 Bad Request - 若用
fetch提交，需手动取document.querySelector('[name="submit_token"]').value拼进请求体，不能依赖表单自动携带
最容易被忽略的是：表单重置（form.reset()）会把已设 disabled 的按钮重新启用，导致防重失效；而服务端若没做幂等设计，前端再严也白搭。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
