ReCaptcha 2.0：如果验证码验证成功，启用回调上的提交按钮。

Question

我有一个非常简单的表格如下。我想使提交按钮被禁用，并且只在用户成功完成ReCaptcha后启用之后。

我假设我需要一些Javascript / jQuery来实现这个功能。

对我来说，Google关于ReCaptcha 2.0的文档似乎非常稀疏和深奥。我会感激一些指针：

<form action="something.php" method="post">
    Name: <input type="text" size="40" name="name"><br><br>
    <div class="g-recaptcha" data-sitekey="############-#####"></div>
    <input type="submit" value="Submit" >
</form>

- thanks_in_advance

---

假设验证码是提交按钮之前的最后一项，那么您只会为访问者引入延迟。如果 JavaScript 被禁用了呢？ - jeroen

@jeroen 禁用 JavaScript 的用户是我愿意放弃的边缘情况，以避免垃圾邮件机器人。 - thanks_in_advance

这个方法真的安全吗？难道垃圾邮件机器人不仍然可以在没有任何提交按钮的情况下提交表单吗？ - daniel blythe

@user1883050，您还没有标记任何答案为正确。这个问题解决了吗？ - colecmc

有人在现实世界中测试过吗？我认为机器人不需要提交按钮，它们使用表单URL、输入字段和发布...或者这只是为了防止用户在未勾选框的情况下提交表单的程序的一部分？ - Gediminas Šukys

Answer 1

我在我的测试网站上也做了同样的事情。不过我使用了一个按钮而不是提交按钮，所以这里：

您必须添加属性 data-callback="enableBtn"，data-callback 属性会在 reCAPTCHA 完成后执行指定的函数。

<div class="g-recaptcha" data-sitekey="############-#####" data-callback="enableBtn"></div>

并将按钮的id设置为您想要的任何id，并将其禁用：

<input type="button" value="Submit" id="button1" disabled="disabled">

然后在JavaScript中创建一个函数来启用该按钮

 function enableBtn(){
   document.getElementById("button1").disabled = false;
 }

- panda.o24

---

小修正（删除函数名后的括号）：<div class="g-recaptcha" data-sitekey="############-#####" data-callback="enableBtn"></div> - Caedmon

@panda.o24真的很有帮助，这对我有效。但有点困惑。当回调被调用时，验证码是否已完全验证？如果是这样，那么注册时获得的秘钥有什么用途？我原本认为在回调Javascript中必须进行到Google的Ajax调用？我的理解是错误的吗？ - ifinlay

你的意思是 var enableBtn = function(){。 - mplungjan

还有一个data-expired-callback属性需要设置，如果用户等待太久导致验证码检查过期，它可以再次禁用按钮。 - Blazemonger

如果有人通过浏览器开发者工具启用了那个按钮会怎么样？ - Ankit Kumar Verma

Answer 2

如何在 enableBtn("signin") 中传递参数？

<div class="g-recaptcha" data-sitekey="############-#####" data-callback="enableBtn"></div>

- Hassan Khan