Ajax注冊(cè)用戶(hù)時(shí)如何實(shí)現(xiàn)表單驗(yàn)證功能
這篇文章主要講解了“Ajax注冊(cè)用戶(hù)時(shí)如何實(shí)現(xiàn)表單驗(yàn)證功能”，文中的講解內(nèi)容簡(jiǎn)單清晰，易于學(xué)習(xí)與理解，下面請(qǐng)大家跟著小編的思路慢慢深入，一起來(lái)研究和學(xué)習(xí)“Ajax注冊(cè)用戶(hù)時(shí)如何實(shí)現(xiàn)表單驗(yàn)證功能”吧！
公司主營(yíng)業(yè)務(wù)：網(wǎng)站設(shè)計(jì)、網(wǎng)站建設(shè)、移動(dòng)網(wǎng)站開(kāi)發(fā)等業(yè)務(wù)。幫助企業(yè)客戶(hù)真正實(shí)現(xiàn)互聯(lián)網(wǎng)宣傳，提高企業(yè)的競(jìng)爭(zhēng)能力。創(chuàng)新互聯(lián)建站是一支青春激揚(yáng)、勤奮敬業(yè)、活力青春激揚(yáng)、勤奮敬業(yè)、活力澎湃、和諧高效的團(tuán)隊(duì)。公司秉承以“開(kāi)放、自由、嚴(yán)謹(jǐn)、自律”為核心的企業(yè)文化，感謝他們對(duì)我們的高要求，感謝他們從不同領(lǐng)域給我們帶來(lái)的挑戰(zhàn)，讓我們激情的團(tuán)隊(duì)有機(jī)會(huì)用頭腦與智慧不斷的給客戶(hù)帶來(lái)驚喜。創(chuàng)新互聯(lián)建站推出洪洞免費(fèi)做網(wǎng)站回饋大家。
很多時(shí)候在網(wǎng)站上注冊(cè)時(shí)，我們會(huì)發(fā)現(xiàn)，注冊(cè)表單通常需要檢查用戶(hù)名和電子郵件地址的可用性；從而確保用戶(hù)之間不擁有相同的用戶(hù)名和電子郵件地址；一些網(wǎng)站喜歡在用戶(hù)提交填寫(xiě)的用戶(hù)信息時(shí)，做信息可用性的檢查，而一些網(wǎng)站會(huì)做實(shí)時(shí)的用戶(hù)名和電子郵件地址可用性檢查，例如：“用戶(hù)名”文本框失去焦點(diǎn)時(shí)；就用戶(hù)體驗(yàn)來(lái)說(shuō)，實(shí)時(shí)的用戶(hù)信息檢查用戶(hù)體驗(yàn)效果更好，而不是在表單提交后，告訴用戶(hù)信息不符合系統(tǒng)要求。
下面截圖是新浪微博的注冊(cè)界面，它采用的是實(shí)時(shí)的用戶(hù)信息檢查，如：手機(jī)號(hào)碼和用戶(hù)名等信息。
圖1新浪微博注冊(cè)表單
1、正文
假設(shè)，現(xiàn)在要求我們實(shí)現(xiàn)一個(gè)注冊(cè)界面并且它采用實(shí)時(shí)方式檢查用戶(hù)信息是否符合系統(tǒng)的要求。
其中，注冊(cè)界面包含：用戶(hù)名，郵件地址，密碼和微博地址等信息；實(shí)時(shí)檢查：當(dāng)文本框失去焦點(diǎn)時(shí)對(duì)信息進(jìn)行實(shí)時(shí)檢查，例如：“用戶(hù)名”文本框失去焦點(diǎn)時(shí)，觸發(fā)頁(yè)面發(fā)送Ajax請(qǐng)求，到數(shù)據(jù)庫(kù)中用戶(hù)是否可用，接著把查詢(xún)結(jié)果返回到前端頁(yè)面中。
對(duì)于表單輸入檢查，我們將使用前一博文《自定義jQuery插件Step by Step》中，自定義表單信息檢查插件對(duì)輸入信息進(jìn)行檢查。
圖2注冊(cè)驗(yàn)證過(guò)程
注冊(cè)表單設(shè)計(jì)
現(xiàn)在，讓我們定義注冊(cè)表單，它包含：用戶(hù)名，郵件地址，密碼和微博地址等信息，由于時(shí)間的關(guān)系，我們已經(jīng)把注冊(cè)表單界面的定義好了，具體實(shí)現(xiàn)代碼如下：
<body> <div id="Div1"> <!-- Start Sign Up Form --> <form action="#signup-form" id="Form1"> <h3> Sign Up</h3> <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>
上面，我們實(shí)現(xiàn)了注冊(cè)表單，它包含：用戶(hù)名，郵件地址，密碼和微博地址文本框，當(dāng)“用戶(hù)名”失去焦點(diǎn)時(shí)，發(fā)送Ajax請(qǐng)求實(shí)時(shí)檢查用戶(hù)名是否可用，并且動(dòng)態(tài)地加載圖片表示檢查中和相應(yīng)的檢查結(jié)果。
圖3注冊(cè)表單
jQuery Validation插件
現(xiàn)在，我們需要修改一下前一博文中定義的表單檢查控件，需要增加用戶(hù)名檢查和文本框失去焦點(diǎn)事件（blur event）。
首先，我們?cè)赩alidation類(lèi)型中，增加用戶(hù)名檢查方法，由于用戶(hù)檢查是通過(guò)發(fā)送Ajax請(qǐng)求，然后到數(shù)據(jù)庫(kù)中查詢(xún)是否存在該用戶(hù)名來(lái)確定該用戶(hù)名是否可用。
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類(lèi)型中增加nameAvailable()方法，它通過(guò)發(fā)送異步Ajax請(qǐng)求來(lái)檢查用戶(hù)名是否可用，在檢查的過(guò)程中，在輸入框右邊動(dòng)態(tài)地加載圖片來(lái)表示檢查中，當(dāng)檢查結(jié)束加載相應(yīng)的圖片表示用戶(hù)是否可用。
接下來(lái)，我們將添加focus和blur事件，當(dāng)文本框得到焦點(diǎn)時(shí)觸發(fā)focus事件，提示輸入信息的要求，當(dāng)文本框失去焦點(diǎn)時(shí)觸發(fā)blur事件，發(fā)生實(shí)時(shí)Ajax請(qǐng)求，例如：檢查用戶(hù)名是否可用。
由于，事件方法應(yīng)該是Field類(lèi)型公開(kāi)的方法，確實(shí)我們也不想為每個(gè)Field對(duì)象都定義自己事件方法，所以我們通過(guò)原型鏈的方式公開(kāi)事件方法focus()和blur()，具體實(shí)現(xiàn)如下：
// 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的原型鏈添加了事件響應(yīng)事件blur和focus，當(dāng)失去焦點(diǎn)時(shí)觸發(fā)Field的vlidate()方法，獲得焦點(diǎn)時(shí)觸發(fā)Field的hint()方法。
數(shù)據(jù)表設(shè)計(jì)
前面，我們提到注冊(cè)表單的用戶(hù)名可用性檢查設(shè)計(jì)是通過(guò)發(fā)送Ajax請(qǐng)求，然后到數(shù)據(jù)庫(kù)中查詢(xún)用戶(hù)名是否存在來(lái)確定用戶(hù)名的可用性。
接下來(lái)，我們添加數(shù)據(jù)庫(kù)表jk_user用來(lái)存儲(chǔ)用戶(hù)信息，它包括用戶(hù)名、密碼（注意：這里沒(méi)有考慮隱私信息的加密存儲(chǔ)）、顯示名稱(chēng)和注冊(cè)日期等，具體設(shè)計(jì)如下：
-- ============================================= 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數(shù)據(jù)表設(shè)計(jì)
服務(wù)端設(shè)計(jì)
前面，我們實(shí)現(xiàn)了用戶(hù)表的設(shè)計(jì)，由于注冊(cè)表單通過(guò)發(fā)送Ajax請(qǐng)求訪問(wèn)服務(wù)器端公開(kāi)的方法，然后通過(guò)該公開(kāi)方法訪問(wèn)數(shù)據(jù)庫(kù)。
接下來(lái)，我們定義用戶(hù)表（jk_user）的數(shù)據(jù)庫(kù)訪問(wèn)對(duì)象（DAO），它包含方法IsAvailableUser()用來(lái)檢查用戶(hù)名是否可用，具體的實(shí)現(xiàn)如下：
/// <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;
}
}
}現(xiàn)在，我們完成了數(shù)據(jù)庫(kù)訪問(wèn)對(duì)象UserManager，它包含方法IsAvailableUser()來(lái)檢查用戶(hù)是否可用，如果該用戶(hù)名已經(jīng)存在返回false，反之返回true。
接下來(lái)，我們需要實(shí)現(xiàn)服務(wù)器端類(lèi)UserService，讓客戶(hù)端通過(guò)它來(lái)調(diào)用UserManager中的IsAvailableUser()方法，首先我們創(chuàng)建一般處理程序（ASHX文件），實(shí)現(xiàn)ProcessRequest()方法，具體實(shí)現(xiàn)如下：
/// <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類(lèi)實(shí)現(xiàn)了IHttpHandler接口，該接口包含一個(gè)方法ProcessRequest()方法和一個(gè)屬性IsReusable；ProcessRequest()方法用于處理入站的Http請(qǐng)求，在默認(rèn)情況下，UserService類(lèi)把Response內(nèi)容類(lèi)型定義為application/json，這樣我們就可以把數(shù)據(jù)通過(guò)JSON格式進(jìn)行傳輸；IsReusable屬性表示相同的處理程序是否可以用于多個(gè)請(qǐng)求，這里我們?cè)O(shè)置為true，那么處理程序可以用于多個(gè)請(qǐng)求。
前端實(shí)現(xiàn)
注冊(cè)表單在檢查用戶(hù)名時(shí)會(huì)在輸入框的右邊動(dòng)態(tài)地加載圖片，這里我們使用CSS Sprite技巧實(shí)現(xiàn)圖片的動(dòng)態(tài)加載。
當(dāng)頁(yè)面加載時(shí)，不是加載每個(gè)單獨(dú)圖片，而是一次加載整個(gè)組合圖片。這是一個(gè)了不起的改進(jìn)，因?yàn)槲覀冎恍璋l(fā)送一個(gè)HTTP請(qǐng)求獲取組合圖片就OK了，它大大減少了HTTP請(qǐng)求的次數(shù)，減輕服務(wù)器壓力，同時(shí)縮短了懸停加載圖片所需要的時(shí)間延遲，使效果更流暢，不會(huì)停頓。
這里，我們使用可以一個(gè)在線(xiàn)的工具SpritePad設(shè)計(jì)組合圖片和生成相應(yīng)的CSS代碼。
圖5組合圖片
上面，我們已經(jīng)準(zhǔn)備好組合圖片了，接下來(lái)我們添加CSS代碼動(dòng)態(tài)加載“正確”和“出錯(cuò)”圖片，具體實(shí)現(xiàn)如下：
/*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;*/
}接著，我們?cè)趎ameAvailable()方法中的Ajax方法添加文件“UserService.ashx”請(qǐng)求，并傳遞用戶(hù)名給服務(wù)器；在數(shù)據(jù)庫(kù)中查詢(xún)用戶(hù)名是否已經(jīng)存在，存在返回“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;
}
});
}
});最后，我們?cè)谧?cè)表單中添加調(diào)用自定義驗(yàn)證控件的jQuery代碼，具體實(shí)現(xiàn)如下：
<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用戶(hù)注冊(cè)界面
感謝各位的閱讀，以上就是“Ajax注冊(cè)用戶(hù)時(shí)如何實(shí)現(xiàn)表單驗(yàn)證功能”的內(nèi)容了，經(jīng)過(guò)本文的學(xué)習(xí)后，相信大家對(duì)Ajax注冊(cè)用戶(hù)時(shí)如何實(shí)現(xiàn)表單驗(yàn)證功能這一問(wèn)題有了更深刻的體會(huì)，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是創(chuàng)新互聯(lián)，小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章，歡迎關(guān)注！
網(wǎng)站標(biāo)題：Ajax注冊(cè)用戶(hù)時(shí)如何實(shí)現(xiàn)表單驗(yàn)證功能
URL標(biāo)題：http://www.muchs.cn/article44/ippghe.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)頁(yè)設(shè)計(jì)公司、定制網(wǎng)站、虛擬主機(jī)、App開(kāi)發(fā)、手機(jī)網(wǎng)站建設(shè)、網(wǎng)站建設(shè)
聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話(huà)：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)
- 天津茶葉商城APP開(kāi)發(fā)對(duì)企業(yè)轉(zhuǎn)型的作用 2023-02-25
- APP開(kāi)發(fā)之前有幾個(gè)因素需要確定 2016-11-04
- 北京搬家APP開(kāi)發(fā)的特色功能 2023-03-06
- 鏡湖英語(yǔ)培訓(xùn)類(lèi)APP開(kāi)發(fā)核心功能有哪些 2020-12-10
- 短視頻的成都app開(kāi)發(fā)模式是怎樣的？ 2022-07-27
- 上海師生心理顧問(wèn)軟件app開(kāi)發(fā) 2020-12-29
- app定制開(kāi)發(fā)或普通app開(kāi)發(fā)有哪些制作方式？ 2020-12-13
- 成都社交APP開(kāi)發(fā)需要具備什么？ 2023-03-12
- 北京通州APP開(kāi)發(fā)多少錢(qián)，哪些因素決定價(jià)格 2020-12-08
- 奧林匹克公園app開(kāi)發(fā)公司 2022-03-23
- 購(gòu)物直播平臺(tái)APP開(kāi)發(fā)注意下面事項(xiàng) 2021-09-23
- app開(kāi)發(fā)多少錢(qián)？看看共享單車(chē)app你就知道了 2022-06-22