1062人阅读
* 开启session
* 随机生成4位数的验证码(包涵字母或数字)
*$bg背景色
session_start();
for($i=0;$i&4;$i++){$rand.=dechex(rand(1,15));}
$_SESSION[check_pic]=$
$im=imagecreatetruecolor(50,18);
$bg=imagecolorallocate($im,0,0,0);
$te=imagecolorallocate($im,255,255,255);
imagestring($im,rand(1,3),rand(1,20),rand(0,5),$rand,$te);
Header(&Content-type: image/PNG&);
imagejpeg($im);
//echo $_SESSION[check_pic];
//导入基本配置文件
header('Content-Type:text/charset=GB2312');
include_once(&admin_global.php&);
* 如果post会来的&用户名&和&密码&不为空，
那么进行判断用户是否为管理员
if(!empty($_POST[username])&& !empty($_POST[password])) $db-&Get_user_login($_POST[username],$_POST[password]);
&script language=&JavaScript& type=&text/javascript& src=&ajaxs/vcode_js.js&&&/script&
&meta http-equiv='Content-Type' content='text/ charset=gb2312'&
&meta name='Author' content='Alan'&
&link rev=MADE href='mailto:'&&title&后台管理&/title&
&link rel='stylesheet' type='text/css' href='images/private.css'&
&script& if(self!=top){ window.open(self.location,'_top'); } &/script&
&br&&br&&br&
&form action=&& method=&post&&
&table border=0 cellspacing=1 align=center class=form&
&th colspan=&2&&用户登录&/th&
&td align=&right&&登录用户:&/td&
&td&&input type=&text& name=&username& value=&& size=&20& maxlength=&40&/&
&td align=&right&&登录密码:&/td&
&td&&input type=&password& name=&password& value=&& size=&20& maxlength=&40&/&
&td align=&right&&验证码:&/td&
&td&&input type=&text& name=&yzm& value=&& size=&20& maxlength=&40&
onkeyup=&javascript:vcode_check('yzm')&/&
&img id=vcode_img src=&ajaxs/vcode.php& alt=&看不清？点击换一张& align=&absmiddle& onclick=&javascript:this.src='ajaxs/vcode.php?image='+new Date().getTime();&/&
&span id=vcode_tx&&/span&
&td colspan=&2& align=&center& height='30'&
&input type=&submit& name=&update& value=& 登录 & onclick=&return check();&/&
&/body&&/html&
vcode_check.php
* Created on
* To change the template for this generated file go to
* Window - Preferences - PHPeclipse - PHP - Code Templates
session_start();
//include(&../conn/connDB.php&);
header('Content-Type:text/charset=GB2312');
$vocode=$_GET[&vocode&];
if(!empty($vocode)){
if($vocode==$_SESSION[check_pic]){
//填写正确
/*echo &&span style='width:27
background:url(images/icon.png) repeat-y; background-position:-25px 0px
'&&/span&&;*/
}else{//echo &&font color=red& 验证码有误:&.$_SESSION[check_pic].&&/font&&;
/*echo &&span style='width:27
background:url(images/icon.png) repeat-y; background-position:0px 0px
'&&/span&&;*/
//echo &验证码不能为空！&;
vcode_js.js
GetXmlHttpObject():
This function is checked for brower which is different.
And choose right brower, to create XMLHttpRequest object.
var bl=&0&;
function GetXmlHttpObject()
try{// Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
{// Internet Explorer
try{xmlHttp=new ActiveXObject(&Msxml2.XMLHTTP&);}
catch (e){xmlHttp=new ActiveXObject(&Microsoft.XMLHTTP&);}
if(!xmlHttp){
alert(&Cant Not Create XMLHttpRequest Object,Please Choose Other Brower&);
return xmlH
function vcode_check(id){
GetXmlHttpObject();
var str=document.getElementById(id).
var url=&ajaxs/vcode_check.php?vocode=&+
xmlHttp.onreadystatechange=DealD
xmlHttp.open(&GET&,url,true);
xmlHttp.send(null);
function DealData(){
if (xmlHttp.readyState==4 || xmlHttp.readyState==&complete&)
if(xmlHttp.responseText==&0&){
document.getElementById(&vcode_tx&).innerHTML=&value=0&;}
else if(xmlHttp.responseText==&1&){
document.getElementById(&vcode_tx&).innerHTML=&&font color=red&worng&/font&&;}
else if(xmlHttp.responseText==&2&){
document.getElementById(&vcode_tx&).innerHTML=&right&;}
function check(){
if(bl==&0&){alert(&vocode is null&);}else{
if(bl==&1&){alert(&vocode is worng!please try again&);}
else if(bl==&2&){;}}
&&相关文章推荐
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：687455次
积分：7726
积分：7726
排名：第2758名
原创：89篇
转载：311篇
评论：118条
(1)(1)(1)(4)(13)(18)(16)(8)(2)(3)(4)(6)(1)(3)(8)(2)(5)(3)(5)(36)(34)(48)(27)(22)(27)(7)(12)(10)(10)(2)(12)(4)(17)(17)(9)(1)(2)Ajax实现提交表单时验证码自动验证（原创自Zjmainstay）
本文通过展示如何实现表单提交前，验证码先检测正确性，不正确则不提交表单，更新验证码。
1、前端代码 index.html
&!DOCTYPE html&
& & &title&验证码提交自验证&/title&
& & &meta http-equiv=&Content-Type& content=&text/ charset=utf-8& /&
& & &meta http-equiv=&Content-Language& content=&zh-CN& /&
& & &form action=&doPost.php& method=&POST&&
& & & & &p class=&row&&
& & & & & & &label for=&username&&用户名&/label&
& & & & & & &input type=&text& name=&username& id=&username& /&
& & & & &/p&
& & & & &p class=&row&&
& & & & & & &label for=&mod-captcha-code&&验证码&/label&
& & & & & & &input name=&code& id=&mod-captcha-code& size=&6& class=&zjcaptcha& style=&width:80px& type=&text&/&
& & & & & & &img class=&code-img& style=&height:30width:80& src=&createcode.php?t=0& onclick=&this.src=this.src.substring(0,this.src.indexOf('?')+1)+Math.random();& /&
& & & & & & &script type=&text/javascript& src=&/jquery/jquery-1.8.2.min.js&&&/script&
& & & & & & &p class=&yzmtips& style=&color:red&&&/p&
& & & & &/p&
& & & & &p class=&row&&
& & & & & & &input type=&submit& value=&提交& class=&submitBtn&/&
& & & & &/p&
& & &/form&
(function($){
& & $(document).ready(function(){
& & & & $(&.submitBtn&).click(function() {
& & & & & & var obj = $(this);
& & & & & & $.ajax({
& & & & & & & & url:'checkcode.php',
& & & & & & & & type:'POST',
& & & & & & & & data:{code:$.trim($(&input[name=code]&).val())},
& & & & & & & & dataType:'json',
& & & & & & & & async:false,
& & & & & & & & success:function(result) {
& & & & & & & & & & if(result.status == 1) {
& & & & & & & & & & & & obj.parents('form').submit(); //验证码正确提交表单
& & & & & & & & & & }else{
& & & & & & & & & & & & $(&.code-img&).click();
& & & & & & & & & & & & $(&.yzmtips&).html('验证码错误！');
& & & & & & & & & & & & setTimeout(function(){
& & & & & & & & & & & & & & $(&.yzmtips&).empty();
& & & & & & & & & & & & },3000);
& & & & & & & & & & }
& & & & & & & & },
& & & & & & & & error:function(msg){
& & & & & & & & & & $(&.yzmtips&).html('Error:'+msg.toSource());
& & & & & & & & }
& & & & & & })
& & & & & &
& & & & })
})(jQuery);
2、后端验证码检测 checkcode.php
* 用户验证码验证文件
* @Author:Zjmainstay
* @version : 1.0
* @creatdate:
session_start();
echo json_encode(array('status'=&(int)($_SESSION[&CHECKCODE&] == $_POST['code'])));php验证码, jquery, ajax验证码-freejs.net代码演示
&&&&php验证码, jquery, ajax验证码()
php验证码, jquery, ajax验证码
&可以点击刷新验证码，提交会验证
&id=&main&&&&&
&&&&&class=&demo&&&&&
&&&&&&&&1、数字验证码&&&&
&&&&&&&&验证码：&type=&text&&class=&input&&id=&code_num&&name=&code_num&&maxlength=&4&&&src=&code_num.php&&id=&getcode_num&&title=&看不清,点击换一张&&align=&absmiddle&&&&&
&&&&&&&&type=&button&&class=&btn&&id=&chk_num&&value=&提交&&&&&&
&&&&&class=&demo&&&&&
&&&&&&&&2、数字+字母验证码&&&&
&&&&&&&&验证码：&type=&text&&class=&input&&id=&code_char&&maxlength=&4&&&&src=&code_char.php&&id=&getcode_char&&title=&看不清，点击换一张&&align=&absmiddle&&&&&
&&&&&&&&&type=&button&&class=&btn&&id=&chk_char&&value=&提交&&&&&&
&&&&&class=&demo&&&&&
&&&&&&&&3、中文验证码&&&&
&&&&&&&&验证码：&type=&text&&class=&input&&id=&code_zh&&maxlength=&4&&&&src=&code_zh.php&&id=&getcode_zh&&title=&看不清，点击换一张&&align=&absmiddle&&&&&
&&&&&&&&&type=&button&&class=&btn&&id=&chk_zh&&value=&提交&&&&&&
&&&&&class=&demo&&&&&
&&&&&&&&4、仿google验证码&&&&
&&&&&&&&验证码：&type=&text&&class=&input&&id=&code_gg&&maxlength=&4&&&&src=&code_gg.php&&id=&getcode_gg&&title=&看不清，点击换一张&&align=&absmiddle&&&&&
&&&&&&&&&type=&button&&class=&btn&&id=&chk_gg&&value=&提交&&&&&&
&&&&&class=&demo&&&&&
&&&&&&&&5、算术验证码&&&&
&&&&&&&&验证码：&type=&text&&class=&input&&id=&code_math&&maxlength=&4&&&&src=&code_math.php&&id=&getcode_math&&title=&看不清，点击换一张&&align=&absmiddle&&&&&
&&&&&&&&&type=&button&&class=&btn&&id=&chk_math&&value=&提交&&&&&&
&script&type=&text/javascript&&&&
$(function(){&&
&&&&$(&#getcode_num&).click(function(){&&
&&&&&&&&$(this).attr(&src&,'code_num.php?'&+&Math.random());&&
&&&&$(&#chk_num&).click(function(){&&
&&&&&&&&var&code_num&=&$(&#code_num&).val();&&
&&&&&&&&$.post(&chk_code.php?act=num&,{code:code_num},function(msg){&&
&&&&&&&&&&&&if(msg==1){&&
&&&&&&&&&&&&&&&&alert(&验证码正确！&);&&
&&&&&&&&&&&&}else{&&
&&&&&&&&&&&&&&&&alert(&验证码错误！&);&&
&&&&&&&&&&&&}&&
&&&&&&&&});&&
&&&&$(&#getcode_char&).click(function(){&&
&&&&&&&&$(this).attr(&src&,'code_char.php?'&+&Math.random());&&
&&&&$(&#chk_char&).click(function(){&&
&&&&&&&&var&code_char&=&$(&#code_char&).val();&&
&&&&&&&&$.post(&chk_code.php?act=char&,{code:code_char},function(msg){&&
&&&&&&&&&&&&if(msg==1){&&
&&&&&&&&&&&&&&&&alert(&验证码正确！&);&&
&&&&&&&&&&&&}else{&&
&&&&&&&&&&&&&&&&alert(&验证码错误！&);&&
&&&&&&&&&&&&}&&
&&&&&&&&});&&
&&&&$(&#getcode_zh&).click(function(){&&
&&&&&&&&$(this).attr(&src&,'code_zh.php?'&+&Math.random());&&
&&&&$(&#chk_zh&).click(function(){&&
&&&&&&&&var&code_zh&=&escape($(&#code_zh&).val());&&
&&&&&&&&$.post(&chk_code.php?act=zh&,{code:code_zh},function(msg){&&
&&&&&&&&&&&&if(msg==1){&&
&&&&&&&&&&&&&&&&alert(&验证码正确！&);&&
&&&&&&&&&&&&}else{&&
&&&&&&&&&&&&&&&&alert(&验证码错误！&);&&
&&&&&&&&&&&&}&&
&&&&&&&&});&&
&&&&$(&#getcode_gg&).click(function(){&&
&&&&&&&&$(this).attr(&src&,'code_gg.php?'&+&Math.random());&&
&&&&$(&#chk_gg&).click(function(){&&
&&&&&&&&var&code_gg&=&$(&#code_gg&).val();&&
&&&&&&&&$.post(&chk_code.php?act=gg&,{code:code_gg},function(msg){&&
&&&&&&&&&&&&if(msg==1){&&
&&&&&&&&&&&&&&&&alert(&验证码正确！&);&&
&&&&&&&&&&&&}else{&&
&&&&&&&&&&&&&&&&alert(&验证码错误！&);&&
&&&&&&&&&&&&}&&
&&&&&&&&});&&
&&&&$(&#getcode_math&).click(function(){&&
&&&&&&&&$(this).attr(&src&,'code_math.php?'&+&Math.random());&&
&&&&$(&#chk_math&).click(function(){&&
&&&&&&&&var&code_math&=&$(&#code_math&).val();&&
&&&&&&&&$.post(&chk_code.php?act=math&,{code:code_math},function(msg){&&
&&&&&&&&&&&&if(msg==1){&&
&&&&&&&&&&&&&&&&alert(&验证码正确！&);&&
&&&&&&&&&&&&}else{&&
&&&&&&&&&&&&&&&&alert(&验证码错误！&);&&
&&&&&&&&&&&&}&&
&&&&&&&&});&&
&/script&&&
&code_num.php
session_start();&&
getCode(4,60,20);&&
function&getCode($num,$w,$h)&{&&
&&&&$code&=&&&;&&
&&&&for&($i&=&0;&$i&&&$num;&$i++)&{&&
&&&&&&&&$code&.=&rand(0,&9);&&
&&&&$_SESSION[&freejs_num&]&=&$code;&&
&&&&Header(&Content-type:&image/PNG&);&&
&&&&$im&=&imagecreate($w,&$h);&&
&&&&$black&=&imagecolorallocate($im,&0,&0,&0);&&
&&&&$gray&=&imagecolorallocate($im,&200,&200,&200);&&
&&&&$bgcolor&=&imagecolorallocate($im,&255,&255,&255);&&
&&&&imagefill($im,&0,&0,&$gray);&&
&&&&imagerectangle($im,&0,&0,&$w-1,&$h-1,&$black);&&
&&&&$style&=&array&(&&
&&&&&&&&$black,&&
&&&&&&&&$black,&&
&&&&&&&&$black,&&
&&&&&&&&$black,&&
&&&&&&&&$black,&&
&&&&&&&&$gray,&&
&&&&&&&&$gray,&&
&&&&&&&&$gray,&&
&&&&&&&&$gray,&&
&&&&&&&&$gray&&
&&&&imagesetstyle($im,&$style);&&
&&&&$y1&=&rand(0,&$h);&&
&&&&$y2&=&rand(0,&$h);&&
&&&&$y3&=&rand(0,&$h);&&
&&&&$y4&=&rand(0,&$h);&&
&&&&imageline($im,&0,&$y1,&$w,&$y3,&IMG_COLOR_STYLED);&&
&&&&imageline($im,&0,&$y2,&$w,&$y4,&IMG_COLOR_STYLED);&&
&&&&for&($i&=&0;&$i&&&80;&$i++)&{&&
&&&&&&&&imagesetpixel($im,&rand(0,&$w),&rand(0,&$h),&$black);&&
&&&&$strx&=&rand(3,&8);&&
&&&&for&($i&=&0;&$i&&&$num;&$i++)&{&&
&&&&&&&&$strpos&=&rand(1,&6);&&
&&&&&&&&imagestring($im,&5,&$strx,&$strpos,&substr($code,&$i,&1),&$black);&&
&&&&&&&&$strx&+=&rand(8,&12);&&
&&&&imagepng($im);&&
&&&&imagedestroy($im);&&
&chk_code.php
session_start();&&
$action&=&$_GET['act'];&&
$code&=&trim($_POST['code']);&&
if($action=='num'){&&&
&&&&if($code==$_SESSION[&freejs_num&]){&&
&&&&&&&echo&'1';&&
}elseif($action=='char'){&&
&&&&if($code==$_SESSION[&freejs_char&]){&&
&&&&&&&echo&'1';&&
}elseif($action=='zh'){&&
&&&&$code&=&uniDecode($code,'utf-8');&&
&&&&$ses&=&iconv('gbk','utf-8',$_SESSION[&freejs_zh&]);&&
&&&&if($code==$ses){&&
&&&&&&&echo&'1';&&
}elseif($action=='gg'){&&
&&&&if(strtolower($code)==$_SESSION[&freejs_gg&]){&&
&&&&&&&echo&'1';&&
}elseif($action=='math'){&&
&&&&if($code==$_SESSION[&freejs_math&]){&&
&&&&&&&echo&'1';&&
function&uniDecode($str,&$charcode)&{&&
&&&&$text&=&preg_replace_callback(&/%u[0-9A-Za-z]{4}/&,&toUtf8,&$str);&&
&&&&return&mb_convert_encoding($text,&$charcode,&'utf-8');&&
function&toUtf8($ar)&{&&
&&&&foreach&($ar&as&$val)&{&&
&&&&&&&&$val&=&intval(substr($val,&2),&16);&&
&&&&&&&&if&($val&&&0x7F)&{&&&
&&&&&&&&&&&&$c&.=&chr($val);&&
&&&&&&&&}&&
&&&&&&&&elseif&($val&&&0x800)&{&&&
&&&&&&&&&&&&$c&.=&chr(0xC0&|&($val&/&64));&&
&&&&&&&&&&&&$c&.=&chr(0x80&|&($val&%&64));&&
&&&&&&&&}&else&{&&&
&&&&&&&&&&&&$c&.=&chr(0xE0&|&(($val&/&64)&/&64));&&
&&&&&&&&&&&&$c&.=&chr(0x80&|&(($val&/&64)&%&64));&&
&&&&&&&&&&&&$c&.=&chr(0x80&|&($val&%&64));&&
&&&&&&&&}&&
&&&&return&$c;&&
其他的几个freejs.net并不免费提供，上面2个也使用的比较多原文地址: