验证此图像验证码。Jquery PHP & javascript
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11888466/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Validating this image captcha code. Jquery PHP & javascript
提问by Catia
I have the captcha creating an image in captcha.php. On my contact php page, it calls for the image & it has a reload and everything works. I just can't seem to find a way to validate it.
我有验证码在 captcha.php 中创建图像。在我的联系 php 页面上，它需要图像并重新加载并且一切正常。我似乎无法找到一种方法来验证它。
Here is the code that creates the captcha image:
这是创建验证码图像的代码：
<?php
session_start();
$word_1 = '';
$word_2 = '';
for ($i = 0; $i < 4; $i++)
{
$word_1 .= chr(rand(97, 122));
}
for ($i = 0; $i < 4; $i++)
{
$word_2 .= chr(rand(97, 122));
}
$_SESSION['random_number'] = $word_1.' '.$word_2;
$dir = '/addons/fonts/';
$image = imagecreatetruecolor(165, 50);
$font = "recaptchaFont.ttf"; // font style
$color = imagecolorallocate($image, 0, 0, 0);// color
$white = imagecolorallocate($image, 255, 255, 255); // background color white
imagefilledrectangle($image, 0,0, 709, 99, $white);
imagettftext ($image, 22, 0, 5, 30, $color, $dir.$font, $_SESSION['random_number']);
header("Content-type: image/png");
imagepng($image);
?>
That is all that is in that file.
这就是该文件中的全部内容。
Next there is the code from my actual form (contact us page):
接下来是我实际表单中的代码（联系我们页面）：
<form id="contactForm" method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>">
<table>
<tr>
<td><span class="greyText">Enter text shown:</span></td>
<td>
<div id="captcha-wrap">
<div class="captcha-box">
<img src="captcha.php" alt="" id="captcha" />
</div>
<div class="text-box">
<label>Type the two words:</label>
<input name="captcha-code" type="text" id="captcha-code">
</div>
<div class="captcha-action">
<img src="./images/captcha-refresh.png" alt="" id="captcha-refresh" />
</div>
</div>
<span id="captchaInfo">*</span>
</td>
</tr>
<tr>
<td colspan="2">
<div class="seperator"> </div>
<input type="submit" name="submit" class="styleButton" style="float:right;margin-right:10px" value="SUBMIT" /></td>
</tr>
</table>
</form>
I have other rows in that table for name, email etc, but I just removed it to make this shorter.
我在该表中还有其他行用于姓名、电子邮件等，但我只是将其删除以使其更短。
& in the document ready function for the contact page, I have this code to refresh the captcha when button is clicked:
& 在联系页面的文档准备功能中，我有这个代码可以在单击按钮时刷新验证码：
// refresh captcha
$('img#captcha-refresh').click(function() {
change_captcha();
});
function change_captcha()
{
document.getElementById('captcha').src='jquery-captcha.php?rnd=' + Math.random();
}
Next is the validation I have for the whole form itself. It works for everything but the captcha:
接下来是我对整个表单本身的验证。它适用于除验证码之外的所有内容：
$(document).ready(function(){
//global vars
var form = $("#contactForm");
var name = $("#name");
var nameInfo = $("#nameInfo");
var telephone = $("#telephone");
var telephoneInfo = $("#telephoneInfo");
var email = $("#email");
var emailInfo = $("#emailInfo");
var message = $("#message");
var messageInfo = $("#messageInfo");
var captcha = $("#captcha-code");
var captchaInfo = $("#captchaInfo");
//On blur
name.blur(validateName);
telephone.blur(validatePhone);
email.blur(validateEmail);
message.blur(validateMessage);
captcha.blur(validateCaptcha);
//On key press
name.keyup(validateName);
telephone.keyup(validatePhone);
message.keyup(validateMessage);
captcha.keyup(validateCaptcha);
//On Submitting
form.submit(function(){
if(validateName() & validateEmail() & validatePhone() & validateMessage() & validateCaptcha())
return true
else
return false;
});
function validateName(){
//if it's NOT valid
if(name.val().length < 4){
name.addClass("error");
nameInfo.text("* Name Required");
nameInfo.addClass("error");
return false;
}
//if it's valid
else{
name.removeClass("error");
nameInfo.text("*");
nameInfo.removeClass("error");
return true;
}
}
function validateCaptcha(){
$.post("captchaValidate.php?"+$("#contactForm").serialize(), {
}, function(response){
if(response==1)
{
captcha.removeClass("error");
captchaInfo.text("*");
captchaInfo.removeClass("error");
return true;
}
else
{
captchaInfo.text("* Please enter the words you see in the box above. If you are having trouble seeing it, click the refresh button.");
captchaInfo.addClass("error");
captchaInfo.css({'float': 'left', 'margin-left': '5px'});
return false;
}
});
}
});
I again removed some of the code above to make this shorter but I left the validateName function so you can see how I pretty much did the rest of them.
我再次删除了上面的一些代码以使其更短，但我保留了 validateName 函数，因此您可以看到我几乎是如何完成其余部分的。
In the validateCaptcha code it directs to this page/code:
在 validateCaptcha 代码中，它指向此页面/代码：
<?php
session_start();
if(@strtolower($_REQUEST['captcha-code']) == strtolower($_SESSION['random_number']))
{
echo 1;// YAY!
}
else
{
echo 0; // invalid code
}
?>
Any help on this would be REALLY appreciated I've been stuck for so long! I have tried a few things already but nothing seems to work.
对此的任何帮助将非常感谢我已经被困了这么久！我已经尝试了一些东西，但似乎没有任何效果。
回答by Abid Hussain
Read this:--
读这个： -
PHP jQuery Validation CAPTCHA Code Sample
PHP jQuery 验证 CAPTCHA 代码示例
http://captcha.biz/doc/php/samples/php-jquery-validation-captcha-sample.html
http://captcha.biz/doc/php/samples/php-jquery-validation-captcha-sample.html
PHP Captcha Code
PHP 验证码
http://www.9lessons.info/2011/01/php-captcha-code.html
http://www.9lessons.info/2011/01/php-captcha-code.html
jquery-validation / demo / captcha
jquery 验证/演示/验证码
https://github.com/jzaefferer/jquery-validation/blob/master/demo/captcha/index.php
https://github.com/jzaefferer/jquery-validation/blob/master/demo/captcha/index.php
回答by Laith
If you don't mind using a simple math captcha, this one is very easy to integrate into your own code. It uses both PHP and jQuery, so it works with or without Javascript enabled. I wrote a tutorial on it and provide a project download with all the project files that works out of the box.
如果您不介意使用简单的数学验证码，这个很容易集成到您自己的代码中。它同时使用 PHP 和 jQuery，因此无论是否启用 Javascript，它都可以工作。我写了一个关于它的教程，并提供了一个项目下载，其中包含所有开箱即用的项目文件。
Making a Simple Math Captcha using both jQuery and PHP http://www.sinawiwebdesign.com/blog/topics/programming/jquery-and-php-and-catcha-tutorial/
使用 jQuery 和 PHP 制作简单的数学验证码 http://www.sinawiwebdesign.com/blog/topics/programming/jquery-and-php-and-catcha-tutorial/
I hope this helps.
我希望这有帮助。
回答by Jydipsinh Parmar
Create simple capcha in php with jquery validation Example if you have any help for that
如果您对此有任何帮助，请使用 jquery 验证示例在 php 中创建简单的验证码
Create capcha code need three files
创建验证码需要三个文件
capcha.php
form.php
check-capcha.php
download font arial.ttf addded in fonts folder http://www5.miele.nl/apps/vg/nl/miele/mielea02.nsf/0e87ea0c369c2704c12568ac005c1831/07583f73269e053ac1257274003344e0?OpenDocument
下载字体 arial.ttf 添加到字体文件夹http://www5.miele.nl/apps/vg/nl/miele/mielea02.nsf/0e87ea0c369c2704c12568ac005c1831/07583f73269e053ac104034e053ac104e4e
<?php
session_start();
$string = '';
for ($i = 0; $i < 5; $i++) {
// this numbers refer to numbers of the ascii table (lower case)
$string .= chr(rand(97, 122));
}
$_SESSION['random_code'] = $string;
$data['code'] = $string;
$dir = 'fonts/';
if(!is_dir($dir)){
mkdir($dir);
}
$image = imagecreatetruecolor(170, 60);
$black = imagecolorallocate($image, 0, 0, 0);
$color = imagecolorallocate($image, 200, 100, 90); // red
$white = imagecolorallocate($image, 255, 255, 255);
imagefilledrectangle($image,0,0,399,99,$white);
imagettftext ($image, 30, 0, 10, 40, $color, $dir."arial.ttf", $_SESSION['random_code']);
$save= "test.png";
imagepng($image,$save);
ob_start();
imagedestroy($image);
echo json_encode($data);
?>
form.php
<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.15.0/jquery.validate.js"></script>
<script type="application/javascript">
$(document).ready(function(e) {
$('#test').validate({
rules:{
capcha:{required: true,
remote: {
url: "check-capcha.php",
type: "post",
data:{hiddencapcha:function(){return $('#hidden_capcha').val()}}
}
}
},
messages:{
capcha:{
remote:"invalid capcha"
}
}
});
$.ajax({
url: "capcha.php",
success: function( result ) {
var newd = JSON.parse(result);
$('input[name=hidden_capcha]').val(newd.code);
$('#capchas').attr('src',"test.png?"+ new Date().getTime());
},error: function(){ alert(result)}
});
$('#generate_capcha').click(function(){
$.ajax({
url: "capcha.php",
success: function( result ) {
var newd = JSON.parse(result);
$('input[name=hidden_capcha]').val(newd.code);
$('#capchas').attr('src',"test.png?"+ new Date().getTime());
},error: function(){ alert(result)}
});
});
});
</script>
<form name="test" id="test">
<span id="capchas_images"><img id="capchas" src="test.png" /></span> <a href="javascript:void(0)" id="generate_capcha">Refresh</a>
<input type="text" name="capcha" />
<input type="hidden" name="hidden_capcha" id="hidden_capcha" />
</form>
check-capch.php
<?php
if($_POST['capcha']==$_POST['hiddencapcha'])
{
echo "true";
}else{
echo "false";
}
?>
http://myphpinformation.blogspot.in/2016/05/create-simple-capcha-in-php-with-jquery-validation.html
http://myphpinformation.blogspot.in/2016/05/create-simple-capcha-in-php-with-jquery-validation.html
