如果用户已经在粘贴 7 分钟内单击了“提交”按钮，则禁止用户单击该按钮 [关闭]答案

【问题标题】：Disable users from clicking the Submit button if he already clicked it in the paste 7 minutes [closed]如果用户已经在粘贴 7 分钟内单击了“提交”按钮，则禁止用户单击该按钮 [关闭]
【发布时间】：2014-02-03 06:12:26
【问题描述】：

我想禁用“提交”按钮 7 分钟，并且我想在表单旁边显示一条文字：“等待 7 分钟后再提交”。当倒计时结束时，我想要一条文字说“你现在可以提交”。

<form action="" method="post" name="myform" id="myform" onsubmit="return formSubmit(this);" class="form-wrapper cf">
    <input name="statusid" autocomplete="off" id="statusid" placeholder="Enter ID" required="" type="text">
    <button name="submit_btn" class="submit" id="submit_btn" type="submit">Submit</button>
</form>

【问题讨论】：

你自己尝试了什么？而且您知道任何人即使对 Web 开发有一点点精通，也可以在几秒钟内绕过这种“安全性”？
我用谷歌搜索过这个问题，但没有找到任何按钮提交的代码，我发现的只是一个输入提交。
“我已经用 Google 搜索了” 不是一个尝试的解决方案。您已经自己编写了哪些代码来尝试解决这个问题？
我已经制作了一个表格，但是在我刚刚问的问题中它只是显示“提交”，这是表格：
以后，请尝试使用jsfiddle.net 处理任何代码。

标签： javascript php jquery html forms

【解决方案1】：

安全地执行此操作的唯一方法是使用服务器端验证。这意味着服务器必须存储用户上次单击提交按钮时的某个位置（最好是数据库）。这也意味着您需要一个用户帐户系统。

显然，您可以在提交成功时更新上次点击的时间。如果不成功，您可以返回剩余分钟数，并让 JavaScript 从中创建倒数计时器。但是，计时器应该只是为了方便。是否经过足够时间的实际验证应该是纯粹的服务器端。

从技术上讲，您可以在 JS 中实现这一点，使用 cookie 来跟踪用户，但是很容易绕过（删除 cookie 或修改页面的源）。你不应该在 JS 中这样做。

【讨论】：

这就是我想要的，但它的代码是什么？对不起，我是新手，不擅长数据库和其他东西:)
那么在这个问题变得相关之前，你还有很多东西要学。该站点不是在单个帖子中教您数据库、身份验证等的论坛。做一些研究，阅读一些书籍，然后当您有具体问题要问时，我们非常欢迎您在这里发帖以获得答案。
这样不行。我们永远不知道您在服务器端使用什么。什么语言，数据库等
@user3184573 此处的单个帖子中的代码太多。你有使用服务器端语言的经验吗（PHP、带有 Node.js 的 JS、带有 Django 的 Python 等）？你需要学习其中之一。服务器端语言将与数据库交互。使用的确切方法取决于语言。例如，PHP 将使用MySQLi class。
如果您想在数据库中存储用户的信息，那么您还有很多工作要做/学习。开始使用 MySql/PHP (WAMP)（它是免费的），然后在您能够展示基本理解并展示一些 PHP/MySql 代码时回来提出您的问题。

【解决方案2】：

我在另一个答案的 cmets 中看到您使用的是 PHP 但不是数据库。如果这就是您想要使用的全部，那么您可以采用这种方法....

(1) 当用户单击按钮并提交表单时，您需要设置一个 PHP 会话变量来保存当前时间。因此，如果用户提交表单说doSomething.php，那么您正在处理表单数据集$_SESSION['formSubmitTime'] = microtime(true);

(2) 然后返回包含您阅读的表单$_SESSION['formSubmitTime'] 的页面，并将其与当前时间进行比较。如果超过 7 分钟，请打开按钮。

$time_end = microtime(true);
$secondsElapsed = $time_end - $_SESSION['formSubmitTime'];

echo "Form submitted $secondsElapsed seconds ago\n";

如果$secondsElapsed 大于 420 则显示按钮，否则禁用它。

(3) 这应该可以带你去你想去的地方。但是您可以更进一步，不需要他们刷新页面。为此，您必须执行上面的代码，然后根据已经过去的秒数从正确的数字开始设置 JavaScript 倒计时。所以可以说上面的$secondsElapsed 是 100 秒。然后你会有 JavaScript 代码在 320 秒 (420sec=7min) (420-100=320sec) 后执行 setTimeout。所以看起来像这样......setTimeout(function(){ /*your code to turn the button back on*/ },320000);

更新 -- 感谢您发布表单代码。这是一个更完整的例子。（这是快速免费输入的，因此可能有一些拼写错误，但应该足以让您指出正确的方向。）希望这会有所帮助。

<script>
    function allowSubmit(){
        //change the text
        $("#msgText").text('You can submit the form again.');
        //enable the button
        $("#submit_btn").removeAttr('disabled');
    }
</script>

<?php
//If $_SESSION['formSubmitTime'] is not defined then that means they have never submitted.  So they don't have to wait
if (!isset($_SESSION['formSubmitTime']))
{
    $secondsToWait = 0;
}
else
{
    $time_end = microtime(true);
    $secondsElapsed = $time_end - $_SESSION['formSubmitTime'];  //remember to set this back on the page you post to
    $secondsToWait = 420-$secondsElapsed;
}

echo'
<form action="" method="post" name="myform" id="myform" onsubmit="return formSubmit(this);" class="form-wrapper cf">
    <input name="statusid" autocomplete="off" id="statusid" placeholder="Enter ID" required="" type="text">
    <button name="submit_btn" class="submit" id="submit_btn" type="submit" '.$secondsToWait > 0?"disabled":"".'>Submit</button>
</form>';

if ($secondsToWait > 0)
{
    echo'<span id="msgText">You must wait '.$secondsToWait.' seconds.</span>
    <script>setTimeout(function(){ allowSubmit() },'.$secondsToWait.'000);</script>';
}
else
    echo'<span id="msgText">You can submit the form again.</span>';
?>

【讨论】：

这是一个快速的解决方案，对他来说可能就足够了，但请记住，无论如何它并不安全。
对，只是用他能理解的方式回答。
嗨@gfrobenius，我已经完成了第 1 步和第 2 步，但我不太明白“如果 $secondsElapsed 大于 420 则显示按钮，否则禁用它”。部分，你能给我解释一下吗？谢谢 :) 我真的很感激！
@user3184573 直接跳到完整的例子。在您发布表单后，我发布了该更新。使用该代码。 @MaciejPaprocki 这里不安全，没有 XSS 可能性，因为 $secondsToWait 只会保存数字。
嗨@gfrobenius，你能在Skype上加我吗？我的 id: sajadleo 我会给你看我的网站和我那里的表格，你可以查看源代码并查看我的整个表格，如果我们可以在 Skype 上讨论那将是很棒的，非常感谢！ :)

【解决方案3】：

即使这个问题是在没有任何说明的情况下提出的，我想我可能会得到一些提示来帮助其他人。我将这件事称为事件锁定问题:)。

首先没有适当的授权（封闭注册或facebook gmail等）。它永远不会真正安全。问题是你能做些什么来让它更难被破坏。

最容易做和最容易被破坏的就是js脚本。使用 jQuery('button').prop('disable',true)（来自 jQuery 库）禁用按钮 7 分钟而不是添加 setTimeout(function(){jQuery('button').prop('disable',false)}) 应该可以解决问题。但是要突破这一点，您只需要 js 控制台甚至 firebug。以更好的方式，您还可以在禁用按钮上添加 cookie，并在启用按钮时检查它。但是控制台和萤火虫将再次获胜。

我们可以添加的另一个安全性已经使用了后端技术。

1.我们通过创建文件或数据库记录来开始倒计时（我强烈建议使用数据库，但有时你没有或只是不使用其他任何地方的数据库）有两件事：从现在开始调用唯一键id（每次都不同，例如AUTO_INCREMENT）和时间戳（如果我们有多个按钮或事件，我们也可以使用事件/按钮id）。然后我们将这个唯一的 id 作为 cookie 发送到用户浏览器（如果我们有多个事件，我们发送对 id 和按钮/事件 id）。 2.在前端，我们创建脚本，如第一种情况一样添加。用户单击按钮后，后端脚本检查 cookie 中的 id 是否具有超过 7 分钟的时间戳，如果是，则通过文件。如果不是，它返回错误或任何你想要的。我们还可以添加 ajax 以每 30 分钟检查一次，例如在这种情况下，如果有人关闭浏览器，或者我们总是可以向他们显示适当的剩余时间，那么在这种情况下还剩下多少。使用唯一 id 的时间越长（越难），脚本就越强大，因为尝试使用不同用户使用的某个 id 会更加困难。如果使用前面提到的AUTO_INCREMENT，您可以将这个 id 散列为一些复杂的字符串。

此解决方案将阻止 90% 的垃圾邮件发送者。但主要是因为 90% 的人对编码一无所知。实际上，在编写机器人时，处理 cookie 从未如此简单。

另一种方法是将用户的 IP 添加到您的记录（仅 DB 选项）中。在这种情况下，他们将无法捕获其他人的 cookie，因为他们还必须捕获他们的 IP，这已经非常困难了。这也将消除这些可以等待 7 分钟但不想再等待一分钟后下载的人。例如，通过启动计数器 1000 次，然后在 7 分钟后获得 1000 个结果（这应该需要 7000 分钟）。对同一 IP 上的每个人只发出一个请求就足够了。然而，这有一些缺点。例如，如果两个人使用同一个 wifi 会发生什么？其中一个将被锁定 7 分钟。

最后也是最糟糕的方法是使用授权。使用用户 ID 并将其与时间戳一起存储，而不仅仅是检查具有此 ID 时间戳的用户是否花费了超过 7 分钟。但是，如果我们的系统没有正确完成，使用机器人注册新帐户并不难。这就是为什么封闭式注册（用户不能自己注册，而您正在手动检查他们的可信度）更好的原因。您还可以使用社交资料。但是注册是开放的，但整个过程要困难得多，而且由于管理员检查他们的访问权限，假帐户一直在关闭。

我希望这篇文章对某人有所帮助。这是我在这里的第一篇文章，也是我花了这么多时间的第一篇文章，所以我非常感谢一些反馈，当然还有如何改进我的答案的建议。如果这将被删除，因为质量问题我会添加它作为提示:)

【讨论】：