如何解决Bootstrap 4表单验证+ reCAPTCHA v2复选框验证流程
我有一个带有表单验证的简单Bootstrap 4表单。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1" />
<title>Test</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" />
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="https://www.google.com/recaptcha/api.js" async defer></script>
</head>
<body>
<div class="container px-3 py-3 pt-md-5 pb-md-4 mx-auto">
<div class="row">
<div class="col-12">
<form id="frm_register" action="register.php" method="post" class="needs-validation" novalidate>
<div class="row">
<div class="col-12 col-lg-6">
<div class="form-group">
<label for="frm_email">Email Address</label>
<input type="email" id="frm_email" name="txt_email" class="form-control" placeholder="Please enter your email" required />
<div class="invalid-feedback">Email address is required.</div>
</div>
</div>
<div class="col-12 col-lg-6">
<div class="form-group">
<label for="frm_password">Password</label>
<input type="password" id="frm_password" name="txt_pass" class="form-control" placeholder="Please choose a password" required />
<div class="invalid-feedback">Password is required.</div>
</div>
</div>
</div>
<div class="row">
<div class="col-12">
<div class="g-recaptcha" data-sitekey="MY_SITE_KEY"></div>
</div>
</div>
<div class="row">
<div class="col-12">
<button class="btn btn-success">Register</button>
</div>
</div>
</form>
</div>
</div>
</div>
<script>
(function() {
'use strict';
window.addEventListener('load',function() {
var forms = document.getElementsByClassName('needs-validation');
var validation = Array.prototype.filter.call(forms,function(form) {
form.addEventListener('submit',function(event) {
if (form.checkValidity() === false) {
event.preventDefault();
event.stopPropagation();
} else {
var response = grecaptcha.getResponse();
if(response.length == 0) {
document.querySelector('.g-recaptcha>div').classList.add('border','border-danger');
} else {
console.log(response);
$.post('recaptcha.php',{
'response': response
},function(data) {
if(data.success == true) {
$('#frm_register').submit();
} else {
alert('reCAPTCHA failed. Reload the page to retry.');
}
});
}
event.preventDefault();
event.stopPropagation();
}
form.classList.add('was-validated');
},false);
});
},false);
})();
</script>
</body>
</html>
以上形式没有问题，但是流程很奇怪。我认为表单验证可与reCAPTCHA一起很好地工作，当用户不选中该框或验证失败时，reCAPTCHA将阻止表单提交。 reCAPTCHA并没有影响表单提交，因此，我（无知地）添加了一个额外的recaptcha.php来检查响应是否有效，其逻辑在这里：
<?php
header('Content-Type: application/json');
if(!isset($_POST['response'])) {
echo json_encode(array(
'success' => false,'reason' => 'no response'
));
exit();
}
$data = array(
'secret' => 'MY_SECRET_KEY','response' => $_POST['response'],);
$ch = curl_init();
curl_setopt($ch,CURLOPT_URL,"https://www.google.com/recaptcha/api/siteverify");
curl_setopt($ch,CURLOPT_POST,true);
curl_setopt($ch,CURLOPT_POSTFIELDS,$data);
curl_setopt($ch,CURLOPT_RETURNTRANSFER,CURLOPT_SSL_VERIFYPEER,true);
$response = curl_exec($ch);
echo $response;
?>
那么我该怎么做才能使reCAPTCHA与Bootstrap 4表单验证一起使用，这样我就不必进行另一个POST调用来检查reCAPTCHA结果。
相关问题：
- Bootstrap 4 Validation reCaptcha：不相关，因为它与不可见的ReCaptcha有关，并且答案不能解决问题
- Bootstrap 4 form validation with reCaptcha v3：无关，因为它与reCaptcha v3（而非v2）有关
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。