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.w3.org/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>
1 2
