我正在使用Google reCAPTCHA,并已能够在表单中添加验证码组件。但当我提交表单时,没有进行验证来检查是否已解决验证码。
如何在提交表单时验证已解决验证码组件?换句话说,如何使我的验证码组件成为必填项?
我正在使用Google reCAPTCHA,并已能够在表单中添加验证码组件。但当我提交表单时,没有进行验证来检查是否已解决验证码。
如何在提交表单时验证已解决验证码组件?换句话说,如何使我的验证码组件成为必填项?
如果你想使用本机的HTML5弹出窗口,那么这里是解决方案
JavaScript:
window.addEventListener('load', () => {
const $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;
}
我遇到了与你相同的问题,并通过以下方式解决:
首先声明一个变量,根据用户是否正确填写验证码存储1
或0
。
var allowSubmit = false;
然后您需要一个函数,当用户正确填写reCapcha时执行:
function capcha_filled () {
allowSubmit = true;
}
...并有一个在reCapcha会话过期时执行的函数:
function capcha_expired () {
allowSubmit = false;
}
要告诉 reCapcha 有关您的功能(回调)的信息,请在您的 HTML 中设置这些 data-
属性:
<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">
注意:正如评论中提到的那样,仍然需要进行服务器验证。该代码可防止在未填写验证码的情况下意外提交表单,仅为用户方便而设。submit = true
呢? - Ian MacDonald我发现这是一个快速且简单的方法。将以下内容添加到您的标头中:
<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,我无法解决这个问题。希望其他人能改进这个回答。)
我检查了#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;
}
//...
});
这真的应该是文档的一部分...
2022年的解决方案
个人经验,以上提供的解决方案都不能用于我的验证码。因此,我想分享一下我目前可用的解决方案,帮助那些遇到同样问题的人。
接受的答案没有验证技术来检测验证码是否过期,以下的解决方案解决了这个问题。
我的.js
笔记应该可以详细解释这个解决方案。
JavaScript
// By default do not allow form submission.
var allow_submit = false
function captcha_filled () {
/*
* This is called when Google get's the recaptcha response and approves it.
* Setting allow_submit = true will let the form POST as normal.
* */
allow_submit = true
}
function captcha_expired () {
/*
* This is called when Google determines too much time has passed and expires the approval.
* Setting allow_submit = false will prevent the form from being submitted.
* */
allow_submit = false
}
function check_captcha_filled (e) {
console.log('captcha-verified')
/*
* This will be called when the form is submitted.
* If Google determines the captcha is OK, it will have
* called captcha_filled which sets allow_submit = true
* If the captcha has not been filled out, allow_submit
* will still be false.
* We check allow_submit and prevent the form from being submitted
* if the value of allow_submit is false.
* */
// If captcha_filled has not been called, allow_submit will be false.
// In this case, we want to prevent the form from being submitted.
if (!allow_submit) {
// This call prevents the form submission.
// e.preventDefault()
// This alert is temporary - you should replace it with whatever you want
// to do if the captcha has not been filled out.
alert('ERROR: Please verify you are human by filling out the captcha')
return false
}
captcha_expired()
return true
}
HTML
<form action="post" onsubmit="return check_captcha_filled()">
<!-- form items -->
<div class="g-recaptcha"
data-callback="captcha_filled"
data-expired-callback="captcha_expired"
data-sitekey="your site key">
</div>
</form>
<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();
}
.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;
}
不确定您是否已解决此问题,但您可以使用附加组件验证 Google reCAPTCHA: http://formvalidation.io/addons/recaptcha2/
<div class="g-recaptcha myPopover" data-sitekey="Your Key"
data-callback="recaptchaCallback">
var recaptchachecked=false;
function recaptchaCallback() {
recaptchachecked = true;
}
还有一个函数,你可以返回值并在其他HTML标签中使用它,就像这样:
<form method="post" onsubmit="return isreCaptchaChecked()">
function isreCaptchaChecked()
{
return recaptchachecked;
}
希望这能对你有所帮助。