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隐藏域
            }
上一章目录下一章