web註冊頁面動態匹配驗證之使用者驗證php實現(完整版)二

這篇文章主要介紹了關於web註冊頁面動態匹配驗證之使用者驗證php實現(完整版)二，有著一定的參考價值，現在分享給大家，有需要的朋友可以參考一下

引言：

如果你在web註冊頁面動態匹配驗證之使用者驗證php實現一中有沒有看懂的地方，歡迎加我QQ：363491343 瞭解。

看此文章與web註冊頁面動態匹配驗證之使用者驗證php實現一關係不是太大，你也可以直接看此文章。

本文：

1.我們建立一個先表單，做好各個輸入框：

代碼：（樣式..等無關內容省略）

<form action="register.php" method="post" class="subscribe-form">  <p class="row form-section">    <p class="col-md-7 col-sm-7 col-xs-7">      <input name="username" type="text" class="form-control" id="contact_username"             onkeyup="loadXMLDoc(this.value,this.id)" onblur="upperCase()" placeholder="使用者名稱" required/>      <span id="txtHint_name"></span>      <input name="password" type="password" class="form-control" id="contact_password"             onkeyup="loadXMLDoc(this.value,this.id)" onblur="upperCase()" placeholder="請輸入密碼" required/>      <span id="txtHint_pass"></span>      <input name="password_" type="password" class="form-control" id="contact_password_"             onkeyup="loadXMLDoc(this.value,this.id)" onblur="upperCase()" placeholder="輸入確認密碼" required/>      <span id="txtHint_pass_"></span>      <input name="phone" type="text" class="form-control" id="contact_phone"             onkeyup="loadXMLDoc(this.value,this.id)" onblur="upperCase()" placeholder="請輸入手機號碼" required/>      <span id="txtHint_phone"></span>      <input name="email" type="text" class="form-control" id="contact_email"             onkeyup="loadXMLDoc(this.value,this.id)" onblur="upperCase()" placeholder="填入郵箱" required/>      <span id="txtHint_email"></span>    </p>  </p>  <p class="col-md-5 col-sm-5 col-xs-5">   <button type="submit" class="tm-btn-subscribe" name="register">註冊</button>  </p></form>

代碼解釋：

<span id="txtHint_name"></span>

<span id = 'txtHint_name'></span> 用來顯示驗證提示資訊的，loadXMLDoc(this.value,this.id) 中兩個參數分別是

輸入框裡的內容，和該輸入框的id 名稱。 upperCass() 方法是用來：

當焦點離開輸入框，隱藏提示資訊

   //當焦點離開輸入框，隱藏提示資訊function upperCase(){       //event.target.id 擷取id 名稱       if(event.target.id=="contact_username") {           //responseText 獲得字串形式的響應資料。           document.getElementById("txtHint_name").innerHTML="";       } else if(event.target.id=="contact_password") {        document.getElementById("txtHint_pass").innerHTML="";    }      else if(event.target.id=="contact_password_") {        document.getElementById("txtHint_pass_").innerHTML="";    }       else if(event.target.id=="contact_phone") {        document.getElementById("txtHint_phone").innerHTML="";    }       else if(event.target.id=="contact_email") {        document.getElementById("txtHint_email").innerHTML="";    }}

如下：

（驗證提示資訊）

（驗證成功隱藏）

2.js實現

（這裡是一個單獨的js 檔案，方便管理）

function loadXMLDoc(str,id){    if (str.length==0)    {        document.getElementById("txtHint_name").innerHTML="";                document.getElementById("txtHint_pass").innerHTML="";                document.getElementById("txtHint_pass_").innerHTML="";                document.getElementById("txtHint_phone").innerHTML="";                document.getElementById("txtHint_email").innerHTML="";                return;            }            var xmlhttp;            //檢查瀏覽器是否支援 XMLHttpRequest 對象            if (window.XMLHttpRequest)    {            // IE7+, Firefox, Chrome, Opera, Safari 瀏覽器執行代碼            xmlhttp=new XMLHttpRequest();        }    else    {            // IE6, IE5 瀏覽器執行代碼            xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");        }    xmlhttp.onreadystatechange=function()    {        if (xmlhttp.readyState==4 && xmlhttp.status==200)        {            if(id=="contact_username") {                        //responseText 獲得字串形式的響應資料。                        document.getElementById("txtHint_name").innerHTML=xmlhttp.responseText;                    } else if(id=="contact_password") {                document.getElementById("txtHint_pass").innerHTML=xmlhttp.responseText;                            } else if(id=="contact_password_") {                document.getElementById("txtHint_pass_").innerHTML=xmlhttp.responseText;                            } else if(id=="contact_phone") {                document.getElementById("txtHint_phone").innerHTML=xmlhttp.responseText;                            } else if(id=="contact_email") {                document.getElementById("txtHint_email").innerHTML=xmlhttp.responseText;                            }        }    }    xmlhttp.open("GET","../common/verify.php?v="+str+"&id="+id,true);        xmlhttp.send();}    //當焦點離開輸入框，隱藏提示資訊     function upperCase(){         //event.target.id 擷取id 名稱         if(event.target.id=="contact_username") {             //responseText    獲得字串形式的響應資料。             document.getElementById("txtHint_name").innerHTML="";         } else if(event.target.id=="contact_password") {         document.getElementById("txtHint_pass").innerHTML="";              } else if(event.target.id=="contact_password_") {         document.getElementById("txtHint_pass_").innerHTML="";              } else if(event.target.id=="contact_phone") {         document.getElementById("txtHint_phone").innerHTML="";              } else if(event.target.id=="contact_email") {         document.getElementById("txtHint_email").innerHTML="";              } }

代碼解釋：

str 是輸入框裡的內容，id 是輸入框的id 名稱，id 用來進行判斷驗證的是哪個輸入框，如：

 if(id=="contact_username") {

則是使用者名稱輸入框；

傳遞參數解釋：

 xmlhttp.open("GET","../common/verify.php?v="+str+"&id="+id,true);

通過str ,id 把 使用者名稱和輸入框id 傳到伺服器，用php代碼進行驗證；

3.php代碼:

(使用者帳號，和密碼驗證)

<?php//註冊驗證----------$v = trim($_GET['v']);     //擷取使用者輸入的資訊$id = trim($_GET['id']);   //擷取id 用來判斷是什麼驗證$hint = "";  //用作返回輸出//判斷是帳號還是密碼，或者其他匹配if($id=="contact_username") {  //帳號驗證    //判斷輸入的賬帳號長度是否大於0    if (strlen($v) > 0) {        //使用者驗證        //1.必須以字母開頭        if (preg_match("/^[a-z]/", $v)) {            //2.至少5個字元最長不超過11個字元            if (strlen($v) < 5 || strlen($v) > 11) {                $hint = "至少5個字元,最長不超過11個字元!";            } else {                //3.模式比對                if (preg_match("/^[a-z][\w]{2,10}$/", $v)) {                    echo $v;                    $hint = "";  //當滿足時，讓它輸入空 因為前面不滿足賦值了                    //資料庫建立串連                    require "mysqli.php";                    //資料庫查詢語句--查詢輸入的帳號是否存在                    $sql = "select `username` from `user` where `username`='$v'";                    $result = mysqli_query($conn, $sql);                    //當mysqli_num_rows($result)> 0 說明查到裡資料                    if (mysqli_num_rows($result) > 0) {                        $hint = "該使用者已存在！";                    } else {                        $hint = "該使用者可用";                    }                    mysqli_close($conn); //關閉資料庫連接                } else {                    $hint = "使用者名稱只能是數值，字母，底線";                }            }        } else {            $hint = "必須以字母開頭！";        }    }} else if($id=="contact_password") {  //密碼驗證    //判斷輸入的密碼長度是否大於0    if (strlen($v) > 0) {        //1.必須以字母開頭        if (preg_match("/^[a-z]/", $v)) {            //2.至少8個字元最長不超過16個字元            if (strlen($v) < 8 || strlen($v) > 11) {                $hint = "密碼至少8個字元,最長不超過16個字元!";            } else {                //3.模式比對                if (preg_match("/^[a-z][\w]{2,16}$/", $v)) {                    $hint = "密碼可用";                } else {                    $hint = "密碼只能是數值，字母，底線";                }            }        } else {            $hint = "必須以字母開頭！";        }    }

確認密碼驗證：

} else if($id=="contact_password_") {  //確認密碼    //因為是確認密碼，只需要判斷和上一次密碼是否相同

可以看見，我們只需要判斷是否與上一次密碼相同，所我需要建立一個儲存臨時變數的資料。

但是此php檔案是不斷更新的，所以用資料庫建立一個記錄存臨時資料，

如下：

然後對此條記錄不斷更新：

$sql = "update `user` set `password`='$pass' where `id`=1 ";

所以，新的密碼驗證出來了：

if($id=="contact_password") {  //密碼驗證    //判斷輸入的密碼長度是否大於0    if (strlen($v) > 0) {        //1.必須以字母開頭        if (preg_match("/^[a-z]/", $v)) {            //2.至少8個字元最長不超過16個字元            if (strlen($v) < 8 || strlen($v) > 16) {                $hint = "密碼至少8個字元,最長不超過16個字元!";            } else {                //3.模式比對                if (preg_match("/^[a-z][\w]{2,16}$/", $v)) {                    //當密碼可用時，我們對密碼進行2次md5加密                   $pass = md5(md5($v));                   // 存到資料庫                    require "mysqli.php";                    //因為資料庫裡面存在了，所以只需要更新就可以                    //$sql = "insert into user(`password`,`id`,`username`) value ('$v',1,'mmjc')";                    $sql = "update `user` set `password`='$pass' where `id`=1 ";                    if(mysqli_query($conn, $sql)){                        $hint = "密碼可用";                    }                     mysqli_close($conn);                } else {                    $hint = "密碼只能是數值，字母，底線";                }            }        } else {            $hint = "必須以字母開頭！";        }    }}

代碼解釋：

主要通過資料庫更新語句，進行對資料的即時更新，實現動態驗證。

 $sql = "update `user` set `password`='$pass' where `id`=1 ";

然後就是確認密碼驗證了!

php代碼：

 if($id=="contact_password_") {  //確認密碼     //當密碼可用時，我們對密碼進行2次md5加密     $pass = md5(md5($v));    // 查詢第一輸入密碼存入的密碼     require "mysqli.php";    //資料庫查詢語句--查詢密碼和第一次密碼是否相同     $sql = "select `password` from `user` where id=1";     $result = mysqli_query($conn, $sql);     if (mysqli_num_rows($result) > 0) {        // 輸出資料         $row = mysqli_fetch_assoc($result);         //判斷兩次密碼是否相同         if( $pass==$row["password"]){             $hint = "兩次密碼相同可用";         }else{             $hint = "請與前一次密碼保持一致！";         } }     mysqli_close($conn);}

代碼解釋：

由於是確認兩次密碼，我直接在資料庫中取得臨時記錄，和使用者輸入的比較（用到了資料庫查詢語句）。

使用者密碼驗證完成後，進行手機號碼與郵箱驗證：

手機號碼驗證：

if($id=="contact_phone") {    //1.手機號碼必須以1開頭    if (preg_match("/^[1]/", $v)) {        if(strlen($v) != 11){            $hint = "手機號碼為11位";        }else if(preg_match("/^[1][0-9]{10}$/",$v)){            require "mysqli.php";            //查詢資料庫裡面是否存在已有的手機號碼            $sql = "select  `phone` from `user` where `phone`='$v' ";            $result = mysqli_query($conn, $sql);            if (mysqli_num_rows($result) > 0) {                $row = mysqli_fetch_assoc($result);                //判段使用者輸入的密碼是否和資料庫裡面的相同                if ($v == $row["phone"]) {                    $hint = "該手機已被註冊！";                } else {                    $hint = "手機號碼可用";                }            }            mysqli_close($conn);        }else{            $hint = "手機號碼必須是數字！";        }    } else {        $hint = "手機號碼必須以1開頭！";    }}

有限驗證：

if($id=="contact_email") {    $email_pattern = "/^[\w]+(\.[\w]+)*@[a-z0-9]+(\.[a-z0-9]+)+$/";    if(preg_match($email_pattern,$v)){        $hint = "合法郵箱、可用";    }else {        $hint = "你輸入的郵箱不合法";    }