当前位置:编程学习 > JAVA >>

用jquery验证用户名是否有效或重复

 最近在做毕业设计的时候,新增管理员用到jquery的ajax验证用户名是否存在,本人初次使用jquery的ajax,发了挺长时间的去网上找相关东西,现在和大家共享我的做法,多多指教。
实现的效果如下图:

在代码中使用jquery-1.3.2的vsdoc版本:
 

1. <script src="/js/jquery/jquery-1.3.2-vsdoc.js" type="text/javascript"></script> 
2.     <script type="text/javascript" language="javascript"> 
3.         $(function() { 
4.             $("#txtUserName").focus(function() { 
5.                 $(this).addClass("focus"); 
6.             }).blur(function(){ 
7.                 $.ajax({ 
8.                     type: "GET", 
9.                     url: "valideUserName_ajax.aspx", 
10.                     dataType: "html", 
11.                     data: "userName=" + $("#txtUserName").val(), 
12.                     beforeSend: function(XMLHttpRequest) { 
13.                         $("#showResult").text("正在查询。。。"); 
14.                     }, 
15.                     success: function(msg) { 
16.                         $("#showResult").html(msg); 
17.                         $("#showResult").css("color", "red"); 
18.                     }, 
19.                     complete: function(XMLHttpRequest, textStatus) { 
20.                         //隐藏正在查询图片 
21.                     }, 
22.                     error: function() { 
23.                         //错误处理 
24.                     } 
25.                 }); 
26.             }); 
27.         }); 
28.     </script>
其中上面引用的js代码中的就是id为txtUserName的textbox先聚焦,失去焦点时,验证使用ajax判断用户名是否存在。
1. <asp:TextBox ID="txtUserName" size="25" Height="20px" runat="server"></asp:TextBox> 
ajax获取的页面:valideUserName_ajax.aspx
前台页面的代码如下:
1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2. 
3. <html xmlns="http://www.w3.org/1999/xhtml" >
4. <head runat="server">
5.     <title>验证用户名是否存在</title>
6. </head>
7. <body>
8.     <form id="form1" runat="server">
9.     <div>
10.      
11.     </div>
12.     </form>
13. </body>
14. </html>
.cs的代码:本人使用三层架构,如用其他方法,请相应的转换:
1. public partial class valideUserName_ajax : System.Web.UI.Page 
2. { 
3.     protected void Page_Load(object sender, EventArgs e) 
4.     { 
5.         if (!string.IsNullOrEmpty(Request.QueryString["userName"])) 
6.         { 
7.             if(new zwx.BLL.adminUsers().ExistsUserName(Request.QueryString["userName"].ToString())) 
8.             { 
9.                 Response.Write("<span class='error'> </span>" + "用户名已经存在,请重新输入。"); 
10.             } 
11.             else
12.             { 
13.                 Response.Write("<span class='success'> </span>" + "恭喜该用户可以使用,请继续。"); 
14.             } 
15.         } 
16.         else
17.         { 
18.             Response.Write("<span class='error'> </span>" + "用户名不能为空!"); 
19.         } 
20.     } 
21. }
当完成上面的步骤之后,可以实现判断用户名是否重复,但是新的问题出现了?
1. “/”应用程序中的服务器错误。 
2. -------------------------------------------------------------------------------- 
3. 
4. 此页的状态信息无效,可能已损坏。  
5. 说明:

补充:web前端 , JavaScript ,
CopyRight © 2012 站长网 编程知识问答 www.zzzyk.com All Rights Reserved
部份技术文章来自网络,