表单提交后怎么防止用户重复点击提交按钮？
我做了一个用户注册的表单，提交时用的是 fetch 发请求。但发现如果用户手快连点几次“注册”按钮，就会发好几次请求，后端收到了重复数据。我已经试过在点击后给按钮加 disabled，但有时候网络慢，按钮还没变灰就又点了一次，还是防不住。
现在想找个靠谱的办法彻底阻止重复提交，是不是得结合 loading 状态或者加个提交锁？比如这样：
let isSubmitting = false;
form.addEventListener('submit', async (e) => {
e.preventDefault();
if (isSubmitting) return;
isSubmitting = true;
try {
await fetch('/register', { method: 'POST', body: new FormData(form) });
} finally {
isSubmitting = false;
}
});但不确定这种做法有没有坑，比如页面刷新或者用户中途关闭会不会导致状态卡死？有没有更稳妥的方案？
- 2
回答
17浏览
表单提交后怎么防止用户重复点击？
我做了一个注册表单，用户点提交后如果网络慢，可能会狂点好几次，结果数据库里插入了多条重复数据。试过在提交后禁用按钮：btn.disabled = true，但有时候请求失败了，按钮就一直禁用，用户没法...
- 2
回答
51浏览
Vue表单提交时怎么防止重复点击还是无效？
在做一个用户注册表单时，我给提交按钮加了isLoading状态控制禁用，但测试时发现：如果连续快速点击提交按钮，后端接口还是被多次调用了。 我试过在点击时立刻设置isLoading为true，但发现如...
- 2
回答
14浏览
按钮点击后怎么立刻给用户视觉反馈？
我做了一个提交按钮，用户点下去的时候感觉没反应，等接口返回才变样式，体验很差。我想在点击瞬间就变色或者加个loading，但试了用:active伪类，效果一闪就没了，根本来不及看到。是不是得用JS？ ...
- 2
回答
21浏览
表单提交后怎么给用户有效的结果反馈？
我做了一个登录表单，提交后如果失败只是在控制台打了个 log，用户根本不知道发生了啥。想加个提示但不知道怎么设计才不突兀。 试过在页面顶部加个红色文字，但样式老是和其他组件打架，而且一闪就没了。下面是...
- 2
回答
43浏览
表单验证函数在提交时没有触发怎么办？
大家好，我正在做一个用户注册表单，想用JS验证邮箱格式。按照教程写好了验证函数，但点击提交按钮时验证完全没反应，直接跳转页面了。 我尝试过在表单加了onsubmit调用验证函数，但好像没生效。代码是这...
- 1
回答
41浏览
表单提交失败后怎么优雅地恢复用户输入？
我做了一个带校验的注册表单，用户填完点提交，结果网络出错，页面刷新了，所有输入都没了。这体验太差了，用户肯定要骂人。 试过用 sessionStorage 临时存字段，但不知道该在什么时候清理，而且如...
- 2
回答
22浏览
二次确认弹窗怎么阻止默认提交行为？
我在做一个表单删除功能，点了删除按钮后想弹出二次确认，用户点“确定”才真的提交。但不管我怎么写，confirm 弹窗一出来，表单就直接提交了，根本没等我点确认。 我试过在按钮的 onclick 里加 ...
- 1
回答
18浏览
按钮点击后怎么加个视觉反馈效果？
我做了一个提交按钮，用户点完没反应，想加个点击后的视觉反馈，比如颜色变一下或者加个 loading 动画，但不知道怎么实现才合理。 试过用 :active 伪类改背景色，但效果太短暂，用户根本注意不到...
- 2
回答
37浏览
点击按钮后引导说明层无法隐藏怎么办？
我在做表单引导功能时，给新手用户添加了引导说明层，但点击关闭按钮后样式没变化。按照文档写了个toggle类名的方法，检查了代码也没发现语法错误，但就是不生效： document.querySelect...
- 2
回答
95浏览
二次确认弹窗连续点击怎么阻止重复提交？
我在做一个订单删除功能，用了二次确认弹窗，但用户如果连续快速点击删除按钮，会连续弹出多个确认框。试过给按钮加disabled属性，但因为确认框是同步弹出的，按钮样式没及时更新。用过setTimeout...
暂无解答