免费免登录游戏

書名： PHP典型模塊與項目實戰大全
作者名：明日科技等等編著
本章字數： 3443字
更新時間： 2018-12-30 10:45:06

1.4 用戶注冊

1.4.1 用戶注冊功能概述

在用戶注冊時，需要填寫的必填信息包括用戶名、密碼和E-mail。只有這些必填信息添加完整并正確時，“注冊”按鈕才被激活。這時用戶可以選擇注冊或填寫詳細信息后再進行注冊。在整個注冊的過程中，用戶的每一次操作，系統都將給出友好的提示來幫助用戶完成注冊。注冊功能的運行結果如圖1.9所示。

圖1.9 注冊頁面的運行結果

用戶注冊功能實現包含5個核心文件：register.php（注冊表單頁）、register_chk.php （注冊處理頁）、chkname.php（檢測用戶名）、register.js（注冊信息驗證腳本）和activation.php （激活處理頁）。

1.4.2 注冊頁面設計

注冊表單頁（register.php）中，主要包含填寫信息的文本框、信息提示的div標簽和3個相關按鈕。注冊頁面中使用的元素如表1.1所示。

表1.1 注冊頁面主要元素

當用戶向注冊頁面中的表單元素輸入信息時，將會觸發信息處理腳本register.js。下面逐行講解register.js腳本頁。

在register.js中，首先寫了一個通用函數，來避免重復輸入document.getElement ById（' …' ）。這個函數的意思是返回被觸發的“id=idValue”的元素對象。

      function $(idValue){
            return document.getElementById(idValue);
      }

接下來是window.onlaod事件，表示當窗體被載入時觸發。function（）{…}表示當頁面被載入時所要進行的操作。

      window.onload = function(){
          …
      }

下面所有的代碼都是上面的函數。首先將焦點定位到用戶名文本框，方便用戶操作。接下來聲明了5個變量，這5個變量代表了5項要檢測的數據的結果。當檢測數據為“合格”時，代表它的變量將等于“yes”，代碼如下：

            $(' regname' ).focus();                         //焦點定位到用戶名文本框
            //聲明5個變量，表示要檢測的5項數據
            var cname1, cname2, cpwd1, cpwd2, cemail;

chkreg（）函數是每一次觸發鍵盤事件后都要調用的。該函數判斷5個變量的值，只有當所有變量都等于“yes”時，“注冊”按鈕才會被激活。

            function chkreg(){
                if((cname1 == ' yes' ) && (cname2 == ' yes' ) && (cpwd1 == ' yes' ) && (cpwd2
                == ' yes' ) && (cemail == ' yes' )){
                  $(' regbtn' ).disabled = false;
                }else{
                  $(' regbtn' ).disabled = true;
                }
            }

接下來是驗證用戶名。當用戶輸入注冊名稱時，該函數會把用戶的每次輸入都做一下正則判斷，并根據結果設置不同cname1的值，代碼如下：

            //驗證用戶名
            $(' regname' ).onkeyup = function (){
                //獲取注冊名稱
                name = $(' regname' ).value;
                cname2 = ' ' ;
                if(name.match(/^[a-zA-Z_]*/) == ' ' ){
                  $(' namediv' ).innerHTML = ' <font color=red>必須以字母或下畫線開頭</font>' ;
                  cname1 = ' ' ;
                }else if(name.length <= 3){
                  $(' namediv' ).innerHTML = ' <font color=red>注冊名稱必須大于3位</font>' ;
                  cname1 = ' ' ;
                }else{
                  $(' namediv' ).innerHTML = ' <font color=green>注冊名稱符合標準</font>' ;
                  cname1 = ' yes' ;
                }
                chkreg();
            }

當用戶名文本框失去焦點時，即用戶輸入完畢轉到頁面中其他元素的時候，將檢測用戶名是否重復。用戶名稱判斷使用了Ajax技術調用了chkname.php頁并根據chkname.php的返回值，在div標簽中顯示判斷結果。chkname.php頁的代碼將稍后給出。

            //當用戶名稱文本框失去焦點時，系統調用處理頁查看是否存在該用戶
            $(' regname' ).onblur = function(){
                name = $(' regname' ).value;                         //獲取注冊用戶名
                //當用戶名稱的格式輸入合格后，才進行這一步操作
                if(cname1 == ' yes' ){
                  xmlhttp.open(' get' , ' chkname.php? name=' +name, true); //創建新請求
                  xmlhttp.onreadystatechange = function(){
                        if(xmlhttp.readyState == 4){
                            if(xmlhttp.status == 200){
                                var msg = xmlhttp.responseText;    //獲取響應頁內容
                                if(msg == '1' ){
                                  $(' namediv' ).innerHTML="<font color=green>恭喜您，
                                  該用戶名可以使用！</font>";
                                  cname2 = ' yes' ;
                                }else if(msg == '2' ){
                                  $(' namediv' ).innerHTML="<font color=red>用戶名被占
                                  用！</font>";
                                  cname2 = ' ' ;
                                }else{
                              $(' namediv' ).innerHTML="<font color=red>"+msg+"</font>";
                                  cname2 = ' ' ;
                                }
                            }
                        }
                        chkreg();                          //檢查是否要激活“注冊”按鈕
                  }
                  xmlhttp.send(null);
                }
            }

接下來是驗證密碼。驗證密碼時，除了可以限制密碼的長度外，還可以判斷密碼的強度。例如這段代碼中，6～12之間的密碼都是弱，如果大于12，但密碼單一，都是數字或文字，那么密碼強度就為中，否則強度就為高，代碼如下：

            //驗證密碼
            $(' regpwd1' ).onkeyup = function(){
              pwd = $(' regpwd1' ).value;
              pwd2 = $(' regpwd2' ).value;
              if(pwd.length < 6){
                  $(' pwddiv1' ).innerHTML = ' <font color=red>密碼長度最少需要6位</font>' ;
                  cpwd1 = ' ' ;
              }else if(pwd.length >= 6 && pwd.length < 12){
                  $(' pwddiv1' ).innerHTML = ' <font color=green>密碼符合要求。密碼強度：
                  弱</font>' ;
                  cpwd1 = ' yes' ;
              }else if((pwd.match(/^[0-9]*$/)! =null) —— (pwd.match(/^[a-zA-Z]*$/) ! =
                null )){
                  $(' pwddiv1' ).innerHTML = ' <font color=green>密碼符合要求。密碼強度：
                  中</font>' ;
                  cpwd1 = ' yes' ;
              }else{
                  $(' pwddiv1' ).innerHTML = ' <font color=green>密碼符合要求。密碼強度：
                  高</font>' ;
                  cpwd1 = ' yes' ;
              }
              if(pwd2 ! = ' ' && pwd ! = pwd2){
                  $(' pwddiv2' ).innerHTML = ' <font color=red>兩次密碼不一致！</font>' ;
                  cpwd2 = ' ' ;
              }else if(pwd2 ! = ' ' && pwd == pwd2){
                  $(' pwddiv2' ).innerHTML = ' <font color=green>密碼輸入正確</font>' ;
                  cpwd2 = ' yes' ;
              }
              chkreg();
            }

二次密碼的驗證比較簡單，只要第一、第二次密碼相等就可以。

                //驗證二次密碼
                $(' regpwd2' ).onkeyup = function(){
                pwd1 = $(' regpwd1' ).value;
                pwd2 = $(' regpwd2' ).value;
                if(pwd1 ! = pwd2){
                    $(' pwddiv2' ).innerHTML = ' <font color=red>兩次密碼不一致！</font>' ;
                    cpwd2 = ' ' ;
                }else{
                    $(' pwddiv2' ).innerHTML = ' <font color=green>密碼輸入正確</font>' ;
                    cpwd2 = ' yes' ;
                    chkreg();
                }
            }

接下來的E-mail驗證主要是對E-mail的格式進行檢查，輸入的字串中必須包含“@”和“.”，同時，這兩個符號的位置既不能在首和尾，也不能連在一起，代碼如下：

            //驗證E-mail
            $(' email' ).onkeyup = function(){
              emailreg = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
              $(' email' ).value.match(emailreg);
              if($(' email' ).value.match(emailreg) == null){
                  $(' emaildiv' ).innerHTML = ' <font color=red>錯誤的email格式</font>' ;
                  cemail = ' ' ;
              }else{
                  $(' emaildiv' ).innerHTML = ' <font color=green>輸入正確</font>' ;
                  cemail = ' yes' ;
              }
@@
              chkreg();
            }

上面的部分是對必填項的檢查。如果用戶希望填寫更詳細的資料，可以單擊“詳細資料”按鈕，代碼如下：

            //顯示/隱藏詳細信息
            $(' morebtn' ).onclick = function(){
@@
              if($(' morediv' ).style.display == ' ' ){
                  $(' morediv' ).style.display = ' none' ;
              }else{
                  $(' morediv' ).style.display = ' ' ;
              }
            }

所有信息添加完畢并通過驗證后，就可以注冊了。用戶單擊“注冊”按鈕時，該段代碼應用Ajax技術將獲取的用戶信息以URL的形式傳給register_chk.php頁，并根據返回結果做出相應的處理，代碼如下：

            //正式注冊
            $(' regbtn' ).onclick = function(){
              $(' imgdiv' ).style.visibility = ' visible' ;
              url = ' register_chk.php? name=' +$(' regname' ).value+' &pwd=' +$(' regpwd1' ).
              value+' &email=' +$(' email' ).value;
              url += ' &question=' +$(' question' ).value+' &answer=' +$(' answer' ).value;
              url += ' &realname=' +$(' realname' ).value+' &birthday=' +$(' birthday' ).
              value;
              url += ' &telephone=' +$(' telephone' ).value+' &qq=' +$(' qq' ).value;
              alert(url);
              return false;
              xmlhttp.open(' get' , url, true);
              xmlhttp.onreadystatechange = function(){
                  if(xmlhttp.readyState == 4){
                      if(xmlhttp.status == 200){
                          msg = xmlhttp.responseText;
                          if(msg == '1' ){
                              alert(’注冊成功，請到您的郵箱中獲取激活碼！' );
                              location=' main.php' ;
                          }else if(msg == ' -1' ){
                              alert(’您的服務器不支持POP3，請仔細檢查！! ' );
                          }else{
                              alert(msg);
                          }
                      }
                      $(' imgdiv' ).style.visibility = ' hidden' ;
                  }
              }
              xmlhttp.send(null);
            }

1.4.3 檢測用戶名是否被占用

檢測用戶名是否被占用使用的是chkname.php文件，其作用是檢查用戶名是否重復，并且返回判斷結果，該頁的代碼如下：

      <? php
      //載入數據庫類
      include_once "conn/conn.php";
      //根據name查詢tb_member表
      $sql = "select * from tb_member where name=' ".$_GET[' name' ]."' ";
      //獲取查詢結果的記錄數
      $num = $conne->getRowsNum($sql);
      if($num == 1){                                  //如果有記錄
            echo '2' ;
      }else if($num == 0){                            //如果沒有記錄
            echo '1' ;
      }else{
            echo $conne->msg_error();                 //否則出錯
      }
      ?>

1.4.4 注冊信息處理

在注冊信息處理頁（register_chk.php）中，將JavaScript傳遞過來的值連成insert語句并執行。如果添加成功，則使用郵件函數發送一封激活郵件，并彈出提示框，結果如圖1.10所示。

圖1.10 注冊成功提示框

在處理代碼中包含兩種郵件的發送方法，一種是使用局域網，向指定smtp服務器中的郵箱中發送郵件。其中的cym3100@163.com郵箱是在smtp服務器中注冊的測試郵箱；另一種是適用于互聯網，通過指定的郵箱（mrsoft8888@sohu.com是在搜狐中注冊的郵箱，用戶名mrsoft8888，密碼mrsoft8888）向用戶提供的有效郵箱中發送郵件，處理頁代碼如下：

      <? php
       include_once ' conn/conn.php' ;
       require_once ' Zend/Mail.php' ;                     //調用發送郵件的文件
       require_once ' Zend/Mail/Transport/Smtp.php' ;      //調用SMTP驗證文件
       $reback = '0' ;
       $url = ' http://' .$_SERVER[' SERVER_NAME' ].dirname($_SERVER[' SCRIPT_NAME' ]).' /
       activation.php' ;
       $url .= ' ? name=' .trim($_GET[' name' ]).' &pwd=' .md5(trim($_GET[' pwd' ]));
       //發送激活郵件
       $subject="激活碼的獲取";
        $mailbody=’注冊成功。您的激活碼是：' .' <a href="' .$url.' " Target
            ="_blank">' .$url.' </a><br>' .’請點擊該地址，激活您的用戶！' ;
        //定義郵件內容
        $envelope="mrsoft8888@sohu.com";                      //定義登錄使用的郵箱
        /*smtp測試版發送郵件方式，使用smtp作為服務器
        $tr = new Zend_Mail_Transport_Smtp('192.168.1.247' );
        $mail = new Zend_Mail();
        $mail->addTo(' cym3100@163.com' , ’獲取用戶注冊激活碼’);
        $mail->setFrom(' cym3100@163.com' , ’明日科技典型模塊程序測試郵箱，恭喜您用戶注冊成功！' );
        $mail->setSubject(’獲取注冊用戶的激活碼’);
        $mail->setBodyHtml($mailbody);
        $mail->send($tr);
        */
        /*網絡版發送郵件方法*/
        $config = array(' auth' => ' login' ,
                  'username' => ' mrsoft8888' ,
                  'password' => ' mrsoft8888' );               //定義SMTP的驗證參數
        //實例化驗證的對象
        $transport = new Zend_Mail_Transport_Smtp(' smtp.sohu.com' , $config);
        $mail = new Zend_Mail(' GBK' );                        //實例化發送郵件對象
            $mail->setBodyHtml($mailbody);                     //發送郵件主體
            //定義郵件發送使用的郵箱
        $mail->setFrom($envelope, ’明日科技典型模塊程序測試郵箱，恭喜您用戶注冊成功！' );
        $mail->addTo($_GET[email], ’獲取用戶注冊激活碼’);          //定義郵件的接收郵箱
        $mail->setSubject(’獲取注冊用戶的激活碼’);                 //定義郵件主題
        $mail->send($transport);                               //執行發送操作
        /*網絡版發送郵件方法*/
        $sql = "insert into tb_member(name, password, question, answer, email,
            realname, birthday, telephone, qq) values(' ".trim($_GET[' name' ])."' ,
            '".md5(trim($_GET[' pwd' ]))."' , ' ".$_GET[' question' ]."' , ' ".$_GET[' answer' ]."' ,
            '".$_GET[' email' ]."' , ' ".$_GET[' realname' ]."' , ' ".$_GET[' birthday' ]."' ,
            '".$_GET[' telephone' ]."' , ' ".$_GET[' qq' ]."' )";
        $num = $conne->uidRst($sql);
        if($num == 1){
            $reback = '1' ;
        }
        echo $reback;
       ?>

1.4.5 注冊用戶激活

在用戶注冊成功后，需要登錄用戶填寫的郵箱，瀏覽注冊時發送的郵件，并且單擊超鏈接，鏈接到activation.php文件，根據超鏈接傳遞的用戶名和密碼完成對指定用戶表中active字段值的更新操作，即完成注冊用戶的激活操作。

登錄mrsoft8888@sohu.com郵箱，將查看到如圖1.11所示的郵件內容。

圖1.11 激活郵件的運行結果

當用戶進入激活頁（activation.php）后，激活頁將根據name字段和pwd字段來查找匹配的注冊用戶，如果找到將進行更新操作。激活成功后，將用戶名保存到Session中，并跳轉到相應的頁面，代碼如下：

      <? php
      session_start();
      header(' Content-Type:text/html; charset=gb2312' );
      include_once("conn/conn.php");
      if (! empty($_GET[' name' ]) && ! is_null($_GET[' name' ])){         //激活注冊用戶
            $num=$conne->getRowsNum("select * from tb_member where name=
            '".$_GET[' name' ]."' and password = ' ".$_ GET[' pwd' ]."' ");
            if ($num>0){
              $upnum=$conne->uidRst("update tb_member set active = 1 where name
              =' ".$_GET[' name' ]."' and password = ' ".$_GET[' pwd' ]."' ");
              if($upnum > 0){
                  $_SESSION[' name' ] = $_GET[' name' ];
                  echo "<script>alert(’用戶激活成功！' ); window.location.href=
                  'main.php' ; </script>";
              }else{
                  echo "<script>alert(’您已經激活！' ); window.location.href=
                  'main.php' ; </script>";
              }
            }else{
              echo "<script>alert(’用戶激活失敗！' ); window.location.href=
              'register.php' ; </script>";
            }
      }
      ?>

1.4.6 免激活用戶注冊

上面介紹的用戶注冊功能中，需要將激活信息以郵件的形式發送到用戶指定的郵箱中進行激活后，用戶才可以使用。這里向讀者介紹一種不需要激活的用戶注冊方式，同樣以上面注冊提交的數據為基礎，只是修改用戶注冊提交數據的處理方式。就可以實現免激活的用戶注冊功能。該操作在register_check.php文件中完成，其關鍵代碼如下：

      <? php
       include_once ' conn/conn.php' ;             //包含數據庫連接操作文件
       $reback = '0' ;                             //定義初始變量
       $sql = "insert into tb_member(name, password, question, answer, email, realname,
            birthday, telephone, qq, active) values(' ".trim($_GET[' name' ])."' , ' ".md5(trim
            ($_GET[' pwd' ]))."' , ' ".$_GET[' question' ]."' , ' ".$_GET[' answer' ]."' , ' ".$_GET
            [' email' ]."' , ' ".$_GET[' realname' ]."' , ' ".$_GET[' birthday' ]."' , ' ".$_GET
            [' telephone' ]."' , ' ".$_GET[' qq' ]."' , '1' )";
            $num = $conne->uidRst($sql);          //執行添加語句
            if($num == 1){
                $reback = '1' ;
            }
       echo $reback;                               //輸出變量值
      ?>

實踐真知說明

在本模塊中要使用免激活模式來注冊用戶，首先應該在js\register.js文件中修改注冊數據處理URL路徑，將注冊數據處理文件（register_chk.php）修改為register_check.php，代碼如下：

      $(' regbtn' ).onclick = function(){
            $(' imgdiv' ).style.visibility = ' visible' ;
            url = ' register_chk.php? name=' +$(' regname' ).value+' &pwd=
            '+$(' regpwd1' ).value+' &email=' +$(' email' ).value;
            url += ' &question=' +$(' question' ).value+' &answer=' +$(' answer' ).value;
            url += ' &realname=' +$(' realname' ).value+' &birthday=' +$(' birthday' ).
            value;
            url += ' &telephone=' +$(' telephone' ).value+' &qq=' +$(' qq' ).value;
            xmlhttp.open(' get' , url, true);
            xmlhttp.onreadystatechange = function(){
                if(xmlhttp.readyState == 4){
                    if(xmlhttp.status == 200){
                        msg = xmlhttp.responseText;
                        if(msg == '1' ){
                            alert(’注冊成功，請到您的郵箱中獲取激活碼！' );
                            location=' index.php' ;
                        }else if(msg == ' -1' ){
                            alert(’您的服務器不支持Zend_mail，或者郵箱填寫錯誤。請仔細檢查！! ' );
                        }else{
                            alert(msg);
                        }
                        $(' imgdiv' ).style.visibility = ' hidden' ;
                    }
                }
            }
            xmlhttp.send(null);
       }