Ajax注册用户时实现表单验证
很多时候在网站上注册时，我们会发现，注册表单通常需要检查用户名和电子邮件地址的可用性；从而确保用户之间不拥有相同的用户名和电子邮件地址；一些网站喜欢在用户提交填写的用户信息时，做信息可用性的检查，而一些网站会做实时的用户名和电子邮件地址可用性检查，例如：“用户名”文本框失去焦点时；就用户体验来说，实时的用户信息检查用户体验效果更好，而不是在表单提交后，告诉用户信息不符合系统要求。
下面截图是新浪微博的注册界面，它采用的是实时的用户信息检查，如：手机号码和用户名等信息。
图1新浪微博注册表单
1、正文
假设，现在要求我们实现一个注册界面并且它采用实时方式检查用户信息是否符合系统的要求。
其中，注册界面包含：用户名，邮件地址，密码和微博地址等信息；实时检查：当文本框失去焦点时对信息进行实时检查，例如：“用户名”文本框失去焦点时，触发页面发送Ajax请求，到数据库中用户是否可用，接着把查询结果返回到前端页面中。
对于表单输入检查，我们将使用前一博文《自定义jQuery插件Step by Step》中，自定义表单信息检查插件对输入信息进行检查。
图2注册验证过程
注册表单设计
现在，让我们定义注册表单，它包含：用户名，邮件地址，密码和微博地址等信息，由于时间的关系，我们已经把注册表单界面的定义好了，具体实现代码如下：
<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 href="http://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="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类型中增加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()用来检查用户名是否可用，具体的实现如下：
/// <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;
}
}
}
现在，我们完成了数据库访问对象UserManager，它包含方法IsAvailableUser()来检查用户是否可用，如果该用户名已经存在返回false，反之返回true。
接下来，我们需要实现服务器端类UserService，让客户端通过它来调用UserManager中的IsAvailableUser()方法，首先我们创建一般处理程序（ASHX文件），实现ProcessRequest()方法，具体实现如下：
/// <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类实现了IHttpHandler接口，该接口包含一个方法ProcessRequest()方法和一个属性IsReusable；ProcessRequest()方法用于处理入站的Http请求，在默认情况下，UserService类把Response内容类型定义为application/json，这样我们就可以把数据通过JSON格式进行传输；IsReusable属性表示相同的处理程序是否可以用于多个请求，这里我们设置为true，那么处理程序可以用于多个请求。
前端实现
注册表单在检查用户名时会在输入框的右边动态地加载图片，这里我们使用CSS Sprite技巧实现图片的动态加载。
当页面加载时，不是加载每个单独图片，而是一次加载整个组合图片。这是一个了不起的改进，因为我们只需发送一个HTTP请求获取组合图片就OK了，它大大减少了HTTP请求的次数，减轻服务器压力，同时缩短了悬停加载图片所需要的时间延迟，使效果更流畅，不会停顿。
这里，我们使用可以一个在线的工具SpritePad设计组合图片和生成相应的CSS代码。
图5组合图片
上面，我们已经准备好组合图片了，接下来我们添加CSS代码动态加载“正确”和“出错”图片，具体实现如下：
/*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;*/
}
接着，我们在nameAvailable()方法中的Ajax方法添加文件“UserService.ashx”请求，并传递用户名给服务器；在数据库中查询用户名是否已经存在，存在返回“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;
}
});
}
});
最后，我们在注册表单中添加调用自定义验证控件的jQuery代码，具体实现如下：
<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用户注册界面
如果大家还想深入学习，可以点击两个精彩的专题：jquery表单验证大全 JavaScript表单验证大全
本文主要介绍了Ajax注册表单的设计，通过发送Ajax请求方式实时地检查用户名的可用性，并且使用了自定义的表单验证插件检查输入信息的正确性。
相关推荐
-
Bootstrap Validator 表单验证
在线演示地址:http://www.shouce.ren/study/api/s/jq--BootstrapValidator--index.html 使用方法,代码如下所示: 1.<form id="defaultForm" method="post" class="form-horizontal" action="target.php"> 2. <div class="form-group&qu
-
Bootstrap中的表单验证插件bootstrapValidator使用方法整理（推荐）
本文给大家介绍如何判断表单验证的实例代码,在没给大家介绍正文之前,先给大家介绍下插件. 插件介绍 先上一个图: 下载地址:https://github.com/nghuuphuoc/bootstrapvalidator 使用提示 中文化: 下载插件后,将\js\bootstrapValidator\language\zh_CN.js 引入文件,即实现中文化 提交前验证表单: 更丰富一点的表单验证例子:http://www.jq22.com/yanshi522,直接上代码: <!DOCTYPE h
-
实用又漂亮的BootstrapValidator表单验证插件
本文推荐一款twitter做的bootstrapValidator.js,本身bootstrap就是twitter做的,那么使用原配的validator也就更值得信赖.从百度上搜bootstrapValidator会出现很多款,但我只推荐这款: 一.一睹为快 为了简便的介绍,这里只做为空的check. BootstrapValidator官方下载地址 二.资源引用 下载完资源包后,你可以看到如下的目录. 然后把以下三个文件引入到你项目. <link type="text/css"
-
ajax jquery 异步表单验证示例代码
文件目录: html代码: 复制代码 代码如下: <html> <head> <title>异步表单验证</title> <script type='text/javascript' src='jquery.js' ></script> <script> function checkname(){ //$("input[name='name']").val() $.ajax({ type:"
-
基于Bootstrap+jQuery.validate实现Form表单验证
基于Bootstrap jQuery.validate Form表单验证实践项目结构 : github 上源码地址:https://github.com/starzou/front-end-example 1.form 表单代码[html] 复制代码 代码如下: <!DOCTYPE html> <html> <head> <title>Bootstrap Form Template</title>
-
JS组件Form表单验证神器BootstrapValidator
本文为大家分享了JS组件Form表单验证神器BootstrapValidator,供大家参考,具体内容如下 1.初级用法 来看bootstrapvalidator的描述:A jQuery form validator for Bootstrap 3.从描述中我们就可以知道它至少需要jQuery.bootstrap的支持.我们首先引入需要的js组件: <script src="~/Scripts/jquery-1.10.2.js"></script> <sc
-
基于PHP+Ajax实现表单验证的详解
一,利用键盘响应,在不刷新本页面的情况下验证表单输入是否合法用户通过onkeydown和onkeyup事件来触发响应事件.使用方法和onclick事件类似.onkeydown表示当键盘上的键被按下时触发,onkeyup和它正好相反,当键盘上的键被按下又抬起时触发.两种常用调用方法:(1)将事件添加到页面元素中,当用户输入完信息后,单击任意键,onkeydown事件被触发,并调用refer()函数.这种方法最简单,最直接,格式如下: 复制代码 代码如下: <script type="text
-
自己编写的支持Ajax验证的JS表单验证插件
自己编写了一个表单验证插件,支持ajax验证,使用起来很简单. 每个需要验证的表单元素下面有一个span标签,这个标签的class有一个valid表示需要验证,如果有nullable则表示可为空:rule表示验证规则,msg表示错误提示信息:to表示要验证的元素的name值,如果元素是单个的,to可以不写.该插件会遍历每个有valid的span标签,找出它前面需要验证的元素,根据rule验证,如果验证不通过,则显示边框为红色,鼠标放在元素上时显示错误信息. 验证时机:1.点击提交按钮时显式调用验
-
MVC遇上bootstrap后的ajax表单验证
使用bootstrap后他由他自带的样式has-error,想要使用它就会比较麻烦,往常使用jquery.validate的话只有使用他自己的样式了,而且有模型在使用模型验证更方便点.怎么解决呢? 当然你可以专门写一个针对此的jquery插件,我觉得蛮麻烦的,喜欢写插件的研究下吧. 首先Nuget获取一个 MVC EditorTemplates for Bootstrap 3 的组件,有了他以后就有了一些模版,比如比较简单的一个Text: @model object <div class="
-
基于Bootstrap+jQuery.validate实现表单验证
这大概是一种惯例,学习前台后台最开始接触的业务都是用户注册和登录.现在社会坚持以人为本的理念,在网站开发过程同样如此.User是我们面对较多的对象,也是较核心的对象.最开始的用户注册和登陆这块,也就尤为重要. 用户注册和登录其实往往比我们想象的难.就比如表单校验,里面涵盖的内容其实挺多,就前台而言,你需要了解: 1.正则表达式的基本了解 其实正则并不难,并且在学会后能带给你极大的成就感,享受那种事半功倍的效果吧. 2.ajax异步请求 在验证用户名是否存在.用户登录时账号或者密码错误时给出相应的