ajax 验证用户名是否唯一

昨天我一哥们问我如何ajax验证用户名唯一性的问题，这个问题虽然简单，但是对于新手没有经验的童鞋们来讲，还是不清楚，这里呢，我写了一个例子，例子不难，用asp.Net技术+ajax+handler即可，另外，数据传递通过json格式，具体的我讲不清楚了，呵呵，我把我的例子放在这里，有需要的童鞋可以拿去，在下去也~~~

前台代码 
 1 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="login.aspx.cs" Inherits="ValidateUserName.login" %>
 2 
 3 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 4 <html xmlns="http://www.w3.org/1999/xhtml">
 5 <head runat="server">
 6     <title></title>
 7     <script src="js/jquery-1.6.2.min.js" type="text/javascript"></script>
 8     <script type="text/javascript">
 9         function validName() {
10             //从登陆名控件上获取输入的名字
11             var name = $("#txt_Name").val();
12             //将名字前后去空格
13             name = $.trim(name);
14             //获取显示信息标签的对象
15             var sp_name = $("#sp_name");
16             if (name.length == 0) {
17                 sp_name.html("用户名不能为空");
18                 return;
19             }
20             else {
21                 $.ajax(
22                 {
23                     type: "POST",                    
24                     url: "ValidateUserInfo.ashx",
25                     datatype: 'json',
26                     data: { fun: 'name', name: name },
27                     success: function (msg) {
28                         //如果data为True证明已存在
29                         if (msg == "True") {
30                             //将文字设为红色
31                             sp_name.css("color", "Red");
32                             sp_name.html("该用户名已存在");
33                         }
34                         else {
35                             //将文字设为绿色
36                             sp_name.css("color", "Green");
37                             sp_name.html("该用户名可用")
38                         }
39                     },
40                     error: function () {
41                         alert("网络异常");
42                         $("#txt_Name").focus();
43                     }
44 
45                 }
46                 );
47             }
48 
49         }
50     </script>
51 </head>
52 <body>
53     <form id="form1" runat="server">
54     <div>
55         <input type="text" id="txt_Name" onblur="validName();" />
56         <span id="sp_name" style="color: Red; font-size: 10px;"></span>
57     </div>
58     </form>
59 </body>
60 </html>

 

一般处理程序代码 
 1 using System;
 2 using System.Collections.Generic;
 3 using System.Linq;
 4 using System.Web;
 5 
 6 namespace ValidateUserName
 7 {
 8     /// <summary>
 9 /// ValidateUserInfo 的摘要说明
10 /// </summary>
11     public class ValidateUserInfo : IHttpHandler
12     {
13 
14         public void ProcessRequest(HttpContext context)
15         {
16             context.Response.ContentType = "text/plain";
17             string fun = context.Request["fun"].Trim();
18             switch (fun)
19             {
20                 case "name":
21                     ValidateUserName(context);
22                     break;
23             }
24         }
25 
26         /// <summary>
27 /// 验证用户名是否存在
28 /// </summary>
29 /// <param name="context"></param>
30         private void ValidateUserName(HttpContext context)
31         {
32             //ajax通过一般处理程序提交的请求  在其中拿到用户输入的用户名
33             string name = context.Request["name"].Trim();
34             //从数据库中验证是否存在，这里省略
35             if (name != "zzz" && name != "xxx" && name != "aaa")
36             {
37                 //如果验证不存在，返回页面一个False
38                 context.Response.Write("False");
39             }
40             else
41             {
42                 //反之返回一个True
43                 context.Response.Write("True");
44             }
45         }
46 
47         public bool IsReusable
48         {
49             get
50             {
51                 return false;
52             }
53         }
54     }
55 }

 

posted @ 2012-03-28 12:18  TerryZou1989  阅读(425)  评论(1)  编辑  收藏  举报