很多時候在網站上註冊時，我們會發現，註冊表單通常需要檢查使用者名稱和電子郵件地址的可用性；從而確保使用者之間不擁有相同的使用者名稱和電子郵件地址；一些網站喜歡在使用者提交填寫的使用者資訊時，做資訊可用性的檢查，而一些網站會做即時的使用者名稱和電子郵件地址可用性檢查，例如：“使用者名稱”文字框失去焦點時；就使用者體驗來說，即時的使用者資訊檢查使用者體驗效果更好，而不是在表單提交後，告訴使用者資訊不符合系統要求。
下面截圖是新浪微博的註冊介面，它採用的是即時的使用者資訊檢查，如：手機號碼和使用者名稱等資訊。
圖1新浪微博註冊表單
1、本文
假設，現在要求我們實現一個註冊介面並且它採用即時方式檢查使用者資訊是否符合系統的要求。
其中，註冊介面包含：使用者名稱，郵件地址，密碼和微博地址等資訊；即時檢查：當文字框失去焦點時對資訊進行即時檢查，例如：“使用者名稱”文字框失去焦點時，觸發頁面發送Ajax請求，到資料庫中使用者是否可用，接著把查詢結果返回到前端頁面中。
對於表單輸入檢查，我們將使用前一博文《自訂jQuery外掛程式Step by Step》中，自訂表格單資訊檢查外掛程式對輸入資訊進行檢查。
圖2註冊驗證過程
註冊表單設計
現在，讓我們定義註冊表單，它包含：使用者名稱，郵件地址，密碼和微博地址等資訊，由於時間的關係，我們已經把註冊表單介面的定義好了，具體實現代碼如下：
<body> <div id="Div1"> <!-- Start Sign Up Form --> <form action="#signup-form" id="Form1"> <h2> Sign Up</h2> <fieldset> <div class="fieldgroup"> <label for="name"> Name</label> <input class="form_element" type="text" name="name" validation="required nameAvailable" /> <span class='availability_status'></span> </div> <div class="fieldgroup"> <label for="email"> Email</label> <input class="form_element" type="text" name="email" validation="email" /> <span></span> </div> <div class="fieldgroup"> <label for="password"> Password</label> <input class="form_element" type="password" name="password" validation="password" /> <span></span> </div> <div class="fieldgroup"> <label for="weibo"> Weibo</label> <input class="form_element" type="text" name="weibo" validation="url" /> <span></span> </div> <div class="fieldgroup"> <input type="submit" class="submit" value="Sign up"> <span></span> </div> </fieldset> <div class="fieldgroup"> <p> Already registered? <a href="http://www.cnblogs.com/rush">Sign in</a>.</p> </div> </form> <!-- End Sign Up Form --> </div></body>
上面，我們實現了註冊表單，它包含：使用者名稱，郵件地址，密碼和微博地址文字框，當“使用者名稱”失去焦點時，發送Ajax請求即時檢查使用者名稱是否可用，並且動態地載入圖片表示檢查中和相應的檢查結果。
圖3註冊表單
jQuery Validation外掛程式
現在，我們需要修改一下前一博文中定義的表單檢查控制項，需要增加使用者名稱檢查和文字框失去焦時間點事件（blur event）。
首先，我們在Validation類型中，增加使用者名稱檢查方法，由於使用者檢查是通過發送Ajax請求，然後到資料庫中查詢是否存在該使用者名稱來確定該使用者名稱是否可用。
nameAvailable: { check: function(value) { if (value) { var dataString = 'username=' + value; var result; // Checking availability... // Loads checking image. $(".availability_status").html('<img src="loader.gif" align="absmiddle">'); // Sends ajax request to check the name is available or not. $.ajax({ type: "GET", url: "UserService.ashx", data: dataString, success: function(data) { // When the checking completed, then loaded corresponding css style. $('.availability_status').ajaxComplete(function(event, request, settings) { if (data == false) { $('.availability_status').html(''); $('.availability_status').removeClass('tick'); $('.availability_status').addClass('error'); return true; } else { $('.availability_status').html(''); $('.availability_status').removeClass('error'); $('.availability_status').addClass('tick'); return false; } }); } }); // Sends a asyn reqeust, return false temporary. return false; //// e.preventDefault(); } else { $('.availability_status').removeClass('tick'); $('.availability_status').removeClass('error'); return false; } }, msg: "", tip: "Should enter 4-30 characters, support letter, figures and _ or -"}
上面，我們完成了在Validation類型中增加nameAvailable()方法，它通過發送非同步Ajax請求來檢查使用者名稱是否可用，在檢查的過程中，在輸入框右邊動態地載入圖片來表示檢查中，當檢查結束載入相應的圖片表示使用者是否可用。
接下來，我們將添加focus和blur事件，當文字框得到焦點時觸發focus事件，提示輸入資訊的要求，當文字框失去焦點時觸發blur事件，發生即時Ajax請求，例如：檢查使用者名稱是否可用。
由於，事件方法應該是Field類型公開的方法，確實我們也不想為每個Field對象都定義自己事件方法，所以我們通過原型鏈的方式公開事件方法focus()和blur()，具體實現如下：
// The prototype of Field type.Field.prototype = { // Public method. attach: function(event) { // The object refers to Field object. var obj = this; // When field lost focus, then invoked the validate method. if (event == "blur") { obj.field.bind("blur", function() { return obj.validate(); }); } // When field got focus, then invoked the hint method. if (event == "focus") { obj.field.bind("focus", function() { return obj.hint(); }); } }}
我們給Field的原型鏈添加了事件響應事件blur和focus，當失去焦點時觸發Field的vlidate()方法，獲得焦點時觸發Field的hint()方法。
資料表設計
前面，我們提到註冊表單的使用者名稱可用性檢查設計是通過發送Ajax請求，然後到資料庫中查詢使用者名稱是否存在來確定使用者名稱的可用性。
接下來，我們添加資料庫表jk_user用來儲存使用者資訊，它包括使用者名稱、密碼（注意：這裡沒有考慮隱私資訊的加密儲存）、顯示名稱和註冊日期等，具體設計如下：
-- =============================================CREATE TABLE [dbo].[jk_users]( -- This is the reference to Users table, it is primary key. [ID] [bigint] IDENTITY(1,1) NOT NULL, [user_login] [varchar](60) NOT NULL, [user_pass] [varchar](64) NOT NULL, [user_nicename] [varchar](50) NOT NULL, [user_email] [varchar](100) NOT NULL, [user_url] [varchar](100) NOT NULL, -- This field get the default from function GETDATE(). [user_registered] [datetime] NOT NULL CONSTRAINT [DF_jk_users_user_registered] DEFAULT (getdate()), [user_activation_key] [varchar](60) NOT NULL, [user_status] [int] NOT NULL CONSTRAINT [DF_jk_users_user_status] DEFAULT ((0)), [display_name] [varchar](250) NOT NULL) ajaxform2
圖4資料表設計
服務端設計
前面，我們實現了使用者表的設計，由於註冊表單通過發送Ajax請求訪問伺服器端公開的方法，然後通過該公開方法訪問資料庫。
接下來，我們定義使用者表（jk_user）的資料庫訪問對象（DAO），它包含方法IsAvailableUser()用來檢查使用者名稱是否可用，具體的實現如下：
/// <summary>/// The user dao manager./// </summary>public class UserManager{ private const string Query = "SELECT user_login, user_email, user_url FROM jk_users WHERE (user_login = @user_login)"; /// <summary> /// Initializes a new instance of the <see cref="UserManager"/> class. /// </summary> public UserManager() { } /// <summary> /// Determines whether the user is available or not, with specified username. /// </summary> /// <param name="userName">Name of the user.</param> /// <returns> /// <c>true</c> if is available user; otherwise, <c>false</c>. /// </returns> public bool IsAvailableUser(string userName) { using (var con = new SqlConnection(ConfigurationManager.ConnectionStrings["SQLCONN2"].ToString())) using (var com = new SqlCommand(Query, con)) { // Pass user_login parameter to sql statement. com.Parameters.Add("@user_login", SqlDbType.VarChar).Value = userName; com.Connection.Open(); return !com.ExecuteReader().HasRows; } }}
現在，我們完成了資料庫訪問對象UserManager，它包含方法IsAvailableUser()來檢查使用者是否可用，如果該使用者名稱已經存在返回false，反之返回true。
接下來，我們需要實現伺服器端類UserService，讓用戶端通過它來調用UserManager中的IsAvailableUser()方法，首先我們建立一般處理常式（ASHX檔案），實現ProcessRequest()方法，具體實現如下：
/// <summary>/// The user availability check service./// </summary>public class UserService : IHttpHandler{ public void ProcessRequest(HttpContext context) { // Response json type. context.Response.ContentType = "application/json"; context.Response.Charset = "utf-8"; var manager = new UserManager(); string userName = context.Request.QueryString["username"]; // Checks the username empty or not. if (string.IsNullOrEmpty(userName)) { throw new Exception("Username can't be empty"); } // Invokes the IsAvailableUser method. var result = manager.IsAvailableUser(userName); // Serializes data to json format. var json = new DataContractJsonSerializer(result.GetType()); json.WriteObject(context.Response.OutputStream, result); } // Whether can resuable by other handler or not. public bool IsReusable { get { return true; } }}
大家注意到UserService類實現了IHttpHandler介面，該介面包含一個方法ProcessRequest()方法和一個屬性IsReusable；ProcessRequest()方法用於處理入站的Http請求，在預設情況下，UserService類把Response內容類型定義為application/json，這樣我們就可以把資料通過JSON格式進行傳輸；IsReusable屬性工作表示相同的處理常式是否可以用於多個請求，這裡我們設定為true，那麼處理常式可以用於多個請求。
前端實現
註冊表單在檢查使用者名稱時會在輸入框的右邊動態地載入圖片，這裡我們使用CSS Sprite技巧實現圖片的動態載入。
當頁面載入時，不是載入每個單獨圖片，而是一次載入整個組合圖片。這是一個了不起的改進，因為我們只需發送一個HTTP請求擷取組合圖片就OK了，它大大減少了HTTP請求的次數，減輕伺服器壓力，同時縮短了懸停載入圖片所需要的時間延遲，使效果更流暢，不會停頓。
這裡，我們使用可以一個線上的工具SpritePad設計組合圖片和產生相應的CSS代碼。
圖5組合圖片
上面，我們已經準備好組合圖片了，接下來我們添加CSS代碼動態載入“正確”和“出錯”圖片，具體實現如下：
/*CSS Sprite*//*Loads tick picture*/.tick{ width: 17px; height: 17px; margin: 6px 0 0; float: right; background: url(../images/tipicon.png); background-position: 0px -32px; display: block; /*text-decoration: none; vertical-align:middle;*/}/*Loads error picture*/span.error{ width: 17px; height: 17px; margin: 6px 0 0; float: right; background: url(../images/tipicon.png); background-position: 0px -15px; display: block; /*text-decoration: none; vertical-align:middle;*/}
接著，我們在nameAvailable()方法中的Ajax方法添加檔案“UserService.ashx”請求，並傳遞使用者名稱給伺服器；在資料庫中查詢使用者名稱是否已經存在，存在返回“false”，否則返回“true”。
// Sends ajax request to check the name is available or not.$.ajax({ type: "GET", url: "UserService.ashx", data: dataString, success: function(data) { // When the checking completed, then loaded corresponding css style. $('.availability_status').ajaxComplete(function(event, request, settings) { if (data == false) { $('.availability_status').html(''); $('.availability_status').removeClass('tick'); $('.availability_status').addClass('error'); return true; } else { $('.availability_status').html(''); $('.availability_status').removeClass('error'); $('.availability_status').addClass('tick'); return false; } }); }});
最後，我們在註冊表單中添加調用自訂驗證控制項的jQuery代碼，具體實現如下：
<script type="text/javascript"> // Sets display image size. pic = new Image(16, 16); pic.src = "loader.gif"; $(function() { // jQuery DOM ready function. // Get the form object. var signUpForm = $("#signup-form"); // Invokes the validation method. signUpForm.validation(); });</script>
圖6使用者註冊介面
如果大家還想深入學習，可以點擊兩個精彩的專題：jquery表單驗證大全 JavaScript表單驗證大全
本文主要介紹了Ajax註冊表單的設計，通過發送Ajax請求方式即時地檢查使用者名稱的可用性，並且使用了自訂的表單驗證外掛程式檢查輸入資訊的正確性。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
