WD1X.COM - 问答一下,轻松解决,电脑应用解决专家
主板显卡CPU内存显示器
硬盘维修显卡维修显示器维修
注册表系统命令DOS命令Win8
存储光存储鼠标键盘
内存维修打印机维修
WinXPWin7Win11Linux
硬件综合机箱电源散热器手机数码
主板维修CPU维修键盘鼠标维修
Word教程Excel教程PowerPointWPS
网络工具系统工具图像工具
数据库javascript服务器
PHP教程CSS教程XML教程

PHP图形验证码生成代码与Ajax验证实例应用

更新时间:2012-03-05 11:55 作者:佚名点击:

php教程图形验证码生成代码与包括ajax验证实例应用
以前写的验证码程序都是提供了源代码,但是没真的实的图形验证码生成到验证实例,这次我们一个完整的php 验证实例产生了。

有3个文件:
authcode.php-----验证码的生成php文件
authcode.html-----前台显示页面
dealauthcode.php-----ajax提交到的后台处理判断验证码是否正确的处理页面

*/
?>

前台调用验证码代码

<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns="http://www.update8.com/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>验证码ajax验证</title>
<style type="text/css教程">
        *{ font-size:12px;}
        a{ text-decoration:none;}
        a:hover{ text-decoration:underline; color:red;}
</style>
<script language="网页特效" src="http://code.jquery.com/jquery-1.4.2.min.网页特效"></script>
<script language="网页特效">
        $(document).ready(function(){
                /*----------------看不清楚,换张图片-----------*/
                $("#chang_authcode_btn").click(function(){
                        var authcode_url = "authcode.php?t="+math.random(0,1);
                        $("#authcode_img").attr('src',authcode_url);
                });               
                /*----------------检测验证码-----------*/       
                $("#authcode").bind({
                        'focusin':function(){
                                /**
                                 *得到焦点
                                 *我将img图片移除,若只改变src为'
                                 *'的话,在ie下会呈现出一个无图片的小图片,
                                 *所以我这里选择直接把img元素移除
                                 */
                                $(this).next('label').children('img').remove();
                                $(this).next('label').children('span').text('');
                        },               
                        'focusout':function(){
                                /**
                                 *失去焦点
                                 *这里要做的事情主要有下列几个:
                                 *(1)先用网页特效验证用户输入的验证是不是4位合法的字符,正则匹配
                                 *(2)如果正则匹配失败(不是合法的4位字符),在更新次验证码图片(也就是再触发一次"看不清楚"的a标签的点击事件)
                                 */
                                 var input_authcode = $(this).val();
                                 var authcode_regex = new regexp('^[a-z0-9]{4}','i');
                                 if(!authcode_regex.test(input_authcode)){//不是合法的4位字符串,显示错误信息给用户
                                        $(this).next('label').prepend("<img src='input_error.gif'/>");//加上错误图标
                                        $(this).next('label').children('span').text('输入的验证码格式错误!');//加上错误提示信息
                                        $("#chang_authcode_btn").trigger('click');//再次刷新图片
                                 }else{//ajax服务器验证,就是把用户的输入的验证码提交到服务器上的某个验证页面来处理!
                                         $.get('dealauthcode.php',{authcode:input_authcode},function(check_result){
                                                if(check_result=='mis_match'){//服务器验证没通过
                                                        $("#authcode").next('label').prepend("<img src='input_error.gif'/>");//加上错误图标
                                                        $("#authcode").next('label').children('span').text('验证码输入错误!');//加上错误提示信息
                                                        $("#chang_authcode_btn").trigger('click');//再次刷新图片
                                                }else{//服务器验证通过了
                                                        $("#authcode").next('label').prepend("<img src='input_ok.gif'/>");//加上正确图标
                                                        $("#authcode").next('label').children('span').text('验证码输入正确!');//加上正确提示信息       
                                                }                                                                                
                                         });
                                 }
                        }
                });               
        });
</script>
</head>
<body>
<div >
        <div><img id="authcode_img" src="authcode.php" /> <a id="chang_authcode_btn" style="cursor:pointer">看不清楚?换一张!</a></div>
        <div>验证码:<input id="authcode" type="text" size="20" /><label><span class="error_msg"></span></label></div>
</div>
</body>
</html>

dealauthcode.php-----ajax提交到的后台处理判断验证码是否正确的处理页面

<?php
        session_start();
       $authcode = $_get['authcode'];
//这里的$_session['authcode']是在验证码authcode页面产生的
if(strtoupper($authcode)!= $_session['authcode']){   
echo 'mis_match';       
        }
?>
 


生成验证码程序 authcode.php文件

<?php
        session_start ();
        header ( 'content-type: image/png' );
        //创建图片
        $im = imagecreate($x=130,$y=45 );
        $bg = imagecolorallocate($im,rand(50,200),rand(0,155),rand(0,155));

//第一次对 imagecolorallocate() 的调用会给基于调色板的图像填充背景色
        $fontcolor = imagecolorallocate ( $im, 255, 255, 255 );            

            //字体颜色
        $fontstyle = 'rock.ttf';                                           

                             //字体样式文件,这个文件是从我们

c:windowsfonts下的字体中随便选一个出来的,你们也可以替换其他的!
        //产生随机字符
        for($i = 0; $i < 4; $i ++) {
                $randasciinumarray         = array (rand(48,57),rand

(65,90));
                $randasciinum                 = $randasciinumarray [rand (

0, 1 )];
                $randstr                         = chr ( $randasciinum );
                imagettftext($im,30,rand(0,20)-rand(0,25),5+$i*30,rand

(30,35),$fontcolor,$fontstyle,$randstr);
                $authcode                        .= $randstr;
        }
        $_session['authcode']        = $authcode;
        //干扰线
        for ($i=0;$i<8;$i++){
                $linecolor        = imagecolorallocate($im,rand

(0,255),rand(0,255),rand(0,255));
                imageline ($im,rand(0,$x),0,rand(0,$x),$y,$linecolor);
        }
        //干扰点
        for ($i=0;$i<250;$i++){
                imagesetpixel($im,rand(0,$x),rand(0,$y),$fontcolor);
        }
        imagepng($im);
        imagedestroy($im); 
  


  /*
  注册的时候常常会用到注册码来防止机器恶意注册,这里我发表一个产生png图片验证码的基本图像,很简陋但思想很清晰:
1、产生一张png的图片
2、为图片设置背景色
3、设置字体颜色和样式
4、产生4位数的随机的验证码
5、把产生的每个字符调整旋转角度和位置画到png图片上
6、加入噪点和干扰线防止注册机器分析原图片来恶意注册
7、输出图片
8、释放图片所占内存

顶一下
(2)
50%
踩一下
(2)
50%
------分隔线----------------------------
你可能感兴趣的内容