Question

我有一张表格，我可以从Google重新获得以下内容：

<div class="g-recaptcha" data-sitekey="6Lf-jgQTAAAAAGgYwYOOjGAQRFQKqTx_6FCcUYM_"></div>

当表单页面在浏览器中加载时，它将替换为iframe，其中有一个复选框，并且＃34;我不是机器人＆＃34;。提交表单时，服务器端将在名称下收到一个值：g-recaptcha-response。

如何设置验证插件，使人们可以点击“我不是机器人”＃34;复选框？

谢谢！

更新

根据@ WpSEO.it提供的解决方案，以下是我的案例：

HTML

        <div id="g-recaptcha" class="g-recaptcha"></div>
        <input type="text" name="GrcResponse" value="" style="margin-left: -9999px;height: 1px;">

请注意，我无法通过CSS将GrcResponse字段（不是＆＃34; grc-response＆＃34;如所选答案中）隐藏或显示：none，因为我发现validate插件不会检查此字段我做到了。

Javascript（验证插件）

$（＆＃39;＃myForm的＆＃39）。验证（{ 规则：{ GrcResponse：{ 要求：是的 } } }）;

希望这有帮助！

Answer 1

我做了一个小技巧来解决这个问题。 Yoi可以使用带有显式渲染的JS API Callback。在DOM上你可以放一个隐藏的字段。在加载ReCaptcha之后，它设置了一个＆＃34; recaptcha-token＆＃34;使用＆＃34; gc-response＆＃34;的值。在js回调中，您可以设置一个读取该值的函数，并将其作为另一个元素的值（例如隐藏按钮）。

现在使用jquery或similars可以读取隐藏的按钮值，因此，您可以阅读验证所需的gc响应;）

示例：

1）使用显式模式包含ReCaptcha API JS：

<script src=”https://www.google.com/recaptcha/api.js?onload=onloadCallback&hl=it&render=explicit” async defer></script>

2）在同一页面中添加隐藏字段

<input type="hidden" name="grc-response" value="">

3）渲染ReCaptcha

<script type=’text/javascript’>
var captchaContainer = null;
var onloadCallback = function() {
     captchaContainer = grecaptcha.render(‘captcha_container’, {
         ‘sitekey’ :‘XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX’,
         ‘callback’ : function(response) {
              $("input[name=grc-response]").val(response);
         }
     });
};
</script>

在渲染Recaptcha（步骤3）时使用此代码，您可以管理响应并使用它。当用户完成Catpcha验证时，js代码将调用：

$("input[name=grc-response]").val(response);

和＆＃34;响应＆＃34;值将被设为隐藏字段的值＆＃34; grc-response ＆＃34;

现在你可以阅读jQuery或类似的Recaptcha响应来读取这个隐藏字段的值。在jQuery中，代码是：

var grecaptcha=$("input[name=grc-response]").val();

Answer 2

最简单的方法是在提交之前检查：

  if (grecaptcha.getResponse() == "") {
                Alert("Please  click on Captcha")
                return;
            }

JQuery Validate插件：如何才能使Google reCapture点击成为必需？

2 个答案: