這篇文章主要介紹了關於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['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 事件
以上是web註冊頁面動態比對驗證之用戶驗證php實作一的詳細內容。更多資訊請關注PHP中文網其他相關文章!