php+jQuery+ajax网页验证码

来源：互联网发布：淘宝房产中介编辑：程序博客网时间：2024/06/06 20:53

一般我们在做网页的时候，再设计用户登录，注册或者留言的时候都经常用到验证码，下面是一种简单实用的php网页验证码的生成和检验过程。

jQuery下载地址：http://docs.jquery.com/Downloading_jQuery

testcode.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>验证码</title><style>.wrong{ color:red;}.right{ color:black;}</style><script language="javascript" src="js/jquery-1.6.min.js"></script><script language="javascript">function check_code(){var URL = "checkCode.php";var RequestData = 'action=checkcode&code='+$('#R-code').val();$.ajax({type:'POST',url:URL,data:RequestData,async:false,cache: false,success:function(responseData){var Result = eval('('+responseData+')');if(Result.verifycode=='Y'){$('#info-code').removeClass().html('验证码输入正确').addClass("right");}else $('#info-code').removeClass().html('验证码输入错误').addClass("wrong");}});}function refresh_code(){document.getElementById("imgcode").src="createCode.php?a="+Math.random();    }</script></head><body><?php function getCodeHtml(){$codehtml='<div id="codetest">'         .'<h2>Code Test</h2>'             .'<label for="R-code">Code：</label>'     .'<img id="imgcode" src="createCode.php" alt="验证码" /><a href="javascript:refresh_code()">看不清？换一张</a><br>'     .'<input id="R-code"><span id="info-code"></span><br>'         .'<input type="button" onclick="check_code();" value="Check">'             .'</div>';echo $codehtml;}echo getCodeHtml(); ?></body></html>

createCode.php

<?php //生成验证码     session_start();     $codeNum=4;      //验证码个数     $codeWidth=80;   //验证码宽度     $codeHeight=18;  //验证码高度     $code=' ';     for($i=0;$i<$codeNum;$i++){  //生成验证码 switch(rand(0,2)) { case 0:$code[$i]=chr(rand(48,57)); break;   //数字 case 1:$code[$i]=chr(rand(65,90)); break;   //大写字母             case 2:$code[$i]=chr(rand(97,122));break;   //小写字母 } }     $_SESSION["VerifyCode"]=$code;     $image=imagecreate($codeWidth,$codeHeight);     imagecolorallocate($image,255,255,255); //生成干扰像素     for($i=0;$i<80;$i++){ $dis_color=imagecolorallocate($image,rand(0,2555),rand(0,255),rand(0,255));         imagesetpixel($image,rand(1,$codeWidth),rand(1,$codeHeight),$dis_color); } //打印字符到图像     for($i=0;$i<$codeNum;$i++){ $char_color=imagecolorallocate($image,rand(0,2555),rand(0,255),rand(0,255));         imagechar($image,60,($codeWidth/$codeNum)*$i,rand(0,5),$code[$i],$char_color); }     header("Content-type:image/png");     imagepng($image);      //输出图像到浏览器     imagedestroy($image);  //释放资源?>

checkCode.php

<?php      session_start();     @$postcode = $_POST['code'];     if((strtoupper($postcode)) == strtoupper(($_SESSION["VerifyCode"])))  echo '{"verifycode":"Y"}';     else echo '{"verifycode":"N"}';?>