首頁 > 後端開發 > php教程 > web註冊頁面動態比對驗證之用戶驗證php實作(完整版)二

web註冊頁面動態比對驗證之用戶驗證php實作(完整版)二

不言
發布: 2023-03-29 22:46:02
原創
1238 人瀏覽過

這篇文章主要介紹了關於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>
登入後複製

用來顯示驗證提示訊息的,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[&#39;v&#39;]);     //获取用户输入的信息
$id = trim($_GET[&#39;id&#39;]);   //获取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 = "你输入的邮箱不合法";    
}
登入後複製
相關推薦:

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










#######

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

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板