很多时候在网站上注册时，我们会发现，注册表单通常需要检查用户名和电子邮件地址的可用性；从而确保用户之间不拥有相同的用户名和电子邮件地址；一些网站喜欢在用户提交填写的用户信息时，做信息可用性的检查，而一些网站会做实时的用户名和电子邮件地址可用性检查，例如：“用户名”文本框失去焦点时；就用户体验来说，实时的用户信息检查用户体验效果更好，而不是在表单提交后，告诉用户信息不符合系统要求。
下面截图是新浪微博的注册界面，它采用的是实时的用户信息检查，如：手机号码和用户名等信息。
图1新浪微博注册表单
1、正文
假设，现在要求我们实现一个注册界面并且它采用实时方式检查用户信息是否符合系统的要求。
其中，注册界面包含：用户名，邮件地址，密码和微博地址等信息；实时检查：当文本框失去焦点时对信息进行实时检查，例如：“用户名”文本框失去焦点时，触发页面发送Ajax请求，到数据库中用户是否可用，接着把查询结果返回到前端页面中。
对于表单输入检查，我们将使用前一博文《自定义jQuery插件Step by Step》中，自定义表单信息检查插件对输入信息进行检查。
图2注册验证过程
注册表单设计
现在，让我们定义注册表单，它包含：用户名，邮件地址，密码和微博地址等信息，由于时间的关系，我们已经把注册表单界面的定义好了，具体实现代码如下：
<body> <div> <!-- Start Sign Up Form --> <form action="#signup-form"> <h2> Sign Up</h2> <fieldset> <div> <label for="name"> Name</label> <input type="text" validation="required nameAvailable" /> <span></span> </div> <div> <label for="email"> Email</label> <input type="text" validation="email" /> <span></span> </div> <div> <label for="password"> Password</label> <input type="password" validation="password" /> <span></span> </div> <div> <label for="weibo"> Weibo</label> <input type="text" validation="url" /> <span></span> </div> <div> <input type="submit" value="Sign up"> <span></span> </div> </fieldset> <div> <p> Already registered? <a href="https://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="https://www.jb51.net/loader.gif">'); // 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 -" }