Layui表单提交时如何防止用户重复点击提交按钮

提交按钮点击后应立即禁用并修改提示文字，验证通过后再发请求，AJAX全程保持禁用状态，成功或失败后均需恢复按钮，移动端需在touchstart阶段拦截，且禁用仅限按钮本身以免跳过layui校验。提交按钮点击后立刻禁用用户手快连点两次，后端就可能收到两份重复数据。最直接的解法是在 form.on('submit') 回调里，第一时间把提交按钮设为 disabled，并改个文字提示防止用户困惑。用 $(this).attr('disabled', 'disabled') 禁用按钮，别只靠 CSS 隐藏或加 loading 图标——那不阻止点击事件冒泡记得在表单提交成功或失败后，手动恢复按钮状态，否则用户刷新页面前无法再操作如果用了 layui.form.render() 重绘过表单，禁用状态可能丢失，得在渲染后重新设置 disabledLayui 的 form.verify 不校验已禁用字段禁用按钮本身不影响验证，但如果你顺手把整个 form 或关键输入框也禁用了（比如为了防二次输入），layui.form.verify() 会跳过这些字段——导致必填项没报错就提交了。只禁用提交按钮，不要禁用 input、select 等表单项验证逻辑必须在禁用按钮前执行，否则可能绕过校验直接发请求若用了异步验证（如用户名是否已存在），得等 done(true) 后再禁用按钮，否则会提前锁死 UI后端返回前保持按钮禁用状态前端禁用只是第一道防线，真正要防住重复提交，得确保从点击到收到响应全程按钮不可点。常见坑是：AJAX 请求发出去了，但还没收到响应时用户强制刷新或切走又切回，按钮状态丢失。 There’s An AI For That 全球领先的 AI 聚合器，收集10,225个AI工具，可用于超过2,548个任务。