Ajax在注册用户时实现表单验证

在网站注册时，我们经常会发现注册表单通常需要检查用户名和电子邮件地址的可用性。从而保证用户没有相同的用户名和电子邮件地址；有些网站喜欢在用户提交填写好的用户信息时检查信息的可用性，而有些网站会实时检查用户名和电子邮件地址的可用性，例如“用户名”文本框失去焦点时；就用户体验而言，最好用实时的用户信息来检查用户体验，而不是在表单提交后告诉用户信息不符合系统要求。

以下截图是新浪微博的注册界面，使用实时用户信息查看，如手机号、用户名等。

图1新浪微博登记表。

1.文字。

假设，现在要求我们实现一个注册接口，实时检查用户信息是否符合系统要求。

其中，注册界面包括：用户名、邮箱地址、密码、微博地址等信息；实时检查：当文本框失去焦点时，实时检查信息，例如“用户名”文本框失去焦点时，触发页面发送Ajax请求，查看数据库中是否有该用户，然后将查询结果返回到首页。

对于表单输入检查，我们将使用上一篇博文《自定义jQuery插件Step by Step》中的自定义表单信息检查插件来检查输入信息。

图2注册验证过程。

登记表设计现在我们来定义一下登记表，包括：用户名、邮箱、密码、微博地址等信息。由于时间关系，我们已经定义了登记表界面，具体实现代码如下：

body div id='Div1 '！-启动注册表单-表单操作=' # registration-Form ' id=' Form 1 ' H2注册/h2字段集div class='fieldgroup '标签为=' Name ' Name/label input class=' Form _ element ' type=' text ' Name=' Name ' validation='必填Name available '/span class=' availability _ status '/span/div class=' field group '标签为=' Email ' Email/label input class=' Form _ element ' type=' text ' Name=' Email ' validation=' Email '/span/spana href=' http://www . cn blogs.com/rush '登录/a/p/div/form！- End注册表单- /div/body以上，我们实现了注册表单，其中包括：用户名、电子邮件地址、密码和微博地址文本框。当“用户名”失焦时，发送Ajax请求实时检查用户名是否可用，并动态加载图片指示检查及对应的检查结果。

图3登记表。

JQuery Validation插件现在，我们需要修改上一篇博文中定义的表单检查控件，并且需要添加用户名检查和文本框模糊事件。

首先，我们向Validation类型添加一个用户名检查方法，因为用户检查是发送Ajax请求，然后查询数据库，看用户名是否存在，以确定用户名是否可用。

名称可用： { check:函数（值){ if(值){ var dataString=' username='值；定义变量结果；//检查可用性.//加载检查图像。$('.可用性_状态')。html(' img src=' http :加载程序。gif ' align=' ABS middle ' ')；//发送创建交互式、快速动态网页应用的网页开发技术请求，检查名称是否可用。$.ajax({ type: 'GET '，url: 'UserService.ashx '，data: dataString，success:函数(数据){ //检查完成后，再加载相应的钢性铸铁样式。$('.可用性_状态')。ajaxComplete(函数（事件、请求、设置){ if (data==false) { $(').可用性_状态')。html(" ")；$('.可用性_状态')。移除CLaSS(' tick ')；$('.可用性_状态')。addClass(')错误');返回真；} else { $(' .可用性_状态')。html(" ")；$('.可用性_状态')。removeClass(“”错误');$('.可用性_状态')。addCLaSS(' tick ')；返回false } })；} });//发送异步请求，返回假临时。返回false////e . prevent default()；} else { $(' .可用性_状态')。移除CLaSS(' tick ')；$('.可用性_状态')。removeClass(“”错误');返回false} }，msg: ' '，tip: '应输入4-30个字符，支持字母、数字和_或-'}上面，我们完成了在确认类型中增加名称可用()方法，它通过发送异步埃阿斯请求来检查用户名是否可用，在检查的过程中，在输入框右边动态地加载图片来表示检查中，当检查结束加载相应的图片表示用户是否可用。

接下来，我们将添加集中和虚化事件，当文本框得到焦点时触发集中事件，提示输入信息的要求，当文本框失去焦点时触发虚化事件，发生实时埃阿斯请求，例如：检查用户名是否可用。

由于，事件方法应该是田类型公开的方法，确实我们也不想为每个田对象都定义自己事件方法，所以我们通过原型链的方式公开事件方法焦点()和blur()，具体实现如下：

//字段类型的原型Field.prototype={ //Public方法附件：函数（事件){ //对象引用田对象var obj=this//当字段失去焦点时，调用生效方法if(event==' blur '){ obj。字段。bind(' blur ')，function(){ return obj。validate()；});} //当字段获得焦点后，再调用提示方法if(event==' focus '){ obj。字段。bind(' focus ')，function(){ return obj。提示()；});} }}我们给田的原型链添加了事件响应事件虚化和专注，当失去焦点时触发田的vlidate()方法，获得焦点时触发田的提示()方法。

数据表设计前面，我们提到注册表单的用户名可用性检查设计是通过发送埃阿斯请求，然后到数据库中查询用户名是否存在来确定用户名的可用性。

接下来，我们添加数据库表jk_user用来存储用户信息，它包括用户名、密码（注意：这里没有考虑隐私信息的加密存储)、显示名称和注册日期等，具体设计如下：

-=============================================================CREATE TABLE[dbo].[jk_users](-这是对用户表的引用，它是主键[ID] [bigint] IDENTITY(1，1) NOT NULL，[user _ log in][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，-此字段从函数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)Ajax form 2(9503 . 163.com)

图四数据表设计

服务端设计前面，我们实现了用户表的设计，由于注册表单通过发送埃阿斯请求访问服务器端公开的方法，然后通过该公开方法访问数据库。

接下来，我们定义用户表(jk_user)的数据库访问对象(DAO)，它包含方法IsAvailableUser()用来检查用户名是否可用，具体的实现如下：

///摘要///用户大刀管理器////摘要公共类user manager { private const string Query=' SELECT user _ log in，user_email，user _ URL FROM JK _ users WHERE(user _ log in=@ user _ log in)'；///摘要///初始化请参见cref='UserManager'/类的新实例////摘要公共用户管理器(){ }///摘要///使用指定的用户名确定用户是否可用。////摘要////参数名称='用户名'用户的名称/param /如果用户可用，则返回///ctrl UE/c；否则，cf alse/c .////使用(var con=新的SqlConnection(配置管理器)返回公共bool IsAvailableUser(字符串用户名){ 0 .ConnectionStrings['SQLCONN2'].ToString()))使用(var com=new SqlCommand(Query，con)) { //将用户登录参数传递给结构化查询语言语句网站.参数。添加(' @user_login '，SqlDbType .VarChar ).值=用户名；com .连接。open()；回来！com .ExecuteReader().HasRows} }}现在，我们完成了数据库访问对象用户管理器，它包含方法IsAvailableUser()来检查用户是否可用，如果该用户名已经存在返回假的，反之返回真的。

接下来，我们需要实现服务器端类UserService，让客户端通过它来调用用户管理器中的IsAvailableUser()方法，首先我们创建一般处理程序(ASHX文件),实现ProcessRequest()方法，具体实现如下：

///摘要///用户可用性检查服务////summarypublic类用户服务： IHttpHandler { public void process request(HttpContext)上下文){ //响应json类型。语境。响应。content type=' application/JSON '；语境回应。charset=' utf-8 '；var管理器=新用户管理器();字符串用户名=上下文请求。查询字符串[' username ']；//检查用户名是否为空如果(字符串IsNullOrEmpty(userName)){ 0抛出新异常('用户名不能为空');} //调用isaavailable user方法var .结果=经理IsAvailableUser(用户名);//将数据序列化为json格式var JSON=new DataContractJsonSerializer(结果. GetType())；json .WriteObject(上下文回应。OutputStream，结果)；} //是否可以由其他处理程序恢复public bool IsReuse { get { return true；} }}大家注意到UserService类实现了IHttpHandler接口，该接口包含一个方法ProcessRequest()方法和一个属性以色列可用；ProcessRequest()方法用于处理入站的超文本传送协议(超文本传输协议的缩写)请求，在默认情况下，用户服务类把反应内容类型定义为应用程序/json，这样我们就可以把数据通过JSON格式进行传输；以色列可用属性表示相同的处理程序是否可以用于多个请求，这里我们设置为没错，那么处理程序可以用于多个请求。

前端实现注册表单在检查用户名时会在输入框的右边动态地加载图片，这里我们使用半铸钢钢性铸铁(Cast Semi-Steel)精灵技巧实现图片的动态加载。

当页面加载时，不是加载每个单独图片，而是一次加载整个组合图片。这是一个了不起的改进，因为我们只需发送一个超文本传送协议请求获取组合图片就好了，它大大减少了超文本传送协议请求的次数，减轻服务器压力，同时缩短了悬停加载图片所需要的时间延迟，使效果更流畅，不会停顿。

这里，我们使用可以一个在线的工具SpritePad设计组合图片和生成相应的半铸钢钢性铸铁(铸造半钢)代码。

图5组合图片

上面，我们已经准备好组合图片了，接下来我们添加半铸钢钢性铸铁(铸造半钢)代码动态加载"正确"和"出错"图片，具体实现如下：

/*CSS精灵*//*加载刻度图片*/。勾选{ width: 17px高度： 17px余量： 6px 0 0向右浮动：背景：网址(./图像/提示图标。巴布亚新几内亚)；背景-位置： 0px-32px；显示器：块；/*文本-装饰：无；垂直对齐：毫米；*/}/*加载错误图片*/span。错误{ width : 17px高度： 17px余量： 6px 0 0向右浮动：背景：网址(./图像/提示图标。巴布亚新几内亚)；背景-位置： 0px-15px；显示器：块；/*文本-装饰：无；垂直对齐：毫米；*/}接着，我们在名称可用()方法中的埃阿斯方法添加文件" UserService.ashx "请求，并传递用户名给服务器；在数据库中查询用户名是否已经存在，存在返回"假的",否则返回"真的".

//发送创建交互式、快速动态网页应用的网页开发技术请求，检查名称是否可用。$.ajax({ type: 'GET '，url: 'UserService.ashx '，data: dataString，success:函数(数据){ //检查完成后，再加载相应的钢性铸铁样式。$('.可用性_状态')。ajaxComplete(函数（事件、请求、设置){ if (data==false) { $(').可用性_状态')。html(" ")；$('.可用性_状态')。移除CLaSS(' tick ')；$('.可用性_状态')。addClass(')错误');返回真；} else { $(' .可用性_状态')。html(" ")；$('.可用性_状态')。removeClass(“”错误');$('.可用性_状态')。addCLaSS(' tick ')；返回false } })；}});最后，我们在注册表单中添加调用自定义验证控件的jQuery代码，具体实现如下：

脚本类型='text/javascript' //设置显示图像大小pic=新图像(16,16);pic。src='加载程序。gif '；$(function() { //jQuery DOM就绪函数。//获取表单对象var signing form=$(' # signing form-form ')；//调用验证方法签署表格。验证()；});/脚本

图6用户注册界面

如果大家还想深入学习，可以点击两个精彩的专题：jquery表单验证大全Java脚本语言表单验证大全

本文主要介绍了埃阿斯注册表单的设计，通过发送埃阿斯请求方式实时地检查用户名的可用性，并且使用了自定义的表单验证插件检查输入信息的正确性。