要求用户在提交表单前点击 google 的新验证码
Require User to click google's new recaptcha before form submission
我在我的表单中使用 google 的新验证码 (HTML5):
https://www.google.com/recaptcha
有没有办法在提交表单之前根据需要检查和标记recaptcha?
我想在客户端而不是服务器端验证这一点。这样,我就不必返回到表单并警告用户不要为验证码输入任何内容。
我可以用来检查用户是否在 recaptcha 中输入任何内容的任何 javascript?
您可以查看id为g-recaptcha-response
的textarea字段。您可以执行以下操作:
$("form").submit(function(event) {
var recaptcha = $("#g-recaptcha-response").val();
if (recaptcha === "") {
event.preventDefault();
alert("Please check the recaptcha");
}
});
希望对您有所帮助。
grecaptcha.getResponse()
-
Returns Recaptcha 的响应。您可以在
等条件下进行检查
grecaptcha.getResponse(opt_widget_id) === ""
可选的小部件 ID,如果未指定,则默认为创建的第一个小部件。
使用 Ankesh 和 Lammert 的部分解决方案的普通 JavaScript 实现:
var form = document.getElementById('ctct-custom-form');
form.addEventListener("submit", function(event){
if (grecaptcha.getResponse() === '') {
event.preventDefault();
alert('Please check the recaptcha');
}
}
, false);
感谢表单提交监听器代码:How can I listen to the form submit event in javascript?
我试图改进 rylanb 的回答。下面的代码找到页面中所有已激活 g-captcha 的表单并阻止提交。
注意:它假定您的 div.g-recaptcha
是 form
的 child
const forms = document.querySelectorAll('div.g-recaptcha');
forms.forEach(form=> {
const formParentElement = form.parentElement;
formParentElement.addEventListener("submit", e => {
if (grecaptcha.getResponse() === '') {
e.preventDefault();
alert('Please check the recaptcha');
}
}, false)
});
最简单的方法是更改按钮类型。
<button class="theme-btn" type="button" onclick="checkForm()" id="sign_up_button" >
现在创建一个 Java 脚本函数来更改验证时提交的类型。
<script type="text/javascript">
// 验证码功能
function checkForm(){
if(!document.getElementById("g-recaptcha-response").value){
alert("Please Prove ! You're not a Robot");
return false;
}else{
document.getElementById("sign_up_button").type = "submit";
return true;
}
}
</script>
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('verify-captcha')
/*
* 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>
我在我的表单中使用 google 的新验证码 (HTML5): https://www.google.com/recaptcha
有没有办法在提交表单之前根据需要检查和标记recaptcha? 我想在客户端而不是服务器端验证这一点。这样,我就不必返回到表单并警告用户不要为验证码输入任何内容。
我可以用来检查用户是否在 recaptcha 中输入任何内容的任何 javascript?
您可以查看id为g-recaptcha-response
的textarea字段。您可以执行以下操作:
$("form").submit(function(event) {
var recaptcha = $("#g-recaptcha-response").val();
if (recaptcha === "") {
event.preventDefault();
alert("Please check the recaptcha");
}
});
希望对您有所帮助。
grecaptcha.getResponse()
-
Returns Recaptcha 的响应。您可以在
grecaptcha.getResponse(opt_widget_id) === ""
可选的小部件 ID,如果未指定,则默认为创建的第一个小部件。
使用 Ankesh 和 Lammert 的部分解决方案的普通 JavaScript 实现:
var form = document.getElementById('ctct-custom-form');
form.addEventListener("submit", function(event){
if (grecaptcha.getResponse() === '') {
event.preventDefault();
alert('Please check the recaptcha');
}
}
, false);
感谢表单提交监听器代码:How can I listen to the form submit event in javascript?
我试图改进 rylanb 的回答。下面的代码找到页面中所有已激活 g-captcha 的表单并阻止提交。
注意:它假定您的 div.g-recaptcha
是 form
const forms = document.querySelectorAll('div.g-recaptcha');
forms.forEach(form=> {
const formParentElement = form.parentElement;
formParentElement.addEventListener("submit", e => {
if (grecaptcha.getResponse() === '') {
e.preventDefault();
alert('Please check the recaptcha');
}
}, false)
});
最简单的方法是更改按钮类型。
<button class="theme-btn" type="button" onclick="checkForm()" id="sign_up_button" >
现在创建一个 Java 脚本函数来更改验证时提交的类型。
<script type="text/javascript">
// 验证码功能
function checkForm(){
if(!document.getElementById("g-recaptcha-response").value){
alert("Please Prove ! You're not a Robot");
return false;
}else{
document.getElementById("sign_up_button").type = "submit";
return true;
}
}
</script>
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('verify-captcha')
/*
* 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>