php+jQuery+ajax网页验证码-php手册-PHP中文网

php+jQuery+ajax网页验证码

php中文网

发布： 2016-06-06 19:59:49

原创

1497人浏览过

一般我们在做网页的时候，再设计用户登录，注册或者留言的时候都经常用到验证码，下面是一种简单实用的php网页验证码的生成和检验过程。 jQuery下载地址：http://docs.jquery.com/Downloading_jQuery testcode.php !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1

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

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

testcode.php

jQuery点击成语验证网页特效

jQuery点击成语验证网页特效是一款基于jQuery+CSS3制作的点击文字依次顺序验证码效果。

查看详情

<!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"}';
?>

登录后复制