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