');
// 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()用来检查用户名是否可用，具体的实现如下：
///