我正在使用 Google reCAPTCHA，并且已经能够将 CAPTCHA 组件添加到表单内的页面中。但是当我提交表单时，没有进行验证以检查 CAPTCHA 是否已解决。
提交表单时如何验证验证码组件是否已解决？或者，换句话说，如何使我的 CAPTCHA 组件成为必需？
【问题讨论】：
标签： recaptcha
如果您想要更友好和更具描述性的消息，您可以添加一个必填复选框。 这将确保 html5 弹出窗口显示如下内容：“如果您想继续，请选中此框”
<div class="captcha">
<div class="g-recaptcha" data-sitekey="Your Site Key" data-callback="removeFakeCaptcha"></div>
<input type="checkbox" class="captcha-fake-field" tabindex="-1" required>
</div>
添加代码以在完成后删除假验证码
window.removeFakeCaptcha = function() {
document.querySelector('.captcha-fake-field').remove();
}
然后在 css 上隐藏复选框并将其定位到验证码框：
.captcha {
position: relative;
}
.captcha-fake-field {
background: transparent;
bottom: 0;
border: none;
display: block;
height: 1px;
left: 12px;
width: 1px;
position: absolute;
z-index: -1;
}
【讨论】：
我觉得这很有帮助：
<div class="g-recaptcha myPopover" data-sitekey="Your Key"
data-callback="recaptchaCallback">
您可以使用以下代码向 data-callback="recaptchaCallback" 添加一个函数：
var recaptchachecked=false;
function recaptchaCallback() {
recaptchachecked = true;
}
还有一个函数是你返回值以在其他 html-tag 中使用它，如下所示：
<form method="post" onsubmit="return isreCaptchaChecked()">
function isreCaptchaChecked()
{
return recaptchachecked;
}
希望对你有帮助。
【讨论】：
我检查了#g-recaptcha-response 的存在：
function checkRecaptcha() {
res = $('#g-recaptcha-response').val();
if (res == "" || res == undefined || res.length == 0)
return false;
else
return true;
}
//...
$('#frm-signup').submit(function(e) {
if(!checkRecaptcha()) {
$( "#frm-result" ).text("Please validate your reCAPTCHA.");
return false;
}
//...
});
这确实应该是文档的一部分...
【讨论】：
我遇到了和你一样的问题，就是这样解决的：
首先声明一个存储1或0的变量，这取决于用户是否正确填写了验证码。
var allowSubmit = false;
那么你需要一个在用户正确填写 reCapcha 时执行的函数：
function capcha_filled () {
allowSubmit = true;
}
...以及在 reCapcha 会话到期时执行的函数：
function capcha_expired () {
allowSubmit = false;
}
要告诉 reCapcha 您的函数（回调），请在您的 html 中设置 data-attributes：
<div class="g-recaptcha"
data-callback="capcha_filled"
data-expired-callback="capcha_expired"
data-sitekey="your site key"></div>
或者如果你使用显式加载：
var onloadCallback = function() {
grecaptcha.render('your_div_id', {
'sitekey' : 'your_site_key',
'callback': capcha_filled,
'expired-callback': capcha_expired,
});
};
表单提交还需要回调：
function check_if_capcha_is_filled (e) {
if(allowSubmit) return true;
e.preventDefault();
alert('Fill in the capcha!');
}
最后在表单中添加onsubmit属性：
<form action="..." onsubmit="check_if_capcha_is_filled">
注意：如 cmets 中所述，仍需要服务器验证。该代码可防止意外提交表单，除非验证码已填写且仅为了方便用户使用。
【讨论】：
submit = true？
如果你想使用原生的 html5 弹窗，这里是解决方案
JavaScript：
window.onload = function() {
var $recaptcha = document.querySelector('#g-recaptcha-response');
if($recaptcha) {
$recaptcha.setAttribute("required", "required");
}
};
CSS：
#g-recaptcha-response {
display: block !important;
position: absolute;
margin: -78px 0 0 0 !important;
width: 302px !important;
height: 76px !important;
z-index: -999999;
opacity: 0;
}
【讨论】：
我发现这是一种快速简便的方法。将此添加到您的标题中：
<script>
window.onload = function() {
var recaptcha = document.forms["myForm"]["g-recaptcha-response"];
recaptcha.required = true;
recaptcha.oninvalid = function(e) {
// do something
alert("Please complete the captcha");
}
}
</script>
这仅适用于 HTML5，并且（或应该）受以下浏览器支持：http://caniuse.com/#feat=form-validation
（Chrome 中的 JS 控制台显示此错误消息："Invalid form control" only in Google Chrome，我无法解决此问题。希望其他人能改进此响应。）
【讨论】：
不确定您是否已经解决了这个问题，但您可以使用插件来验证 Google recaptcha： http://formvalidation.io/addons/recaptcha2/
【讨论】：