必须禁用按钮并配合后端幂等校验：前端在submit事件中立即设置button.disabled=true并修改文案，同时后端需通过请求指纹、数据库唯一索引或request_id实现幂等控制，防止重复提交。
表单提交后如何防止重复点击
用户点一次“提交”就发两三次请求，是权限申请入口最常出问题的地方。根本原因是没禁用按钮或没加防抖逻辑。
推荐在 submit 事件里直接禁用按钮，并用 disabled 属性锁定 UI：
document.getElementById('applyForm').addEventListener('submit', function(e) { e.preventDefault(); const btn = document.getElementById('submitBtn'); btn.disabled = true; btn.textContent = '提交中...'; // 这里发 fetch 或 submit 表单});
- 别只靠前端禁用——后端仍需校验重复提交（比如用
request_id去重） - 如果用了
fetch，记得在finally里恢复按钮状态，否则失败后用户没法重试 - 不要用
setTimeout模拟“防抖”，它不解决真实并发问题
如何让表单字段满足权限申请的基本校验
权限申请不是普通留言，必须确保申请人填了工号、部门、申请权限类型这些关键字段。HTML5 的 required 和 pattern 能覆盖大部分场景，但别全依赖它们。
示例字段写法：
<input name="emp_id" required placeholder="请输入工号"><br><select name="permission_type" required><br> <option value="">请选择权限类型</option> <br> <option value="read_db">数据库只读</option> <br> <option value="deploy">发布权限</option> <br></select>
-
required对<select></select>生效的前提是默认<option></option>的value为空字符串 - 邮箱、手机号建议用
type="email"或type="tel"，但 iOS Safari 对pattern支持差，得补 JS 校验 - 工号这类业务字段，前端正则（如
pattern="[A-Z]{2}\d{6}"）只是辅助，后端必须做相同规则校验
提交到哪里？用 fetch 还是原生 form action
权限申请需要明确的响应反馈（比如“已提交，审批人：张三”），所以推荐用 fetch + JSON 接口，而不是跳转式 form action。
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
原因很实际：
-
form action提交后页面刷新，用户看不到返回的审批人、单号等信息 - 多数权限系统后端提供的是 REST API（如
POST /api/v1/permission-requests），不是传统 PHP/ASP 接收表单 -
fetch可以统一处理错误码：400返回字段错误，403返回无权提交，500提示稍后再试
注意点：
- 接口必须支持 CORS，否则浏览器会拦截；开发时可先配代理（如 Webpack DevServer 的
proxy） - 别把敏感字段（如申请人姓名）存在前端 JS 变量里传，应从表单实时取值，避免被篡改
- 如果后端只接受
application/x-www-form-urlencoded，用new URLSearchParams(form).toString()构造 body
为什么不能省略 CSRF Token
权限申请是高危操作，哪怕表单看起来只是“填个名字点提交”，也必须带 CSRF Token。否则攻击者构造恶意页面，诱导员工点击就能悄悄提交权限申请。
常见做法是后端在 HTML 里注入一个隐藏字段：
<input type="hidden" name="csrf_token" value="a1b2c3...">
然后前端提交时原样带上。关键点：
- Token 必须每次页面加载都刷新，不能复用旧值
- 别用 localStorage 存 Token——XSS 攻击能直接读取
- 如果用
fetch，也可以把 Token 放在headers里（如X-CSRF-Token），但需前后端约定一致
漏掉这一步，安全审计基本通不过。很多团队卡在这里，不是不会写，是误以为“内网小系统不用防”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
