PHP+jQuery 注冊模塊的改進(jìn)（一）：驗證碼存入SESSION
更新時間：2014年10月14日 14:18:01 作者：小dee
本文主要是對上一篇文章模進(jìn)行改進(jìn)，把驗證碼寫入SESSION而不是把驗證碼的文字返回客戶端的隱藏域，否則驗證碼的意義就不復(fù)存在啦
需要修改的幾個文件：
①register.php 生成隨機(jī)數(shù)和加密值
把register.html改為register.php，并開啟session；
把register.js中生成隨機(jī)數(shù)的函數(shù)寫在register.php中，并改用php方法
<?php session_start();?>
....
<?php
//生成隨機(jī)數(shù)函數(shù)
function showval(){
$num = "";
for($i=0;$i<4;$i++){
$tmp = rand(1,15);
if ($tmp > 9) {
switch ($tmp) {
case(10):
$num .= 'a';
break;
case(11):
$num .= 'b';
break;
case(12):
$num .= 'c';
break;
case(13):
$num .= 'd';
break;
case(14):
$num .= 'e';
break;
case(15):
$num .= 'f';
break;
}
} else {
$num .= $tmp;
}
}
return $num;
}
//生成隨機(jī)數(shù)
$mdnum = md5(showval());
//把隨機(jī)數(shù)和經(jīng)過加密的隨機(jī)數(shù)都存入session
$_SESSION['num'] = showval();
$_SESSION['mdnum'] = $mdnum;
?>
<!--驗證碼-->
<div class="ipt iptend">
<input type='text' id='yzm' name='yzm' placeholder="驗證碼" autocomplete="off" />
<img id='yzmpic' src='valcode.php?num=<?php echo $mdnum;?>' style="cursor:pointer" title="驗證碼" alt="驗證碼">
<a style="cursor:pointer" id='changea'>
<img id="refpic" src="templets/images/ref.jpg" alt="刷新驗證碼">
</a>
<span id='yzmchk'></span>
</div>
把生成的4位驗證碼和經(jīng)過md5加密的驗證碼都存入session，而客戶端驗證碼圖片的src屬性的參數(shù)則是那個加密過的值，因此在客戶端不會出現(xiàn)四位驗證碼的文字。
②valcode.php 把隨機(jī)數(shù)寫入圖形
在register.php中，驗證碼圖片的地址是
<img id='yzmpic' src='valcode.php?num=<?php echo $mdnum;?>' >
因此在valcode.php中，需要做相應(yīng)修改，修改之處是把原來的：
//直接傳送客戶端輸入的值$num = $_GET['num'];
修改為：
session_start();
header("content-type:image/png");
//session中保存生成的4位隨機(jī)數(shù)和經(jīng)過ms5加密的隨機(jī)數(shù)
if(isset($_SESSION['mdnum']) && $_SESSION['mdnum']!=""){
$mdnum = $_SESSION['mdnum'];
if(isset($_GET['num']) && $_GET['num']!=""){
//當(dāng)注冊頁傳遞過來的num和session中經(jīng)過加密的隨機(jī)數(shù)相等時
if($_GET['num'] == $mdnum){
if(isset($_SESSION['num']) && $_SESSION['num']!="")
//把session中保存的4位隨機(jī)數(shù)賦給$num
$num = $_SESSION['num'];
}
}
}
即客戶端圖片傳遞過來的加密的參數(shù)同session中保存的加密過的值相同時，就把session中保存的4位驗證碼寫入圖形。
valcode.php的完整代碼為：
<?php
session_start();
header("content-type:image/png");
//session中保存生成的4位隨機(jī)數(shù)和經(jīng)過ms5加密的隨機(jī)數(shù)
if(isset($_SESSION['mdnum']) && $_SESSION['mdnum']!=""){
$mdnum = $_SESSION['mdnum'];
if(isset($_GET['num']) && $_GET['num']!=""){
//當(dāng)注冊頁傳遞過來的num和session中經(jīng)過加密的隨機(jī)數(shù)相等時
if($_GET['num'] == $mdnum){
if(isset($_SESSION['num']) && $_SESSION['num']!="")
//把session中保存的4位隨機(jī)數(shù)賦給$num
$num = $_SESSION['num'];
}
}
}
$imagewidth = 150;
$imageheight = 54;
//創(chuàng)建圖像
$numimage = imagecreate($imagewidth, $imageheight);
//為圖像分配顏色
imagecolorallocate($numimage, 240,240,240);
//字體大小
$font_size = 33;
//字體名稱
$fontname = 'arial.ttf';
//循環(huán)生成圖片文字
for($i = 0;$i<strlen($num);$i++){
//獲取文字左上角x坐標(biāo)
$x = mt_rand(20,20) + $imagewidth*$i/5;
//獲取文字左上角y坐標(biāo)
$y = mt_rand(40, $imageheight);
//為文字分配顏色
$color = imagecolorallocate($numimage, mt_rand(0,150), mt_rand(0,150), mt_rand(0,150));
//寫入文字
imagettftext($numimage,$font_size,0,$x,$y,$color,$fontname,$num[$i]);
}
//生成干擾碼
for($i = 0;$i<2200;$i++){
$randcolor = imagecolorallocate($numimage, rand(200,255), rand(200,255), rand(200,255));
imagesetpixel($numimage, rand()%180, rand()%90, $randcolor);
}
//輸出圖片
imagepng($numimage);
imagedestroy($numimage);
?>
③register.js進(jìn)行驗證
驗證部分改為使用Ajax進(jìn)行驗證，把輸入的4位驗證碼傳遞給chkyzm.php文件，和session中保存的4位驗證碼進(jìn)行對比。
刷新圖片時，重新生成4位驗證碼，并和加密驗證碼一起寫入session。重新生成驗證碼的代碼寫在了refresh.php中，并在register.js中使用ajax來請求重新生產(chǎn)的4位驗證碼和加密驗證碼，并通過jQuery把加密驗證碼的值作為圖片的src屬性的參數(shù)，經(jīng)過參數(shù)和session比對后valcode.php會重新生成4位驗證碼的圖片
register.js驗證碼部分的代碼為：
//驗證碼按鈕
$("#refpic").hover(function(){
$(this).attr("src","templets/images/refhover.jpg");
},function(){
$(this).attr("src","templets/images/ref.jpg");
}).mousedown(function(){
$(this).attr("src","templets/images/refclick.jpg");
}).mouseup(function(){
$(this).attr("src","templets/images/ref.jpg");
});
//刷新驗證碼
function postyzm(){
$.post("./../refresh.php",function(data,textStatus){
$('#yzmpic').attr("src","valcode.php?num="+data);
})
}
$('#yzmpic').click(function(){
postyzm();
});
$('#changea').click(function(){
postyzm();
});
//驗證碼檢驗
function yzmchk(){
$.post("./../chkyzm.php",{
//要傳遞的數(shù)據(jù)
yzm : $("#yzm").val()
},function(data,textStatus){
if(data == 0){
success($("#yzmchk"),"");
yzmval = true;
}else if(data == 1){
var noticeMsg = '驗證碼不能為空';
notice($("#yzmchk"),noticeMsg);
}else{
var errorMsg = '請輸入正確的驗證碼';
error($("#yzmchk"),errorMsg);
}
});
}
//驗證碼的blur事件
$("#yzm").focus(function(){
var noticeMsg = '不區(qū)分大小寫';
notice($("#yzmchk"),noticeMsg);
}).click(function(){
var noticeMsg = '不區(qū)分大小寫';
notice($("yzmdchk"),noticeMsg);
}).keydown(function(){
if(event.keyCode == 13){
//檢驗
yzmchk();
}
}).keyup(function(){
if(event.keyCode == 13){
//提交
formsub();
}
}).blur(function(){
yzmchk();
});
chkyzm.php
<?php
session_start();
header("charset=utf-8");
if(isset($_POST['yzm']) && $_POST['yzm']!=""){
$yzm = $_POST['yzm'];
if(isset($_SESSION['num']) && $_SESSION['num']!=""){
//當(dāng)輸入的驗證碼和session里保存的num一致時
if(strtolower($yzm) == $_SESSION['num']){
//輸入正確
$state = 0;
}else{
//輸入錯誤
$state = 2;
}
}
}else{
//沒有輸入
$state = 1;
}
echo $state;
?>
refresh.php
<?php
session_start();
//生成驗證碼
function showval(){
$num = "";
for($i=0;$i<4;$i++){
$tmp = rand(1,15);
if ($tmp > 9) {
switch ($tmp) {
case(10):
$num .= 'a';
break;
case(11):
$num .= 'b';
break;
case(12):
$num .= 'c';
break;
case(13):
$num .= 'd';
break;
case(14):
$num .= 'e';
break;
case(15):
$num .= 'f';
break;
}
} else {
$num .= $tmp;
}
}
return $num;
}
$_SESSION['num'] = showval();
$_SESSION['mdnum'] = md5(showval());
echo $_SESSION['mdnum'];
顯示的效果如圖：
總結(jié)：
5個步驟：把4位驗證碼寫入session再生成圖片，客戶端圖片的參數(shù)使用加密的驗證碼，把輸入的字符同SESSION中的4位驗證碼進(jìn)行比對，刷新圖片重新生成4位驗證碼并存入session，把重新生產(chǎn)的加密驗證碼作為圖片的src參數(shù)
用圖可表示為：
（未完待續(xù)）
您可能感興趣的文章:
- php圖像處理函數(shù)大全(推薦收藏)
- PHP圖像處理之使用imagecolorallocate()函數(shù)設(shè)置顏色例子
- php圖像處理函數(shù)imagecopyresampled用法詳解
- PHP基于GD庫的圖像處理方法小結(jié)
- PHP GD 圖像處理組件的常用函數(shù)總結(jié)
- PHP圖像處理類庫MagickWand用法實例分析
- PHP 用session與gd庫實現(xiàn)簡單驗證碼生成與驗證的類方法
- 一個漂亮的php驗證碼類(分享)
- PHP生成圖片驗證碼、點擊切換實例
- php發(fā)送短信驗證碼完成注冊功能
- php生成圖片驗證碼-附五種驗證碼
- PHP 圖像處理與SESSION制作超簡單驗證碼的方法示例
相關(guān)文章
這篇文章主要介紹了YII中assets的使用示例,需要的朋友可以參考下2014-07-07
這篇文章主要為大家詳細(xì)介紹了PHP實現(xiàn)文件上傳后臺處理腳本，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-03-03
apache php mysql開發(fā)環(huán)境安裝教程
這篇文章主要為大家詳細(xì)介紹了apache php mysql開發(fā)環(huán)境安裝教程，感興趣的小伙伴們可以參考一下2016-07-07
ThinkPHP 在阿里云上的nginx.config配置實例詳解
這篇文章主要介紹了ThinkPHP 在阿里云上的nginx.config配置實例詳解,需要的朋友可以參考下2017-10-10
這篇文章主要介紹了PHP遞歸刪除多維數(shù)組中的某個值,需要的朋友可以參考下2017-04-04
這篇文章主要為大家詳細(xì)介紹了php redis實現(xiàn)對200w用戶的即時推送，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-03-03
Laravel 5.1 on SAE環(huán)境開發(fā)教程【附項目demo源碼】
這篇文章主要介紹了Laravel 5.1 on SAE環(huán)境開發(fā)方法,結(jié)合實例形式詳細(xì)分析了Laravel 5.1在SAE環(huán)境下的具體開發(fā)相關(guān)操作步驟與注意事項,需要的朋友可以參考下2016-10-10
這篇文章主要為大家詳細(xì)介紹了微信支付，php掃碼支付源碼，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-07-07
這篇文章主要介紹了PHP的switch判斷語句的“高級”用法詳解,其實本文講解的還是它的基礎(chǔ)用法,需要的朋友可以參考下2014-10-10
thinkPHP5.1框架路由::get、post請求簡單用法示例
這篇文章主要介紹了thinkPHP5.1框架路由::get、post請求簡單用法,結(jié)合實例形式分析了thinkPHP5.1路由get、post請求基本使用方法,需要的朋友可以參考下2019-05-05