在FrontEndphp-ajax-jquery中验证reCaptcha-google
Verify reCaptcha google in FrontEnd php ajax jquery
我正在尝试用reCaptcha创建一个表单。
虽然我不是javascript和ajax的专家，但我成功地在提交之前对表单进行了cretae并用ajax进行了验证，但当我将reCaptcha添加到表单中时，我无法在前端进行验证。（在后端，它工作得很好，只有在所有字段和captcha都正确填写的情况下才能发送表单）
我想创建一些东西，当用户没有填写reCaptcha时提醒他。在我的代码下面：
/********** index.php *************/
<?php
$siteKey = 'public key'; // votre clé publique
?>
<form action="process.php" id="contact" method="POST">
<label for="nom" class="label-style">Nom</label>
<input class="w-input field-style" id="nom" name="nom" onkeyup="checkFilled('nom');" type="text">
<span id="msg_nom"></span>
<label for="email" class="label-style">Email</label>
<input class="w-input field-style" id="email" name="email" onkeyup="checkFilledEmail('email');" type="email">
<span id="msg_email"></span>
<label for="sujet" class="label-style" >Sujet</label>
<input class="w-input field-style" id="sujet" name="sujet" onkeyup="checkFilled('sujet');" type="text">
<span id="msg_sujet"></span>
<label class="label-style" for="message">Message</label>
<textarea class="w-input messageform" id="message" name="message" onkeyup="checkFilled('message');" rows="10" cols="80"></textarea>
<span id="msg_message"></span>
<div class="g-recaptcha" data-sitekey="<?php echo $siteKey; ?>"></div>
<span id="msg_captch"></span>
<span id="msg_all"></span>
<input class="w-button simple-button" type="submit" value="Envoyer" />
</form>
<script type="text/javascript">
function checkFilled(variable) {
var inputVal = document.getElementById(variable).value;
if (inputVal == "") {
document.getElementById(variable).style.borderColor = "red";
}
else{
document.getElementById(variable).style.borderColor = "green";
}
}
function checkFilledEmail(variable) {
fld_value = document.getElementById(variable).value;
is_m_valid = 0;
if (fld_value.indexOf('@') >= 1) {
m_valid_dom = fld_value.substr(fld_value.indexOf('@')+1).length;
if (m_valid_dom >= 1) {
is_m_valid = 1;
}
}
if (is_m_valid) {
document.getElementById(variable).style.borderColor = "green";
} else {
document.getElementById(variable).style.borderColor = "red";
}
}
$(function(){
$("#contact").submit(function(event){
var nom = $("#nom").val();
var sujet = $("#sujet").val();
var email = $("#email").val();
var message = $("#message").val();
var dataString = nom + sujet + email + message;
var captch = $('.g-recaptcha').val();
var msg_all = "Merci de remplir tous les champs";
var msg_alert = "Merci de remplir le champs: ";
var msg_captch = " merci de remplir captcha";
$("#msg_all").html('');
$("#msg_nom").html('');
$("#msg_email").html('');
$("#msg_sujet").html('');
$("#msg_message").html('');
if(dataString == "")
{
document.getElementById('nom').style.borderColor = "red";
document.getElementById('email').style.borderColor = "red";
document.getElementById('sujet').style.borderColor = "red";
document.getElementById('message').style.borderColor = "red";
$('html, body').animate({
scrollTop: $("#msg_nom").offset().top
}, 500);
}
else if(nom == "")
{
var el10=document.getElementById('nom');
el10.style.borderColor = "red";
}
else if(email == "")
{
document.getElementById('email').style.borderColor = "red";
}
else if(sujet == "")
{
document.getElementById('sujet').style.borderColor = "red";
}
else if(message == "")
{
document.getElementById('message').style.borderColor = "red";
}
else
{
$.ajax({
type : "POST",
url: $(this).attr("action"),
data: $(this).serialize(),
success : function(){
$("#msg_all").html(" <p style='text-align:center; margin-bottom:40px;'>Formulaire bien envoyé</p> ");
$(':input','#contact')
.not(':button, :submit, :reset, :hidden')
.val('');
$("#msg_nom").html('');
$("#msg_email").html('');
$("#msg_sujet").html('');
$("#msg_message").html('');
document.getElementById('nom').style.borderColor = "";
document.getElementById('email').style.borderColor = "";
document.getElementById('sujet').style.borderColor = "";
document.getElementById('message').style.borderColor = "";
$('html, body').animate({
scrollTop: $("#msg_nom").offset().top
}, 500);
},
error: function(){
$("#msg_all").html("<p style='text-align:center; margin-bottom:40px;'>Erreur dappel, le formulaire ne peut pas fonctionner</p>");
document.getElementById('nom').style.borderColor = "";
document.getElementById('email').style.borderColor = "";
document.getElementById('sujet').style.borderColor = "";
document.getElementById('message').style.borderColor = "";
}
});
}
return false;
});
});
</script>
/************ process.php **************/
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="https://www.google.com/recaptcha/api.js"></script>
<?php
require 'recaptchalib.php';
$secret = 'private key'; // votre clé privée
// CONDITIONS NOM
if ( (isset($_POST["nom"])) && (strlen(trim($_POST["nom"])) > 0) ):
$nom = stripslashes(strip_tags($_POST["nom"]));
else:
echo "Merci décrire un nom <br />";
$nom = "";
endif;
// CONDITIONS SUJET
if ( (isset($_POST["sujet"])) && (strlen(trim($_POST["sujet"])) > 0) ):
$sujet = stripslashes(strip_tags($_POST["sujet"]));
else:
echo "Merci décrire un sujet <br />";
$sujet = "";
endif;
// CONDITIONS EMAIL
if ( (isset($_POST["email"])) && (strlen(trim($_POST["email"])) > 0) && (filter_var($_POST["email"], FILTER_VALIDATE_EMAIL)) ):
$email = stripslashes(strip_tags($_POST["email"]));
elseif (empty($_POST["email"])):
echo "Merci décrire une adresse email <br />";
$email = "";
else:
echo "Email invalide :(<br />";
$email = "";
endif;
// CONDITIONS MESSAGE
if ( (isset($_POST["message"])) && (strlen(trim($_POST["message"])) > 0) ):
$message = stripslashes(strip_tags($_POST["message"]));
else:
echo "Merci décrire un message<br />";
$message = "";
endif;
$cap = 0;
$reCaptcha = new ReCaptcha($secret);
if(isset($_POST["g-recaptcha-response"]))
{
$resp = $reCaptcha->verifyResponse(
$_SERVER["REMOTE_ADDR"],
$_POST["g-recaptcha-response"]
);
if ($resp != null && $resp->success)
{
$cap = 1;
}
else
{
echo "verify your CAPTCHA, it is incorrect <br />";
$cap = 0;
}
}
else
{
echo "ERROR captcha <br />";
$cap = 0;
}
// Les messages d"erreurs ci-dessus s'afficheront si Javascript est désactivé
// PREPARATION DES DONNEES
$ip = $_SERVER["REMOTE_ADDR"];
$hostname = gethostbyaddr($_SERVER["REMOTE_ADDR"]);
$destinataire = 'myEmail@gmail.com';
$objet = $sujet;
$contenu = "Nom de l'expéditeur : " . $nom . "'r'n";
$contenu .= $message . "'r'n'n";
$contenu .= "Adresse IP de l'expéditeur : " . $ip . "'r'n";
$contenu .= "DLSAM : " . $hostname;
$headers = "From: " . "contact@exemple.com" . " 'r'n"; // ici l"expediteur du mail
$headers .= "Reply-to: " . $email . " 'r'n"; // ici l"expediteur du mail
$headers .= 'Content-Type: text/plain; charset=ISO-8859-1; DelSp=Yes; format=flowed'. "'r'n";
$headers .= 'Content-Disposition: inline' . "'r'n";
$headers .= 'Content-Transfer-Encoding: 7bit' . "'r'n";
$headers .= 'MIME-Version: 1.0';
// SI LES CHAMPS SONT MAL REMPLIS
if ( (empty($nom)) && (empty($sujet)) && (empty($email)) && (!filter_var($email, FILTER_VALIDATE_EMAIL)) && (empty($message)) ):
echo "echec";
elseif ( $cap==0 ):
echo "captcha error <br />";
// ENCAPSULATION DES DONNEES
else:
mail($destinataire,$objet,utf8_decode($contenu),$headers);
echo "Formulaire envoyé";
unset($_POST);
unset($message);
unset($sujet);
unset($email);
unset($nom);
endif;
// Les messages d"erreurs ci-dessus s"afficheront si Javascript est désactivé
?>
我想要的是：
提醒错过检查captcha的用户，就像我在提交前验证其他字段一样。我想在提交之前核实我的所有表格（在前端）。上面的代码检查前端中除captcha之外的所有字段。
我如何验证前端是否检查了captcha。
任何允许我继续编码的信息。
我找到了解决方案，如果我们想在提交之前验证reCaptcha，我们必须在提交中添加这个简单的代码（这将使我们知道reCaptcha是否被检查）：
var msg_captch = " You need to check Captcha";
var captch = jQuery('#g-recaptcha-response').val();
if(!captch)
{
$("#msg_captch").html(msg_captch);
}
请参阅上面的代码，了解什么是"msg_captch"
相关文章：
- Recaptcha在IE7和IE8中不起作用
- 在FrontEndphp-ajax-jquery中验证reCaptcha-google
- 错误:ReCAPTCHA占位符元素必须为空
- 停止Recaptcha执行“;动作“;以某种形式
- 使用ajax验证的reCAPTCHA总是返回错误，即使是正确的
- 在Rails窗体中重置Recaptcha
- reCaptcha-验证失败
- PHP表单，MailFoction和Google reCaptcha验证问题
- reCAPTCHA-隐藏提交按钮
- 使用ajax的ReCaptcha响应错误
- 角度 g-recaptcha 不起作用
- 通过将 g-recaptcha-response 从 javascript 文件传递给 php 文件来验证 google
- 是否可以在没有iframe和任何javascript的情况下使用reCAPTCHA
- 新的 Google reCAPTCHA JavaScript 命名空间回调
- 在本地存储Google的Recaptcha脚本
- 谷歌新的“No Captcha reCaptcha”和表单页面和php和javascript的问题
- reCAPTCHA 自定义表单参数名称
- 在Aurelia应用程序中使用Google的reCAPTCHA
- Angularjs, e2e test with angular-recaptcha
- 内容安全策略阻止对 *://www.google.com/recaptcha/api 的请求
