web註冊頁面動態匹配驗證之使用者驗證php實現一

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

需要知識：1.php資料庫連接

2.php 正則表達匹配

3.ajax --

• HTML 和 CSS 基礎

• JavaScript 基礎

1 ：

建立好輸入框：

<input name="username" type="text" class="form-control" id="contact_username" onkeyup="loadXMLDoc(this.value)" placeholder="使用者名稱" required/>            <span id="txtHint"></span>

2：

js 實現 提示效果：（原文出自：點擊開啟連結）

function loadXMLDoc(str){    if (str.length==0)    {        document.getElementById("txtHint").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)        {            //responseText獲得字串形式的響應資料。            document.getElementById("txtHint").innerHTML=xmlhttp.responseText;        }    }    xmlhttp.open("GET","../common/verify.php?v="+str,true);    xmlhttp.send();}

3：

php代碼實現動態驗證：（驗證有缺陷，因為是自己寫的，有好多地方不完美，我會繼續改善）

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

更新：（2018年6月5日14:31:00）

//判斷輸入的賬帳號長度是否大於0if (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 = "必須以字母開頭！";    }}

4：

完全出自自己的理解自己口語表達解釋的，不夠專業也不夠標準，如有出錯地方歡迎指出：QQ363491343

解釋：當我們在使用者名稱輸入框內輸入要註冊的使用者名稱時，

函數調用loadXMLDoc() 方法 （見第二步），從而進行相關動態驗證（具體介紹見點擊開啟連結）

php代碼解釋：

1.

$v=trim($_GET['v']);

用於獲得使用者動態輸入的使用者名稱；

2.

if (strlen($v) > 0)

使用者輸入的使用者名稱必須大於0；這是最基本的。

3.

if(preg_match("/^[a-z]/",$v)){

然後我規定使用者名稱必須以字母開頭，不區分大小寫

4.

這是我想使用者名稱至少5個字元；

5.

echo $v;$hint = "";  //當滿足時，讓它輸入空 因為前面不滿足賦值了//資料庫建立串連require "mysqli.php";//資料庫查詢語句--查詢輸入的帳號是否存在$sql="select `username` from `user` where `username`='$v'";$result = mysqli_query($conn, $sql);//當mysqli_num_rows($result)> 說明查到裡資料if(mysqli_num_rows($result) > 0){    $hint ="該使用者已存在！";}else{    $hint = "該使用者可用";}mysqli_close($conn); //關閉資料庫連接

這部分就是當前面都滿足時候，就在資料庫裡面動態尋找，看是否使用者已經存在。

6.

if ($hint == ""){    $response="";}else{    $response=$hint;}//列印返回echo $response;

最後輸出返回要顯示的內容；

這裡我經過自己驗證，在PHP裡面echo 輸出的都是返回的內容。

如果php有警告資訊，或者出現錯誤，都會返回到前端去。

如果你ajax 學的不錯，那麼下面代碼也就好理解了：

xmlhttp.onreadystatechange=function()    {        if (xmlhttp.readyState==4 && xmlhttp.status==200)        {            //responseText獲得字串形式的響應資料。            document.getElementById("txtHint").innerHTML=xmlhttp.responseText;        }    }

嗯，以上是我自己寫的使用者帳號通過伺服器實現動態驗證效果，也是邊學邊做，希望能夠幫到和我一樣的新手同學。

如果有大佬在，歡迎指出錯誤與不足之處。

-----新增加內容：

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

   //當焦點離開輸入框，隱藏提示資訊function upperCase(){    document.getElementById("txtHint").innerHTML="";}

在

<input name="username" type="text" class="form-control" id="contact_username" onkeyup="loadXMLDoc(this.value)" onblur="upperCase()" placeholder="使用者名稱" required/><span id="txtHint"></span>

裡面添加一樣onblur 事件