Home > php教程 > php手册 > body text

php+jQuery+ajax网页验证码

WBOY
Release: 2016-06-06 19:59:49
Original
1312 people have browsed it

一般我们在做网页的时候,再设计用户登录,注册或者留言的时候都经常用到验证码,下面是一种简单实用的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



<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>


<?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">'
             .'';
	echo $codehtml;
	}
echo getCodeHtml();
 ?>

Copy after login

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);  //释放资源
?>   
Copy after login

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


Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Recommendations
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template