Ajax注冊用戶時實(shí)現(xiàn)表單驗(yàn)證

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 >Sign in/a>./p>
 /div>
 /form>
 !-- End Sign Up Form -->
 /div>
/body>

nameAvailable: {
 check: function(value) {

 if (value) {
 var dataString = 'username=' + value;
 var result;

 //nbsp;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 -"
}

// 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();
 });
 }
 }
}

-- =============================================
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

/// 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;
 }
 }
}

/// 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;
 }
 }
}

/*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;*/
}

// 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;
 }
 });

 }
});

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>