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

来源:岁月联盟 编辑:exp 时间:2012-04-29
 最近在做毕业设计的时候,新增管理员用到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'>&nbsp;</span>" + "用户名已经存在,请重新输入。"); 
10.             } 
11.             else
12.             { 
13.                 Response.Write("<span class='success'>&nbsp;</span>" + "恭喜该用户可以使用,请继续。"); 
14.             } 
15.         } 
16.         else
17.         { 
18.             Response.Write("<span class='error'>&nbsp;</span>" + "用户名不能为空!"); 
19.         } 
20.     } 
21. }
当完成上面的步骤之后,可以实现判断用户名是否重复,但是新的问题出现了?
1. “/”应用程序中的服务器错误。 
2. -------------------------------------------------------------------------------- 
3. 
4. 此页的状态信息无效,可能已损坏。  
5. 说明: 执行当前 Web 请求期间,出现未处理的异常。请检查堆栈跟踪信息,以了解有关该错误以及代码中导致错误的出处的详细信息。  
6. 
7. 异常详细信息: System.Web.HttpException: 此页的状态信息无效,可能已损坏。 
8. 
9. 源错误:  
10. 
11. 
12. [没有相关的源行] 
13.   
14. 
15. 源文件: c:/Windows/Microsoft.NET/Framework/v2.0.50727/Temporary ASP.NET Files/root/bab5ae03/ea433214/App_Web_asfn-zfc.1.cs    行: 0  
16. 
17. 堆栈跟踪:  
18. 
19. 
20. [FormatException: Base-64 字符串中的无效字符。] 
21.    System.Convert.FromBase64String(String s) +0 
22.    System.Web.UI.ObjectStateFormatter.Deserialize(String inputString) +77 
23.    System.Web.UI.ObjectStateFormatter.System.Web.UI.IStateFormatter.Deserialize(String serializedState) +4 
24.    System.Web.UI.Util.DeserializeWithAssert(IStateFormatter formatter, String serializedState) +37 
25.    System.Web.UI.HiddenFieldPageStatePersister.Load() +113 
26. 
27. [ViewStateException: 无效的视图状态。 
28.     Client IP: 127.0.0.1 
29.     Port:  
30.     User-Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; Trident/4.0;  Embedded Web Browser from: http://bsalsa.com/; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET4.0C; .NET4.0E; Tablet PC 2.0; 360SE) 
31.     ViewState: /wEPDwUJNzMxNjYzNjkwZBgBBR5fX0NvbnRyb2xzUmVxdWlyZVBvc3RCYWNrS2V5X18WHQULY2JsTWFuYWdlJDAFC2NibE1hbmFnZSQwBQxjYmxBcnRpY2xlJDAFDGNibEFydGljbGUkMQUMY2JsQXJ0aWNsZSQyBQxjYmxBcnRpY2xlJDMFDGNibEFydGljbGUkMwUQY2JsQXJ0aWNsZUtpbmQkMAUQY2JsQXJ0aWNsZUtpbmQkMQUQY2JsQXJ0aWNsZUtpbmQkMgUQY2JsQXJ0aWNsZUtpbmQkMwUQY2JsQXJ0aWNsZUtpbmQkMwUIY2JsUGljJDAFCGNibFBpYyQxBQhjYmxQaWMkMgUIY2JsUGljJDMFCGNibFBpYyQzBQxjYmxQaWNLaW5kJDAFDGNibFBpY0tpbmQkMQUMY2JsUGljS2luZCQyBQxjYmxQaWNLaW5kJDMFDGNibFBpY0tpbmQkMwUKY2JsVmlkZW8kMAUKY2JsVmlkZW8kMQUKY2JsVmlkZW8kMgUKY2JsVmlkZW8kMwUKY2JsVmlkZW8kMwUMaW1nQnRuU3VibWl0BQxpbWdCdG5DYW5jbGUzgcuA+4V7gkvpf3QO5Zd66FFRMQ==,/wEPDwUJNzgzNDMwNTMzZGT4DI9jhwcGjbIzQJAyCccg/Xoh1g== 
32.     Referer: http://localhost:53227/site_ma...] 
33. 
34. [HttpException (0x80004005): 此页的状态信息无效,可能已损坏。] 
35.    System.Web.UI.ViewStateException.ThrowError(Exception inner, String persistedState, String errorPageMessage, Boolean macValidationError) +106 
36.    System.Web.UI.ViewStateException.ThrowViewStateError(Exception inner, String persistedState) +14 
37.    System.Web.UI.HiddenFieldPageStatePersister.Load() +217 
38.    System.Web.UI.Page.LoadPageStateFromPersistenceMedium() +105 
39.    System.Web.UI.Page.LoadAllState() +43 
40.    System.Web.UI.Page.ProcessRequestMain(Boolean includeStagesBeforeAsyncPoint, Boolean includeStagesAfterAsyncPoint) +6785 
41.    System.Web.UI.Page.ProcessRequest(Boolean includeStagesBeforeAsyncPoint, Boolean includeStagesAfterAsyncPoint) +242 
42.    System.Web.UI.Page.ProcessRequest() +80 
43.    System.Web.UI.Page.ProcessRequestWithNoAssert(HttpContext context) +21 
44.    System.Web.UI.Page.ProcessRequest(HttpContext context) +49 
45.    ASP.site_mag_manage_editmanage_aspx.ProcessRequest(HttpContext context) in c:/Windows/Microsoft.NET/Framework/v2.0.50727/Temporary ASP.NET Files/root/bab5ae03/ea433214/App_Web_asfn-zfc.1.cs:0 
46.    System.Web.CallHandlerExecutionStep.System.Web.HttpApplication.IExecutionStep.Execute() +181 
47.    System.Web.HttpApplication.ExecuteStep(IExecutionStep step, Boolean& completedSynchronously) +75 
48. 
49.   
50. 
51. 
52. -------------------------------------------------------------------------------- 
53. 版本信息: Microsoft .NET Framework 版本:2.0.50727.5448; ASP.NET 版本:2.0.50727.5456 
后来又发了很多时间去网上找解决方案。最后找到一个比较满意的。且决解问题的,方案如下:
 通过上网查询,给出以下解决方案:
在该工程中的web.config中添加如下代码:
<pages enableEventValidation="False" viewStateEncryptionMode="Never" />
来源: http://www.2cto.com/kf/201204/129712.html
但是,按照网上给出的方法并没有解决问题.
如果你在回调前不加这两句的话 __theFormPostData就会在原来的基础上再添加现有的网页状态post数据,这样可以说现在回调时你已包含了两份post数据,但回调时,服务器方仍然把它当作一份看待,结果服务器分析不出post数据,只给你返回了一个网页状态已损坏的消息
分析,可能是B页面,包含form表单才造成问题出现.于是删除B.aspx中的Form标签.问题解决.

于是我就将我ajax引用页面的form删掉。代码变成如下:
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. 
9. </body>
10. </html>
对比发现了什么不一样了吗?少了form以及下面的div。
这时你再尝试一下,发现就这样实现了添加新的管理员吧。

 
摘自 技术文章