web註冊頁面動態比對驗證之用戶驗證php實作一

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

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

                  2.php 正規表示配對

                                  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[&#39;v&#39;]);     //获取用户输入的账号

$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`=&#39;$v&#39;";
                $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`=&#39;$v&#39;";                
$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 事件

以上是web註冊頁面動態比對驗證之用戶驗證php實作一的詳細內容。更多資訊請關注PHP中文網其他相關文章！