我想知道如何在同一页上存在多个Recaptcha时在客户端验证它们。我找到了这个https://dev59.com/7F4c5IYBdhLWcg3wdKGT#28607943,当我只有一个时它是可行的。
但现在我的网站页面底部和某些注册表单中都有一个,因此存在同时出现的可能性。
我会感激任何建议。谢谢。:)
我想知道如何在同一页上存在多个Recaptcha时在客户端验证它们。我找到了这个https://dev59.com/7F4c5IYBdhLWcg3wdKGT#28607943,当我只有一个时它是可行的。
但现在我的网站页面底部和某些注册表单中都有一个,因此存在同时出现的可能性。
我会感激任何建议。谢谢。:)
验证尽可能多的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, },
},
});
</head>
标签之前添加 <script src='https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit'></script>
<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;
},
});
});
}