Google ReCAPTCHA如何要求？
Google ReCAPTCHA how to make required?
有谁知道如何在 form 中使“Google ReCAPTCHA (v2)”成为 "required"？
我的意思是在填写 recaptcha 之前不提交表单？
我在我的表单中使用了 ParsleyJs，但没有找到使其与 divs 一起工作的方法...
您必须使用 reCaptcha 验证响应回调。像这样：<script src='https://www.google.com/recaptcha/api.js?onload=reCaptchaCallback&render=explicit'></script>
var RC2KEY = 'sitekey',
doSubmit = false;
function reCaptchaVerify(response) {
if (response === document.querySelector('.g-recaptcha-response').value) {
doSubmit = true;
}
}
function reCaptchaExpired () {
/* do something when it expires */
}
function reCaptchaCallback () {
/* this must be in the global scope for google to get access */
grecaptcha.render('id', {
'sitekey': RC2KEY,
'callback': reCaptchaVerify,
'expired-callback': reCaptchaExpired
});
}
document.forms['form-name'].addEventListener('submit',function(e){
if (doSubmit) {
/* submit form or do something else */
}
})
对于 ParsleyJS 你需要做一些变通：
1.Add 隐藏输入框，带data-parsley-required="true"、value = ""，像这样：
<input id="myField" data-parsley-errors-container="#errorContainer" data-parsley-required="true" value="" type="text" style="display:none;">
2.Add 错误容器（就在您的 g-recaptcha div 下方或下方）：
<span id='errorContainer'></span>
3.Add 这个简单的函数在你的 js 代码中的某处：
function recaptchaCallback() {
document.getElementById('myField').value = 'nonEmpty';
}
4.Add 具有自定义函数值的属性 data-callback:
<div class="g-recaptcha" data-sitekey="***" data-callback="recaptchaCallback"></div>
创建规则
https://laravel.com/docs/5.7/validation#custom-validation-rules
然后在你的控制器中使用它
// validation
$this->validate( $request, array(
'g_recaptcha_response' => ['required', 'string', new Captcha()]
));
您可以在这里找到另一个工作示例：https://codepen.io/reactionmedia/pen/JVdmbB
对于这个例子，我将在表单中创建两个 HTML 元素：
<div id="botvalidator"></div>
<div id="captchaerrors"></div>
botvalidator 将包含带有 "I am not a robot" 复选框的 google recaptcha iframe。
captchaerrors 将在检查用户未单击 "I am not a robot" 复选框后包含错误。
重要提示：我们正在使用 arrive.js 库以了解 google recaptcha 何时在 DOM 中添加新的 g-recaptcha-response textarea 元素因为之前的 DOM 新节点插入验证不再有效。此事件将在 recaptcha 加载到页面几分钟后发生。
您可以从以下位置下载 arrive.js 库：
https://github.com/uzairfarooq/arrive/
或者直接从CDN提供商插入，例如：
https://cdnjs.cloudflare.com/ajax/libs/arrive/2.4.1/arrive.min.js
记得在加载 JQUERY 库后插入所有库以避免错误。我正在使用 Jquery 2.2.4 版本
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
另一个重要的是要记住以这种方式加载recaptcha库，以便在加载recaptcha和渲染recaptcha之后执行onloadCallback函数"manually"
<script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit"></script>
这是代码片段：
var onloadCallback = function() {
/**
* If we try to load page to show the congrats message we don't need to load recaptcha.
*/
if($("#botvalidator").length > 0) {
grecaptcha.render('botvalidator', {
'sitekey' : '6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI',
'callback': cleanErrors
});
addCaptchaValidation();
/**
* We are going to use arrive library in order to check new google recaptcha
* element added after the current one is expired and then we will create new attributes for that element.
* Expires-callback google recaptcha is not working, probably it is executed before element creation.
* https://github.com/uzairfarooq/arrive/
*/
$(document).arrive("#g-recaptcha-response", function() {
// 'this' refers to the newly created element
addCaptchaValidation();
});
}
};
/** We are going to remove all errors from the container. */
var cleanErrors = function() {
$("#captchaerrors").empty();
};
var addCaptchaValidation = function() {
console.log("Adding captcha validation");
cleanErrors();
$('#myform').parsley().destroy();
$('#g-recaptcha-response').attr('required', true);
// We are going to create a new validator on Parsley
$('#g-recaptcha-response').attr('data-parsley-captcha-validation', true);
$('#g-recaptcha-response').attr('data-parsley-error-message', "We know it, but we need you to confirm you are not a robot. Thanks.");
$('#g-recaptcha-response').attr('data-parsley-errors-container', "#captchaerrors");
$('#myform').parsley();
};
/** We are going to add a new Parsley validator, this validation is called from
#g-recaptcha-response after clicking the submit button*/
window.Parsley.addValidator('captchaValidation', {
validateString: function(value) {
if(debug) console.log("Validating captcha", value);
if(value.length > 0) {
return true;
} else {
return false;
}
},
messages: {en: 'We know it, but we need you to confirm you are not a robot. Thanks.'}
});
<html>
<head>
</head>
<body>
<h1>Parsley and Google Recaptcha Example</h1>
<form id="myform">
Full name
<input type="text" name="name" id="name" data-parsley-required="true">
<br/>
<div id="botvalidator"></div>
<div id="captchaerrors"></div><br/>
<input type="submit" value="Submit Form">
</form>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/parsley.js/2.8.2/parsley.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/arrive/2.4.1/arrive.min.js"></script>
<script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit"></script>
</body>
</html>
这就是所有人。
有谁知道如何在 form 中使“Google ReCAPTCHA (v2)”成为 "required"？
我的意思是在填写 recaptcha 之前不提交表单？
我在我的表单中使用了 ParsleyJs，但没有找到使其与 divs 一起工作的方法...
您必须使用 reCaptcha 验证响应回调。像这样：<script src='https://www.google.com/recaptcha/api.js?onload=reCaptchaCallback&render=explicit'></script>
var RC2KEY = 'sitekey',
doSubmit = false;
function reCaptchaVerify(response) {
if (response === document.querySelector('.g-recaptcha-response').value) {
doSubmit = true;
}
}
function reCaptchaExpired () {
/* do something when it expires */
}
function reCaptchaCallback () {
/* this must be in the global scope for google to get access */
grecaptcha.render('id', {
'sitekey': RC2KEY,
'callback': reCaptchaVerify,
'expired-callback': reCaptchaExpired
});
}
document.forms['form-name'].addEventListener('submit',function(e){
if (doSubmit) {
/* submit form or do something else */
}
})
对于 ParsleyJS 你需要做一些变通：
1.Add 隐藏输入框，带data-parsley-required="true"、value = ""，像这样：
<input id="myField" data-parsley-errors-container="#errorContainer" data-parsley-required="true" value="" type="text" style="display:none;">
2.Add 错误容器（就在您的 g-recaptcha div 下方或下方）：
<span id='errorContainer'></span>
3.Add 这个简单的函数在你的 js 代码中的某处：
function recaptchaCallback() {
document.getElementById('myField').value = 'nonEmpty';
}
4.Add 具有自定义函数值的属性 data-callback:
<div class="g-recaptcha" data-sitekey="***" data-callback="recaptchaCallback"></div>
创建规则 https://laravel.com/docs/5.7/validation#custom-validation-rules
然后在你的控制器中使用它
// validation
$this->validate( $request, array(
'g_recaptcha_response' => ['required', 'string', new Captcha()]
));
您可以在这里找到另一个工作示例：https://codepen.io/reactionmedia/pen/JVdmbB
对于这个例子，我将在表单中创建两个 HTML 元素：
<div id="botvalidator"></div>
<div id="captchaerrors"></div>
botvalidator 将包含带有 "I am not a robot" 复选框的 google recaptcha iframe。 captchaerrors 将在检查用户未单击 "I am not a robot" 复选框后包含错误。
重要提示：我们正在使用 arrive.js 库以了解 google recaptcha 何时在 DOM 中添加新的 g-recaptcha-response textarea 元素因为之前的 DOM 新节点插入验证不再有效。此事件将在 recaptcha 加载到页面几分钟后发生。
您可以从以下位置下载 arrive.js 库： https://github.com/uzairfarooq/arrive/
或者直接从CDN提供商插入，例如： https://cdnjs.cloudflare.com/ajax/libs/arrive/2.4.1/arrive.min.js
记得在加载 JQUERY 库后插入所有库以避免错误。我正在使用 Jquery 2.2.4 版本
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
另一个重要的是要记住以这种方式加载recaptcha库，以便在加载recaptcha和渲染recaptcha之后执行onloadCallback函数"manually"
<script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit"></script>
这是代码片段：
var onloadCallback = function() {
/**
* If we try to load page to show the congrats message we don't need to load recaptcha.
*/
if($("#botvalidator").length > 0) {
grecaptcha.render('botvalidator', {
'sitekey' : '6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI',
'callback': cleanErrors
});
addCaptchaValidation();
/**
* We are going to use arrive library in order to check new google recaptcha
* element added after the current one is expired and then we will create new attributes for that element.
* Expires-callback google recaptcha is not working, probably it is executed before element creation.
* https://github.com/uzairfarooq/arrive/
*/
$(document).arrive("#g-recaptcha-response", function() {
// 'this' refers to the newly created element
addCaptchaValidation();
});
}
};
/** We are going to remove all errors from the container. */
var cleanErrors = function() {
$("#captchaerrors").empty();
};
var addCaptchaValidation = function() {
console.log("Adding captcha validation");
cleanErrors();
$('#myform').parsley().destroy();
$('#g-recaptcha-response').attr('required', true);
// We are going to create a new validator on Parsley
$('#g-recaptcha-response').attr('data-parsley-captcha-validation', true);
$('#g-recaptcha-response').attr('data-parsley-error-message', "We know it, but we need you to confirm you are not a robot. Thanks.");
$('#g-recaptcha-response').attr('data-parsley-errors-container', "#captchaerrors");
$('#myform').parsley();
};
/** We are going to add a new Parsley validator, this validation is called from
#g-recaptcha-response after clicking the submit button*/
window.Parsley.addValidator('captchaValidation', {
validateString: function(value) {
if(debug) console.log("Validating captcha", value);
if(value.length > 0) {
return true;
} else {
return false;
}
},
messages: {en: 'We know it, but we need you to confirm you are not a robot. Thanks.'}
});
<html>
<head>
</head>
<body>
<h1>Parsley and Google Recaptcha Example</h1>
<form id="myform">
Full name
<input type="text" name="name" id="name" data-parsley-required="true">
<br/>
<div id="botvalidator"></div>
<div id="captchaerrors"></div><br/>
<input type="submit" value="Submit Form">
</form>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/parsley.js/2.8.2/parsley.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/arrive/2.4.1/arrive.min.js"></script>
<script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit"></script>
</body>
</html>
这就是所有人。