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隐藏域
}