如何防止表单从客户端多次提交?

IT技术 javascript submit
2021-02-07 16:41:07

有时,当响应缓慢时,可能会多次单击提交按钮。

如何防止这种情况发生?

6个回答

使用不显眼的 javascript 在表单提交后禁用提交事件。这是一个使用 jQuery 的示例。

编辑:修复了在不单击提交按钮的情况下提交表单的问题。谢谢,一番。

$("body").on("submit", "form", function() {
    $(this).submit(function() {
        return false;
    });
    return true;
});
我通过不显眼的验证和 MVC 尝试了这个解决方案。首先调用 JS,它总是返回 false,然后调用验证。所以如果我的表单有一些验证错误,表单永远不会被提交!!
2021-03-16 16:41:07
效果非常好。我还想禁用提交按钮并替换提交按钮文本以显示用户提示。$(this).find("input[type='submit']").attr('disabled', 'disabled').val('submiting'); return true; });
2021-03-17 16:41:07
如果表单是通过在文本框中按 Enter 提交的怎么办?
2021-03-18 16:41:07
你甚至需要return true吗?我认为最初的提交应该没有那个。
2021-03-18 16:41:07
我相信return true如果省略是隐含的。
2021-04-08 16:41:07

我尝试了vanstee 的解决方案以及 asp mvc 3 unobtrusive 验证,如果客户端验证失败,代码仍在运行,并且表单提交被永久禁用。更正字段后,我无法重新提交。(见bjan的评论)

所以我像这样修改了 vanstee 的脚本:

$("form").submit(function () {
    if ($(this).valid()) {
        $(this).submit(function () {
            return false;
        });
        return true;
    }
    else {
        return false;
    }
});
有没有其他需要注意的副作用,或者这是否适合您在任何地方应用?
2021-04-09 16:41:07

通过让 onsubmit 处理程序隐藏提交按钮并将其替换为加载动画,可以非常优雅地实现客户端表单提交控制。这样用户就可以在他的动作(点击)发生的同一地点获得即时的视觉反馈。同时,您可以防止再次提交该表单。

如果您通过 XHR 提交表单,请记住您还必须处理提交错误,例如超时。您将不得不再次显示提交按钮,因为用户需要重新提交表单。

另一方面,llimllib 提出了一个非常有效的观点。所有表单验证都必须在服务器端进行。这包括多次提交检查。永远不要相信客户!这不仅是禁用 javascript 的情况。您必须记住,所有客户端代码都可以修改。有点难以想象,但是与您的服务器通信的 html/javascript 不一定是您编写的 html/javascript。

正如 llimllib 建议的那样,生成带有该表单唯一标识符的表单,并将其放入隐藏的输入字段中。存储该标识符。接收表单数据时,只有在标识符匹配时才对其进行处理。(还将标识符链接到用户会话并进行匹配,以提高安全性。)在数据处理后删除标识符。

当然,偶尔,您需要清理从未提交过任何表单数据的标识符。但很可能您的网站已经采用了某种“垃圾收集”机制。

这是一个简单的方法:

<form onsubmit="return checkBeforeSubmit()">
  some input:<input type="text">
  <input type="submit" value="submit" />
</form>

<script type="text/javascript">
  var wasSubmitted = false;    
    function checkBeforeSubmit(){
      if(!wasSubmitted) {
        wasSubmitted = true;
        return wasSubmitted;
      }
      return false;
    }    
</script>
使用 jQuery 非侵入式验证,首先调用阻塞脚本,然后调用验证,如果存在验证错误,则根本不提交
2021-04-01 16:41:07
<form onsubmit="if(submitted) return false; submitted = true; return true">
使用<form onsubmit="return (typeof submitted == 'undefined') ? (submitted = true) : !submitted">,或var submitted = false;在脚本的正确位置写入,以避免出现以下错误:Uncaught ReferenceError: submitted is not defined.
2021-04-11 16:41:07