reCaptcha / 表单验证
reCaptcha / Form Validation
你好,
我想将 reCaptcha(2) 导入我的注册表单。我已经导入了，但他们没有验证它。在提交点击时，skip 的空 reCaptcha 并忽略它。有人可以 post 完整 HTML & JAVA/SCRIPT 代码的（没有 使用 php)。我找不到正确的代码。我想要一个完整的 html/script 代码。 :x
我试过了，但我需要一个 <script> 代码来验证它。我搜索了一个代码，尝试了一些脚本，但它无法验证 <form>.
<html>
<head>
<title>TEST</title>
<script src='https://www.google.com/recaptcha/api.js?hl=en'></script>
</head>
<body>
<form method="POST" action="register.html">
<input type="text" name="name" required>
<br>
<input type="email" name="email" required>
<br>
<input type="password" name="password" required>
<br>
<center><div class="g-recaptcha" data-theme="dark" data-sitekey="MY_SITE_KEY"></div></center><br>
<br>
<input type="submit" value="submit">
</body>
</html>
谢谢。
由于您必须进行服务器端验证码验证，因此表单的 action 部分应该是 register.php，而不是 register.html。您的 HTML 代码应该是这样的：
<form method="POST" action="register.php">
<input type="text" name="name" required><br />
<input type="email" name="email" required><br />
<input type="password" name="password" required><br />
<center>
<div class="g-recaptcha" data-theme="dark" data-sitekey="YOUR_SITE_KEY"></div>
</center><br />
<input type="submit" name="submit" value="submit">
</form>
这就是在 register.php 文件中验证输入验证码的方法，
<?php
if(isset($_POST['submit'])){
//your site secret key
$secret = 'XXXXXXX_Secret-key_XXXXXXX';
if(isset($_POST['g-recaptcha-response']) && !empty($_POST['g-recaptcha-response'])){
//get verified response data
$param = "https://www.google.com/recaptcha/api/siteverify?secret=".$secret."&response=".$_POST['g-recaptcha-response'];
$verifyResponse = file_get_contents($param);
$responseData = json_decode($verifyResponse);
if($responseData->success){
// success
echo "success";
}else{
// failure
}
}
}
?>
参考文献如下：
已编辑：
根据您的评论，
2x borders on side of . for example then i get a error, it add's a style(border-left:1px solid red;border-right:1px solid red;) or it add's a class(recaptcha-error). When success shows only the reCaptcha green mark withuot a border.
这是解决方案，
你的样式表应该是这样的：
<style>
.error {
border:5px solid red;
}
.success{
border:5px solid blue;
}
</style>
你的HTML就这样，你的jQuery应该是这样的：
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('[name="submit"]').click(function(e){
var recaptchaResponse = grecaptcha.getResponse();
if(recaptchaResponse == ""){
$(".g-recaptcha").addClass("error");
}else{
$(".g-recaptcha").addClass("success");
}
});
});
</script>
你好, 我想将 reCaptcha(2) 导入我的注册表单。我已经导入了，但他们没有验证它。在提交点击时，skip 的空 reCaptcha 并忽略它。有人可以 post 完整 HTML & JAVA/SCRIPT 代码的（没有 使用 php)。我找不到正确的代码。我想要一个完整的 html/script 代码。 :x
我试过了，但我需要一个 <script> 代码来验证它。我搜索了一个代码，尝试了一些脚本，但它无法验证 <form>.
<html>
<head>
<title>TEST</title>
<script src='https://www.google.com/recaptcha/api.js?hl=en'></script>
</head>
<body>
<form method="POST" action="register.html">
<input type="text" name="name" required>
<br>
<input type="email" name="email" required>
<br>
<input type="password" name="password" required>
<br>
<center><div class="g-recaptcha" data-theme="dark" data-sitekey="MY_SITE_KEY"></div></center><br>
<br>
<input type="submit" value="submit">
</body>
</html>
谢谢。
由于您必须进行服务器端验证码验证，因此表单的 action 部分应该是 register.php，而不是 register.html。您的 HTML 代码应该是这样的：
<form method="POST" action="register.php">
<input type="text" name="name" required><br />
<input type="email" name="email" required><br />
<input type="password" name="password" required><br />
<center>
<div class="g-recaptcha" data-theme="dark" data-sitekey="YOUR_SITE_KEY"></div>
</center><br />
<input type="submit" name="submit" value="submit">
</form>
这就是在 register.php 文件中验证输入验证码的方法，
<?php
if(isset($_POST['submit'])){
//your site secret key
$secret = 'XXXXXXX_Secret-key_XXXXXXX';
if(isset($_POST['g-recaptcha-response']) && !empty($_POST['g-recaptcha-response'])){
//get verified response data
$param = "https://www.google.com/recaptcha/api/siteverify?secret=".$secret."&response=".$_POST['g-recaptcha-response'];
$verifyResponse = file_get_contents($param);
$responseData = json_decode($verifyResponse);
if($responseData->success){
// success
echo "success";
}else{
// failure
}
}
}
?>
参考文献如下：
已编辑：
根据您的评论，
2x borders on side of . for example then i get a error, it add's a style(border-left:1px solid red;border-right:1px solid red;) or it add's a class(recaptcha-error). When success shows only the reCaptcha green mark withuot a border.
这是解决方案，
你的样式表应该是这样的：
<style>
.error {
border:5px solid red;
}
.success{
border:5px solid blue;
}
</style>
你的HTML就这样，你的jQuery应该是这样的：
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('[name="submit"]').click(function(e){
var recaptchaResponse = grecaptcha.getResponse();
if(recaptchaResponse == ""){
$(".g-recaptcha").addClass("error");
}else{
$(".g-recaptcha").addClass("success");
}
});
});
</script>