如何检查用户已选中 Google recaptcha 中的复选框的 js?

IT技术 javascript jquery checkbox recaptcha
2021-03-21 13:16:51

我在头部结束前添加了以下内容

<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中?

6个回答

当复选框被选中时,谷歌有一个回调选项。

将此添加到您的表单元素中:

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');
};
如何解决超时问题?如果有人检查了 reCaptcha,然后几分钟内不提交表单,那么 reCaptcha 将过期,但用户仍然可以提交表单..!
2021-04-23 13:16:51
@mohanenb:只是为了防止发送,并不意味着像往常一样不检查服务器端。
2021-05-08 13:16:51
@AkshayKapoor数据过期回调
2021-05-10 13:16:51
只需将函数 recaptchaCallback() 放在 document.ready 之外,以便验证码控件可以访问它。否则,您将收到 console.log 错误,例如“ReCAPTCHA 找不到用户提供的函数:”。
2021-05-15 13:16:51
该解决方案只调用时验证码的功能解决了,但是并没有提供的功能来检查验证码是否解决。
2021-05-17 13:16:51

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

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

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

if (isCaptchaChecked()) {
  // ...
}
var isCaptchaChecked = (grecaptcha && grecaptcha.getResponse().length !== 0);
2021-04-23 13:16:51
脚本应该首先加载recaptcha,尝试异步或使用setTimeout
2021-05-02 13:16:51
只要您加载谷歌的recaptcha,它就会加载。包裹的一部分
2021-05-09 13:16:51
但是,如何获得 grecaptcha.getResponse()?
2021-05-10 13:16:51
我试过但没有工作,控制台调试说>>“未捕获的 ReferenceError:grecaptcha 未定义”
2021-05-17 13:16:51

要检查是否检查了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>

要检查是否检查了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
             }
         });
     })

让浏览器为您完成工作!(基于 slinky2000 答案)

注意:这只是为了防止“意外”发送未经检查的验证码。您仍然需要在服务器端验证 recaptcha,因为机器人不在乎......

添加一个不可见的输入标签,其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;上方指向recaptcha 的底部。

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

现在我们需要回调:

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

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