验证同一页面上的多个Recaptcha（V2）

Question

当同一页面上有多个Recaptcha客户端时，我想知道如何验证Recaptcha客户端。 我发现了这个https://stackoverflow.com/a/28607943/5649602 ，当我有一个时，这还可以。

但是现在我在每个页面的站点上都有一个愚人节，并且在某种注册表格中有一个站点，因此有可能同时出现主题。

我将不胜感激。 谢谢。 :)

Answer 1

验证g-captcha验证的最简单方法

首先，如下所示，将api.js放在</head>标记之前

<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, },
    },
});