PHP图形验证码生成代码与包括Ajax验证实例应用(1/2)
PHP图形验证码生成代码与包括Ajax验证实例应用 以前写的验证码程序都是提供了源代码，但是没真的实的图形验证码生成到验证实例，这次我们一个完整的php 验证实例产生了。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.111cn.net/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';
}
?> 1 2
PHP之友评论