同一页面中多种表单上的Google Invisible ReCaptcha-PHP [英] Google Invisible ReCaptcha on multiple forms in a same page - PHP
本文介绍了同一页面中多种表单上的Google Invisible ReCaptcha-PHP的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在我的php网站上关注此Invisible ReCaptcha文档: http://www. pinnacleinternet.com/installing-invisible-recaptcha/一切正常.但是，尽管在同一页面上实现多种表单，但Captcha仅能在第一种表单上运行，并且不确定第二种表单会发生什么，但我想知道它如何在单个页面上处理多种表单. 还是有人建议使用适用于多种形式的文档?
I am following this Invisible ReCaptcha doc on my php website: http://www.pinnacleinternet.com/installing-invisible-recaptcha/ everything works well. but while implement on multiple forms in a same page then Captcha only work on first form and not sure what’s happening with the second form, I curious to know how its work with multiple forms in a single page. Or anyone please suggest a working doc for multiple forms?
//this is @Geordy's javascript portion modified according to jquery.validate
<script type="text/javascript">
$().ready(function() {
var demo1Call = 0;
var demo2Call = 0;
// validate and submit 1st form
$("#demo-form1").validate({
rules: {
pass: {
required: true,
pwcheck: true,
minlength: 5
},
},
messages: {
pass: {
required: "Please provide a password",
pwcheck: "<br />*Minimum length 8<br />*Maximum length 24<br />*Atleast a digit<br />*Atleast an upper case<br />*Atleast a lowercase<br />*Atleast a special character from these !@#$%",
minlength: "Your password must be at least 5 characters long"
},
},
success: function(error){
console.log("Successfully validated");
},
submitHandler: function(form) {
demo1Call++;
if(demo1Call==1){
widgetId1 = grecaptcha.render('recaptcha1', {
'sitekey' : '<?php echo $config['client-key']; ?>',
'callback' : onSubmit1,
'size' : "invisible"
});
}
grecaptcha.reset(widgetId1);
grecaptcha.execute(widgetId1);
},
});
//validate and submit 2nd form
$("#demo-form2").validate({
rules: {
pass: {
required: true,
pwcheck: true,
minlength: 5
},
},
messages: {
pass: {
required: "Please provide a password",
pwcheck: "<br />*Minimum length 8<br />*Maximum length 24<br />*Atleast a digit<br />*Atleast an upper case<br />*Atleast a lowercase<br />*Atleast a special character from these !@#$%",
minlength: "Your password must be at least 5 characters long"
},
},
success: function(error){
console.log("Successfully validated");
},
submitHandler: function(form) {
demo2Call++;
if(demo2Call==1){
widgetId2 = grecaptcha.render('recaptcha2', {
'sitekey' : '<?php echo $config['client-key']; ?>',
'callback' : onSubmit2,
'size' : "invisible"
});
}
grecaptcha.reset(widgetId2);
grecaptcha.execute(widgetId2);
},
});
});
$.validator.addMethod("pwcheck", function(value) {
var pattern = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[!@#$%])[0-9A-Za-z!@#$%]{8,24}$/;
return pattern.test(value);
});
function onSubmit1(token){
document.getElementById("demo-form1").submit();
};
function onSubmit2(token){
document.getElementById("demo-form2").submit();
};
</script>
推荐答案
下面的代码对我有用
<?php
$config = require('config.php');
?>
<html>
<head>
<title>reCAPTCHA demo</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- Boostrap Validator -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/1000hz-bootstrap-validator/0.11.9/validator.min.js" ></script>
<script type="text/javascript">
$(document).ready(function(){
var demo1Call = 0;
var demo2Call = 0;
$('#demo-form1').validator().on('submit', function (e) {
if (e.isDefaultPrevented()) {
// handle the invalid form...
console.log("validation failed");
} else {
// everything looks good!
demo1Call++;
e.preventDefault();
console.log("validation success");
if(demo1Call==1)
{
widgetId1 = grecaptcha.render('recaptcha1', {
'sitekey' : '<?php echo $config['client-key']; ?>',
'callback' : onSubmit1,
'size' : "invisible"
});
}
grecaptcha.reset(widgetId1);
grecaptcha.execute(widgetId1);
}
});
$('#demo-form2').validator().on('submit', function (e) {
if (e.isDefaultPrevented()) {
// handle the invalid form...
console.log("validation failed");
} else {
// everything looks good!
demo2Call++;
e.preventDefault();
console.log("validation success");
if(demo2Call==1)
{
widgetId2 = grecaptcha.render('recaptcha2', {
'sitekey' : '<?php echo $config['client-key']; ?>',
'callback' : onSubmit2,
'size' : "invisible"
});
}
grecaptcha.reset(widgetId2);
grecaptcha.execute(widgetId2);
}
});
});
function onSubmit1(token){
document.getElementById("demo-form1").submit();
};
function onSubmit2(token){
document.getElementById("demo-form2").submit();
};
</script>
</head>
<body>
<div class="container">
<br>
<div class="row">
<div class="col-md-5 col-md-offset-3">
<form id="demo-form1" data-toggle="validator" role="form" action="admin.php" method="POST" >
<div class="form-group">
<label for="inputName" class="control-label">Name</label>
<input type="text" class="form-control" id="inputName" placeholder="Geordy James" required/>
</div>
<div id='recaptcha1' ></div>
<button class="btn btn-block btn-primary" type="submit">Submit</button>
</form>
</div>
</div>
<br>
<div class="row">
<div class="col-md-5 col-md-offset-3">
<form id="demo-form2" data-toggle="validator" role="form" action="admin2.php" method="POST" >
<div class="form-group">
<label for="inputName" class="control-label">Name</label>
<input type="text" class="form-control" id="inputName" placeholder="Geordy James" required/>
</div>
<div id='recaptcha2' ></div>
<button class="btn btn-block btn-primary" type="submit">Submit</button>
</form>
</div>
</div>
</div>
<script src="https://www.google.com/recaptcha/api.js" async defer ></script>
</body>
</html>
我在此程序中使用了非官方的Google Invisible reCAPTCHA PHP库，您可以从 https:下载: //github.com/geordyjames/google-Invisible-reCAPTCHA .如果此方法对您不起作用，请在下面评论.
I used Unofficial Google Invisible reCAPTCHA PHP library in this program and you can download it from https://github.com/geordyjames/google-Invisible-reCAPTCHA . If this method doesn't work for you please comment below.
这篇关于同一页面中多种表单上的Google Invisible ReCaptcha-PHP的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
