Ajax 驗證使用者名稱唯一性資料校驗
阿新 • • 發佈：2019-01-24
注：本文中使用到的一些類庫在前面文章都能找到原始碼，我會在文中指明連結所在，為了縮短文章篇幅，由此帶來的閱讀不便，敬請諒解。
本文要說明的是如何使用 Ajax 驗證使用者名稱是否被註冊。當您註冊某網站的時候，輸入使用者名稱，滑鼠游標一離開，就會提示，您的使用者名稱是否被註冊，本文將為您展現程式流程。
首先，我們得先需要一個表單頁面 index.html，程式碼清單如下：
index.html
程式碼清單中，我們載入了一個 Ajax 類庫，這個類庫可以在 http://blog.csdn.net/liruxing1715/article/details/7212781 文章中找到（並附有使用方法）；放置了一個使用者名稱文字框（input）；並且放置了一個 onBlur（滑鼠游標離開事件）；使用者名稱文字框後面放置一個 SPAN 標籤，用於顯示提示資訊。<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script type="text/javascript" src="js/ajax.js"></script> <!-- 載入 Ajax 類庫 --> <title>Ajax 驗證使用者名稱</title> <style type="text/css"> body { font-size:12px; } </style> </head> <body> <form action="reg.php" method="post"> username:<input type="text" value="" onBlur="validate(this.value);" name="username"> <span id="userText"></span><br /> password:<input type="password" value="" name="password"><br /> <input type="button" value="Submit"> </form> </body> </html>
當您輸入使用者名稱後，就會觸發事件 validate(val) 函式，validate(val) 的函式程式碼清單如下：
<script type="text/javascript"> /** * validate(val) 游標離開後觸發事件 * @param string val 輸入的文字 * @return string 返回驗證是否成功 */ function validate(val) { var userText = document.getElementById('userText'); // 獲取 SPAN 物件 // 如果為空或者輸入空格執行 if (!(val.match(/^\S+$/))) { userText.innerHTML = '<font color="red">請輸入使用者名稱！</font>'; } else { if (val.length<2) { userText.innerHTML = '<font color="red">使用者名稱個數必須大於兩位！</font>'; } else { var ajax = Ajax(); // 建立 Ajax 物件 // 通過 Ajax POST 方法把使用者名稱提交到 validate.php 進行驗證使用者名稱是否存在，並返回結果 ajax.post('validate.php', {username:val}, function(data){ userText.innerHTML = data; // Ajax 返回的值顯示在 SPAN 標籤上 }); } } } </script>
validate.php (驗證檔案)
<?php require_once './config.inc.php'; $m = new Model(); // 例項化一個數據庫操作類 $username = $_POST['username']; // 接受傳遞過來的使用者名稱 $count = $m->total('user', "name='{$username}'"); // $count 使用者名稱在資料庫出現的次數 if (intval($count)>0) { echo '<font color="red">抱歉，'. $username .'已被註冊，請更換！</font>'; } else { echo '<font color="green">恭喜，'. $username .'可以註冊！</font>'; } ?>
validate.php 檔案中的 config.inc.php 檔案主要就是定義一些常量，比如：資料庫使用者名稱、資料庫密碼、主機……，資料庫連線類庫（Db.class.php）和資料庫操作類庫（Model.class.php），請參考文章 http://blog.csdn.net/liruxing1715/article/details/7176671，附有使用方法。資料庫結構一個主鍵、一個欄位
name 即可。
程式效果圖：
程式碼打包下載：【點選下載】 注：請留下電子郵箱