在同一页面上验证多个recaptcha（V2）

Question

我想知道如何在同一页上存在多个Recaptcha时在客户端验证它们。我找到了这个https://dev59.com/7F4c5IYBdhLWcg3wdKGT#28607943，当我只有一个时它是可行的。

但现在我的网站页面底部和某些注册表单中都有一个，因此存在同时出现的可能性。

我会感激任何建议。谢谢。:)

- cvetan

---

没有问题 - madalinivascu

如何定位特定元素？我怎么知道响应来自验证，比如注册表单，而不是页脚中的表单？ - cvetan

为每个reCAPTCHA使用不同的类。 - madalinivascu

是的，你需要一个不同的选择器。这个答案也可能有所帮助，因为它详细说明了基于Google reCaptcha文档的多个reCaptcha的代码：https://dev59.com/yF0b5IYBdhLWcg3wGN0s#29613089 - colecmc

我解决了。让我困惑的术语是文档中说的元素的HTML ID，或类似的东西。我一直在调用ID、类等等。事实上，当你初始化recaptcha时，你应该将语句保存到变量中，这就是你用于识别特定recaptcha的ID。无论如何，谢谢大家。 :) - cvetan

Answer 1

验证尽可能多的g-captcha的最简单方法

首先，按照以下方式在</head>标签之前包含api.js

<script src="https://www.google.com/recaptcha/api.js?onload=CaptchaCallback&render=explicit"></script>

将以下代码添加到你的HTML中

<div class="g-recaptcha-contact" data-sitekey="Your Site Key" id="RecaptchaField2"></div>
<input type="hidden" class="hiddenRecaptcha" name="ct_hiddenRecaptcha" id="ct_hiddenRecaptcha">

<div class="g-recaptcha-quote" data-sitekey="Your Site Key" id="RecaptchaField1"></div>
<input type="hidden" class="hiddenRecaptcha" name="qt_hiddenRecaptcha" id="qt_hiddenRecaptcha">

在您使用 <script> 标签将此代码添加到页脚后

var CaptchaCallback = function() {
    var widgetId1;
    var widgetId2;
    widgetId1 = grecaptcha.render('RecaptchaField1', {'sitekey' : 'Your Site Key', 'callback' : correctCaptcha_quote});
    widgetId2 = grecaptcha.render('RecaptchaField2', {'sitekey' : 'Your Site Key', 'callback' : correctCaptcha_contact});
};
var correctCaptcha_quote = function(response) {
    $("#qt_hiddenRecaptcha").val(response);
};
var correctCaptcha_contact = function(response) {
    $("#ct_hiddenRecaptcha").val(response);
};

最后一个简单步骤是开发人员按如下添加Jquery验证

$("#form_id").validate({
    ignore: [],
    rules: {
        ct_hiddenRecaptcha: { required: true, },
        qt_hiddenRecaptcha: { required: true, },
    },
});

- ImBhavin95

---

使用上述解决方案：您也可以在任何地方使用，而无需回调，例如EX#var widgetId1; widgetId1 = grecaptcha.render('RecaptchaField1', {'sitekey' : 'Your Site Key'});并且在您想要验证它的地方，只需使用grecaptcha.getResponse(widgetId1) - mk Mughal

Answer 2

我的解决方案，简单易行

在 </head> 标签之前添加

 <script src='https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit'></script>

将以下代码添加到您的HTML中：

<div class="g-recaptcha"></div>
---
<div class="g-recaptcha"></div>

并在页脚添加以下代码，使用<script>标签

  function onloadCallback() {
            $('.g-recaptcha').each(function (index, el) {
                grecaptcha.render(el, {
                    'sitekey': 'SITE-KEY',
                    'callback': function (response) {
                        el.getElementsByTagName('textarea')[0].innerText = response;
                    },
                });
            });
        }

- programm011