点击提交按钮后应立即禁用并显示Loading：在form.on('submit')回调开头用prop('disabled',true)禁用按钮、加layui-btn-disabled类、改文字为“提交中…”；成功或失败后均须在complete钩子中统一恢复。
点击提交按钮后如何禁用并显示Loading
直接禁用按钮是最简单有效的防重复提交手段，layui 的 form.on('submit') 回调里必须手动操作按钮状态，否则默认不阻止二次点击。layui 按钮本身不自带 loading 状态，得靠修改 disabled 属性 + 插入图标或文字提示。
- 在
form.on('submit(your-filter)')回调开头，用$(this).addClass('layui-btn-disabled').html('<i class="layui-icon layui-icon-loading layui-anim layui-anim-rotate"></i> 提交中...') - 同时设置原生
disabled属性：$(this).prop('disabled', true)（仅靠 CSS 类不够，必须加 prop） - 提交成功或失败后，务必恢复按钮：
$(this).removeClass('layui-btn-disabled').html('提交').prop('disabled', false) - 注意：如果表单校验失败（比如
form.verify返回 false），也要主动恢复按钮，否则用户无法重试
Layui 的 form.submit() 调用后按钮状态是否自动重置
不会。Layui 的 form.submit() 是手动触发表单提交，并不接管按钮生命周期。它只负责序列化、校验、触发 submit 事件，后续按钮状态完全由你控制。
- 调用
form.submit()后，若没手动恢复按钮，按钮会一直卡在 loading 状态 - 异步请求（如
$.ajax）的done和fail两个分支都必须写恢复逻辑，漏掉任一路径都会导致按钮“假死” - 不要依赖
form.on('submit')的 return false 来中断流程——它只阻止默认提交，不阻止按钮状态延续
为什么用 layui-icon-loading 图标但不转圈
缺少动画类 layui-anim layui-anim-rotate，或者 CSS 被覆盖/未加载。Layui 的 loading 图标本身是静态的，旋转效果全靠这两个 class 驱动。
- 检查是否漏写了
layui-anim layui-anim-rotate—— 单独layui-icon-loading不会动 - 确认页面已引入 Layui 的动画 CSS（通常在
layui.css里，但某些精简版可能剔除了@keyframes layui-anim-rotate） - 避免用
display: inline-block强制撑开图标容器，Layui 的 icon 默认是inline，加 block 可能破坏居中和动画定位
服务端响应慢时用户强制刷新怎么办
前端 loading 只能防 UI 层重复点击，拦不住用户刷新页面。真正防暴力提交要靠服务端幂等设计，比如提交后跳转到结果页（Post-Redirect-Get），或用唯一 token 校验。
- 前端可加一层 sessionStorage 标记：
sessionStorage.setItem('submitting', 'true')，页面加载时检测并提示“检测到未完成提交，请勿刷新” - 但该方案不可靠——用户清缓存或换设备就失效，只能作为辅助提示
- 关键还是服务端：对同一表单 token 重复提交应返回 409 或明确错误，而不是重复插入数据
按钮 loading 效果只是第一道防线，真正卡住暴力点的，永远是后端对重复请求的识别和拒绝。前端做得再细，也绕不开这个事实。
