如何在用户已检查Google Recaptcha中的复选框的js中签入？

78

我在结尾之前添加了以下内容

<script src='https://www.google.com/recaptcha/api.js'></script>

我在表格结尾之前添加了此内容

<div class="g-recaptcha" data-sitekey="== xxxxxx =="></div>

我可以看到类似于https://developers.google.com/recaptcha/的Recaptcha

但是，当用户在不选中复选框的情况下按下数据时，将提交数据。是否需要添加其他代码来检查用户是否已按下复选框？希望在js中？

— 你好宇宙
source

1

您是否阅读过以下页面：developers.google.com/recaptcha/docs/verify

— Daniel A. White

yeep ..虽然似乎无法弄清楚如何使它工作

— 你好，宇宙

您应该在后端服务器上提出要求。浏览器单独执行此操作并不十分安全。

— 丹尼尔·怀特

那也行。如何从前端请求，也许使用jQuery？

— 你好环球

186

选中此复选框时，Google会提供一个回调选项。

将此添加到您的表单元素：

data-callback="XXX"

例：

<div class="g-recaptcha" data-callback="recaptchaCallback" data-sitekey="== xxxxxx =="></div>

以及您的提交按钮的禁用属性。

例：

<button id="submitBtn" disabled>Submit</button>

然后创建一个回调函数并编写所需的任何代码。

例：

function recaptchaCallback() {
    $('#submitBtn').removeAttr('disabled');
};

— slinky2000
source

1

@mohanenb：只是为了防止发送，并不意味着不像往常那样检查服务器端。

— Halfbit '17

2

如何解决超时问题？如果有人检查了reCaptcha，然后几分钟不提交表单，则reCaptcha将过期，但用户仍然可以提交表单..！

— Akshay Kapoor

2

@AkshayKapoor数据过期的回调

— xinthose

4

请注意将函数recaptchaCallback（）放置在document.ready之外，以便验证码控件可以访问该函数。否则，您将收到console.log错误，例如“ ReCAPTCHA找不到用户提供的功能：”。

— ForTheWin '18

1

该解决方案只调用时验证码的功能是解决了，但是并没有提供的功能来检查验证码是否被解决。

— 若奥·皮门特尔·费雷拉

71

您也可以调用grecaptcha对象进行检查。grecaptcha.getResponse();未选中时为空，选中时具有验证码。

grecaptcha.getResponse().length === 0 未选中时

function isCaptchaChecked() {
  return grecaptcha && grecaptcha.getResponse().length !== 0;
}

if (isCaptchaChecked()) {
  // ...
}

— 奥拉富·崔格瓦森（Olafur Tryggvason）
source

但是，如何获取grecaptcha.getResponse（）？

— Nitin Dhomse

载入Google的Recaptcha后即会载入。包装的一部分

— Olafur Tryggvason

我尝试但不工作，控制台调试说>>“ Uncaught ReferenceError：未定义grecaptcha”

— silvachathura

脚本应首先加载Recaptcha，尝试使其异步或使用setTimeout

— Denys Klymenko

2

var isCaptchaChecked = (grecaptcha && grecaptcha.getResponse().length !== 0);

— jaybro

8

要检查是否已选中google recaptcha，可以通过以下代码进行操作：

<script>

if(grecaptcha && grecaptcha.getResponse().length > 0)
{
     //the recaptcha is checked
     // Do what you want here
     alert('Well, recaptcha is checked !');
}
else
{
    //The recaptcha is not cheched
    //You can display an error message here
    alert('Oops, you have to check the recaptcha !');
}

</script>

— 穆斯塔法·格里西
source

4

要检查是否已选中google recaptcha v2，可以通过以下代码进行操作：

var checkCaptch = false;
     var verifyCallback = function(response) {
        if (response == "") {
             checkCaptch = false;
         }
         else {
             checkCaptch = true;
         }
     };
     $(document).ready(function() {
         $("#btnSubmit").click(function() {
             if (checkCaptch && grecaptcha.getResponse()!="") {
                  //Write your success code here
             }
         });
     })

— 曼尼斯·瓦德（Manish Vadher）
source

3

让浏览器为您完成工作！（基于slinky2000答案）

注意：这仅是为了防止发送“意外”的未经检查的验证码。您仍然必须在服务器端验证Recaptcha，因为Bot不在乎...

在required=true属性的正下方添加一个不可见的输入标签div.g-recaptcha。

<input id='recaptcha_check_empty' required tabindex='-1',
style='width:50px; height:0; opacity:0; pointer-events:none; 
position:absolute; 
bottom:0;'>

将两个宽度a括div起来position=relative;，使bottom:0;以上内容指向重新安装的底部。

现在，浏览器很好地要求填写此字段-指向摘要。

现在我们需要回调：

<div class="g-recaptcha" data-callback="recaptchaCallback" ...

和

function recaptchaCallback() { 
    $('#recaptcha_check_empty').val(1);
}

— 半位
source