ReCaptcha 2.0:如果重新验证成功,则启用回调上的Submit按钮


73

我有一个非常简单的表格,如下所示。我要这样做,以便“提交”按钮被禁用,并且仅用户成功完成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>

假设验证码是“提交”按钮之前的最后一件事,那么您将为访客带来延迟。如果禁用了javascript怎么办?
jeroen'5

1
@jeroen禁用javascript的人是一个极端的案例,为了避免垃圾邮件机器人,我愿意放弃。
Thanks_in_advance 2015年

1
方法实际上安全吗?没有任何类型的提交按钮,垃圾邮件机器人仍无法提交表单吗?
丹尼尔·布莱斯2015年

@ user1883050,您尚未将答案标记为正确。你有工作吗?
colecmc

有人在现实世界中测试过吗?我认为漫游器不需要提交按钮,它们使用表单url以及输入字段和帖子...或者这只是过程的一部分,不允许用户在未选中此复选框的情况下提交表单?
Gediminas

Answers:


145

我在测试站点上做了同样的事情。但是,我使用按钮而不是提交,因此在这里:

您必须添加属性data-callback="enableBtn"data-callback属性,以在完成recaptcha后执行指定的功能。

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

并将按钮的ID设置为您想要的任何ID,并将其设置为Disabled:

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

然后在javascript上创建一个启用按钮的功能

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

希望能帮助到你。


1
较小的更正(删除函数名称后的括号):<div class="g-recaptcha" data-sitekey="############-#####" data-callback="enableBtn"></div>
Caedmon 2015年

4
@ panda.o24真的很有帮助,对我有用。虽然有点困惑。调用回调时,验证码是否已经完全验证?如果是这样,您注册时所获得的密钥的目的是什么?我以为在回调Javascript中某个地方需要对Google进行Ajax调用?我说错了吗?
ifinlay

1
@ifinlay验证屏幕在运行时呈现到注入到DOM中的<iframe>中。iframe的内容负责致电Google并进行验证。您可以在服务器端执行相同的操作,但这需要密钥,也许是为了防止XSS?

3
您的意思是var enableBtn = function(){
mplungjan '16

14
data-expired-callback您还应该设置一个属性,如果用户等待时间过长并且验证码检查过期,则可以再次禁用该按钮。developers.google.com/recaptcha/docs/display
Blazemonger
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.