我在单一页上有两个表格。其中一个表格一直显示Recaptcha验证码，而另一个表格只有在特定事件发生后才会显示Recaptcha验证码，比如最大登录尝试次数超限。因此，在同一页上需要出现两个Recaptcha验证码的情况。这种情况可行吗？虽然我知道可能可以用一个Recaptcha验证码来解决，但是，基于我的布局方式，我更喜欢使用两个。谢谢。
更新：好吧，我想这可能不可能。有人能推荐与reCaptcha并排使用的其他验证码库吗？我真的很想在同一页上有两个验证码。
更新2：如果我将每个表格放在一个iframe中，这样做是否可行呢？
使用当前版本的Recaptcha (reCAPTCHA API version 2.0)，您可以在同一个页面上使用多个Recaptchas。
没有必要克隆Recaptcha或尝试解决问题。您只需为Recaptchas放置多个<div>元素，并在其中显式地呈现Recaptchas即可。
借助Google Recaptcha API，这很容易。以下是示例HTML代码：
<form>
<h1>Form 1</h1>
<div><input type="text" name="field1" placeholder="field1"></div>
<div><input type="text" name="field2" placeholder="field2"></div>
<div id="RecaptchaField1"></div>
<div><input type="submit"></div>
</form>
<form>
<h1>Form 2</h1>
<div><input type="text" name="field3" placeholder="field3"></div>
<div><input type="text" name="field4" placeholder="field4"></div>
<div id="RecaptchaField2"></div>
<div><input type="submit"></div>
</form>
在您的JavaScript代码中，您必须为Recaptcha定义一个回调函数：
<script type="text/javascript">
var CaptchaCallback = function() {
grecaptcha.render('RecaptchaField1', {'sitekey' : '6Lc_your_site_key'});
grecaptcha.render('RecaptchaField2', {'sitekey' : '6Lc_your_site_key'});
};
</script>
完成后，你的reCAPTCHA脚本URL应该像这样：
<script src="https://www.google.com/recaptcha/api.js?onload=CaptchaCallback&render=explicit" async defer></script>
或者，您可以为您的Recaptcha字段提供一个类名，使用您的类选择器循环这些元素并调用.render()，而不是给它们分配ID。
grecaptcha.getResponse(0) 和 grecaptcha.getResponse(1) 来验证多个实例的说明，我想要补充一点，就是索引必须与 grecaptcha.render 的排序相对应。例如，在此示例中，grecaptcha.render('RecaptchaField1'... 将使用 grecaptcha.getResponse(0) 进行验证，而 grecaptcha.render('RecaptchaField2'... 则将使用 grecaptcha.getResponse(1) 进行验证，以此类推。 - codacopiagrecaptcha.execute()时，回调函数仅针对第一个具有验证码的div进行调用，而不管您单击哪个位置。 - Eugen Konkov简单明了：
使用以下方式正常创建您的Recaptcha字段：
<div class="g-recaptcha" data-sitekey="YOUR_KEY_HERE"></div>
使用以下代码加载脚本：
<script src="https://www.google.com/recaptcha/api.js?onload=CaptchaCallback&render=explicit" async defer></script>
现在调用此函数来遍历字段并创建Recaptcha：
<script type="text/javascript">
var CaptchaCallback = function() {
jQuery('.g-recaptcha').each(function(index, el) {
grecaptcha.render(el, {
'sitekey' : jQuery(el).attr('data-sitekey')
,'theme' : jQuery(el).attr('data-theme')
,'size' : jQuery(el).attr('data-size')
,'tabindex' : jQuery(el).attr('data-tabindex')
,'callback' : jQuery(el).attr('data-callback')
,'expired-callback' : jQuery(el).attr('data-expired-callback')
,'error-callback' : jQuery(el).attr('data-error-callback')
});
});
};
</script>
grecaptcha.render(el, {'sitekey' : $(el).attr('data-sitekey') });。 - Gkiokan这个答案是对@raphadko的答案的扩展。
如果你需要手动提取验证码（比如在ajax请求中），你需要调用：
grecaptcha.getResponse(widget_id)
但是你如何获取小部件ID参数？
我使用CaptchaCallback的定义来存储每个g-recaptcha框的widget id（作为HTML数据属性）：
var CaptchaCallback = function() {
jQuery('.g-recaptcha').each(function(index, el) {
var widgetId = grecaptcha.render(el, {'sitekey' : 'your code'});
jQuery(this).attr('data-widget-id', widgetId);
});
};
然后我可以调用：
grecaptcha.getResponse(jQuery('#your_recaptcha_box_id').attr('data-widget-id'));
提取代码。
#your_recaptcha_box_id是什么？ - Lucas Bustamantegrecaptcha.reset();来重置验证码，在单个表单每页设置中效果很好。但是在每页多个表单的情况下，此“重置”命令不会影响/重置验证码。我也尝试调用CaptchaCallback函数，但它没有解决问题。 - kneidelsHüseyin Yağlı的答案解释了这个解决方案。该解决方案的reCAPTCHA文档在 https://developers.google.com/recaptcha/docs/display#explicit_render。然而，我不知道如果没有JavaScript支持需要做什么来解决这个问题。 - Edward使用jQuery的clone()函数很容易实现此操作。
因此，您必须为reCAPTCHA创建两个包装器div。我的第一个表单的reCAPTCHA div：
<div id="myrecap">
<?php
require_once('recaptchalib.php');
$publickey = "XXXXXXXXXXX-XXXXXXXXXXX";
echo recaptcha_get_html($publickey);
?>
</div>
<div id="myraterecap"></div>
然后 JavaScript 就很简单了：
$(document).ready(function() {
// Duplicate our reCapcha
$('#myraterecap').html($('#myrecap').clone(true,true));
});
在使用clone()时，可能不需要第二个参数传入true值，但有它也没什么坏处...这种方法唯一的问题是，如果你通过ajax提交表单，那么问题在于你有两个具有相同名称的元素，你必须以更聪明的方式捕获正确元素的值（两个reCaptcha元素的id分别为#recaptcha_response_field和#recaptcha_challenge_field，以防万一有人需要）。
我知道这个问题已经有些年头了，但如果将来有人需要查找这个问题的话，我想说在同一页上放置两个验证码是可能的。官方文档链接如下：https://developers.google.com/recaptcha/docs/display下面的示例只是文件中的一个副本，你不必指定不同的布局。
<script type="text/javascript">
var verifyCallback = function(response) {
alert(response);
};
var widgetId1;
var widgetId2;
var onloadCallback = function() {
// Renders the HTML element with id 'example1' as a reCAPTCHA widget.
// The id of the reCAPTCHA widget is assigned to 'widgetId1'.
widgetId1 = grecaptcha.render('example1', {
'sitekey' : 'your_site_key',
'theme' : 'light'
});
widgetId2 = grecaptcha.render(document.getElementById('example2'), {
'sitekey' : 'your_site_key'
});
grecaptcha.render('example3', {
'sitekey' : 'your_site_key',
'callback' : verifyCallback,
'theme' : 'dark'
});
};
</script>
grecaptcha.getResponse() 方法接受一个可选的 "widget_id" 参数，如果未指定，则默认为创建的第一个小部件。每个小部件都会从 grecaptcha.render() 方法返回一个 widget_id，它与 reCAPTCHA 容器的 id 属性无关！！
每个 reCAPTCHA 都有自己的响应数据。您必须为 reCAPTCHA div 分配一个 ID，并将其传递给 getResponse 方法：<div id="reCaptchaLogin"
class="g-recaptcha required-entry"
data-sitekey="<?php echo $this->helper('recaptcha')->getKey(); ?>"
data-theme="<?php echo($this->helper('recaptcha')->getTheme()); ?>"
style="transform:scale(0.82);-webkit-transform:scale(0.82);transform-origin:0 0;-webkit-transform-origin:0 0;">
</div>
<script type="text/javascript">
var CaptchaCallback = function() {
jQuery('.g-recaptcha').each(function(index, el) {
grecaptcha.render(el, {
'sitekey' : jQuery(el).attr('data-sitekey')
,'theme' : jQuery(el).attr('data-theme')
,'size' : jQuery(el).attr('data-size')
,'tabindex' : jQuery(el).attr('data-tabindex')
,'callback' : jQuery(el).attr('data-callback')
,'expired-callback' : jQuery(el).attr('data-expired-callback')
,'error-callback' : jQuery(el).attr('data-error-callback')
});
});
};
</script>
<script src="https://www.google.com/recaptcha/api.js?onload=CaptchaCallback&render=explicit" async defer></script>
访问响应：
var reCaptchaResponse = grecaptcha.getResponse(0);
var reCaptchaResponse = grecaptcha.getResponse(1);
<div class="g-recaptcha"></div>
2) 使用以下代码加载脚本：
<script src="https://www.google.com/recaptcha/api.js?onload=CaptchaCallback&render=explicit" async defer></script>
3) 现在调用它来迭代字段并创建recaptchas：
var CaptchaCallback = function() {
var captchas = document.getElementsByClassName("g-recaptcha");
for(var i = 0; i < captchas.length; i++) {
grecaptcha.render(captchas[i], {'sitekey' : 'YOUR_KEY_HERE'});
}
};
<div class="g-recaptcha" id="g-recaptcha"></div>
<div class="g-recaptcha" id="g-recaptcha-footer"></div>
<script src="https://www.google.com/recaptcha/api.js?onload=CaptchaCallback&render=explicit&hl=en"></script>
<script type="text/javascript">
var CaptchaCallback = function(){
$('.g-recaptcha').each(function(){
grecaptcha.render(this,{'sitekey' : 'your_site_key'});
})
};
</script>
g-recaptcha-response POST参数（因为它仅包含一个验证码的响应）。相反，您应该为每个验证码使用grecaptcha.getResponse(opt_widget_id)调用。这是我的代码（假设每个验证码都在其表单内）：
HTML：
<form ... />
<div id="RecaptchaField1"></div>
<div class="field">
<input type="hidden" name="grecaptcha" id="grecaptcha" />
</div>
</form>
并且
<script src="https://www.google.com/recaptcha/api.js?onload=CaptchaCallback&render=explicit" async defer></script>
var CaptchaCallback = function(){
var widgetId;
$('[id^=RecaptchaField]').each(function(index, el) {
widgetId = grecaptcha.render(el.id, {'sitekey' : 'your_site_key'});
$(el).closest("form").submit(function( event ) {
this.grecaptcha.value = "{\"" + index + "\" => \"" + grecaptcha.getResponse(widgetId) + "\"}"
});
});
};
submit事件上。
iframe相比，像Hüseyin Yağlı的回答中推荐的使用JavaScript是解决该问题的更好方式。大多数浏览器应该支持JavaScript，而默认的reCAPTCHA也已经使用了JavaScript。但我不知道如果没有JavaScript支持，需要做些什么才能解决这个问题。 - Edward