- PHP典型模塊與項目實戰大全
- 明日科技等等編著
- 1633字
- 2018-12-30 10:45:07
1.5 用戶登錄
1.5.1 用戶登錄功能概述
用戶登錄功能就是對用戶輸入的賬號、密碼及驗證碼進行驗證。驗證包括信息是否為空、驗證碼是否錯誤、用戶計算機是否已經被鎖定、用戶是否存在、用戶是否激活、用戶名和密碼是否匹配、用戶登錄次數是否達到上限等。登錄功能的運行結果如圖1.12所示。

圖1.12 單擊“登錄”按鈕后的運行結果
登錄功能有3個核心文件,分別是login.php(用戶登錄頁)、login.js(登錄信息驗證腳本)和login_chk.php(登錄處理頁)。
1.5.2 登錄頁面設計
1.登錄頁中的元素名稱和屬性
相對于注冊頁面來說,登錄頁(login.php)中的表單元素要少很多,也沒有那么復雜。登錄頁元素名稱和屬性值如表1.2所示。
表1.2 登錄頁中的元素名稱和屬性

2.登錄信息驗證腳本(login.js)
在登錄頁login.php中,載入了login.js腳本文件,通過該腳本文件完成對登錄用戶的所有驗證操作,其代碼如下:
function $(id){ return document.getElementById(id); } window.onload = function(){ … }
接下來的函數功能是焦點自動下移。當焦點移動到最后一個文本框即驗證碼輸入框后,再次按下<Enter>鍵,將調用chklg()函數對用戶輸入的信息進行驗證,代碼如下:
$(' lgname' ).focus(); //光標定位到用戶名輸入框 $(' lgname' ).onkeydown = function(){ //處理用戶名輸入庫的鍵盤按下事件 if(event.keyCode == 13){ //當按下<Enter>鍵時,光標自動下移 $(' lgpwd' ).select(); //密碼框獲取焦點 } } $(' lgpwd' ).onkeydown = function(){ if(event.keyCode == 13){ //處理密碼框的鼠標按下事件 $(' lgchk' ).select(); //驗證碼文本框獲得焦點 } } $(' lgchk' ).onkeydown = function(){ //處理驗證碼輸入框的鼠標按下事件 if(event.keyCode == 13){ chklg(); //調用chklg()函數 } } $(' lgbtn' ).onclick = chklg;
接下來的代碼是進行最基本的檢測,包括用戶名要合法、信息不能為空、驗證碼輸入錯誤等,代碼如下:
function chklg(){ /*判斷用戶名是否合法,用戶名第一位必須是英文字母,不允許有特殊字符*/ if($(' lgname' ).value.match(/^[a-zA-Z_]\w*$/) == null){ alert(’請輸入合法名稱’); $(' lgname' ).select(); return false; } /*用戶名是否為空*/ if($(' lgname' ).value == ' ' ){ alert(’請輸入用戶名!' ); $(' lgname' ).focus(); return false; } /*密碼是否為空*/ if($(' lgpwd' ).value == ' ' ){ alert(’請輸入密碼!' ); $(' lgpwd' ).focus(); return false; } /*驗證碼是否為空*/ if($(' lgchk' ).value == ' ' ){ alert(’請輸入驗證碼’); $(' lgchk' ).select(); return false; } /*驗證碼輸入是否正確*/ if($(' lgchk' ).value ! = $(' chknm' ).value){ alert(’驗證碼輸入錯誤’); $(' lgchk' ).select(); return false; }
接下來,判斷客戶端的Cookie值是否大于3,如果大于3,說明用戶是非法操作的,將停止繼續執行,代碼如下:
count = document.cookie.split(' ; ' )[0]; //獲取Cookie信息 if(count.split(' =' )[1] >= 3){ alert(’因為您的非法操作,您將無法再執行登錄操作’); return false; }
最后,將用戶輸入的信息傳遞給login_chk .php頁進行處理,代碼如下:
url = ' login_chk.php? act=' +(Math.random())+' &name=' +$(' lgname' ). value+' &pwd=' +$(' lgpwd' ).value; xmlhttp.open(' get' , url, true); xmlhttp.onreadystatechange = function(){ if(xmlhttp.readystate == 4){ if(xmlhttp.status == 200){ //獲取login_chk.php頁的返回值 msg = xmlhttp.responseText; if(msg == '0' ){ alert(’您還沒有激活,請先登錄郵箱進行激活操作。' ); }else if(msg == '1' ){ alert(’用戶名或密碼輸入錯誤,您還有2次機會’); $(' lgpwd' ).select(); }else if(msg == '2' ){ alert(’用戶名或密碼輸入錯誤,您還有1次機會’); $(' lgpwd' ).select(); } else if(msg == '4' ){ alert(’用戶名輸入錯誤’); $(' lgname' ).select(); } else if(msg == ' -1' ){ alert(’登錄成功’); location = ' main.php' ; }else{ alert(msg); } } } } xmlhttp.send(null); }
1.5.3 登錄處理頁
在登錄處理頁(login_chk.php)中,對表單中提交的用戶名、密碼進行驗證,包括用戶名是否存在、用戶名是否被激活、用戶登錄次數、密碼是否正確等,最終返回驗證結果,其代碼如下:
<? php session_start(); //開啟Session支持 header(' Content-Type:text/html; charset=gb2312' ); //設置頭信息 include_once ' conn/conn.php' ; //載入數據庫類 $name = $_GET[' name' ]; $pwd = $_GET[' pwd' ]; //獲取名稱和密碼 if(! empty($name) and ! empty($pwd)){ //得到當前數據表中的count字段和active字段 $sql = "select name, count, active from tb_member where name = '".$name."' "; $active = $conne->getFields($sql,2); $count = $conne->getFields($sql,1); $conne->close_rst(); //判斷用戶是否存在 if($active == ' ' ){ if(is_null($_COOKIE[' count' ]) or $_COOKIE[' count' ] == 0){ setcookie(' count' ,1); }else{ setcookie(' count' , $_COOKIE[' count' ]+1); } $reback = 4; }else if($active == 0){ //判斷用戶是否被激活 $reback = '0' ; }else if($count >= 3){ $reback = '3' ; //判斷用戶的登錄次數 }else{ $sql .= " and password = ' ".md5($pwd)."' "; $num = $conne->getRowsNum($sql); if($num == 0 or $num == ' ' ){ //如果用戶密碼錯誤,登錄次數加1 $num = $conne->uidRst("update tb_member set count = ". ($count+1)." where name = ' ".$name."' "); $reback = ($count+1); }else{ //登錄成功,清空count字段值 if($count ! = 0){ $num = $conne->uidRst("update tb_member set count = 0 where name = ' ".$name."' "); } //設置cookie if(isset($_COOKIE[' count' ]) and $_COOKIE[' count' ] ! = 0){ setcookie(' count' ,0); } $_SESSION[' name' ] = $name; $reback = ' -1' ; } } } echo $reback; ?>
1.5.4 生成及刷新驗證碼
驗證碼生成應用的是GD2函數庫中的函數,操作存儲于valcode.php文件中,其完整代碼可以參考本章1.2.3節,這里不再贅述。
當頁面第一次被載入時,將執行login.js中的showval()函數來生成驗證碼,并且調用valcode.php文件以圖像形式輸出驗證碼。因為驗證碼中帶有干擾串,如果用戶看不清,可以單擊首頁中“看不清”超鏈接來再次執行shwoval()函數,即刷新驗證碼。login.js腳本中showval()函數的代碼如下:
showval(); //調用showval()函數生成圖文驗證碼 $(' changea' ).onclick = showval; //更換驗證碼 //驗證碼生成函數 function showval(){ num = ' ' ; for(i=0; i<4; i++){ … //生成隨機數,見第1.2.3節 } $(' chkid' ).src=' valcode.php? num=' +num; //顯示圖片驗證碼 $(' chknm' ).value = num; //將驗證碼保存到chknm隱藏域 }
- Getting Started with React
- Practical Internet of Things Security
- CentOS 7 Linux Server Cookbook(Second Edition)
- 基于免疫進化的算法及應用研究
- Cassandra Design Patterns(Second Edition)
- Learn Programming in Python with Cody Jackson
- Building Mobile Applications Using Kendo UI Mobile and ASP.NET Web API
- 移動互聯網軟件開發實驗指導
- Web前端應用開發技術
- UNIX Linux程序設計教程
- 21天學通C++(第5版)
- Everyday Data Structures
- RocketMQ實戰與原理解析
- JavaScript悟道
- AutoCAD基礎教程