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

2025-02-28 技术教程

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

实现的效果如下图：

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

<scriptsrc="/js/jquery/jquery-1.3.2-vsdoc.js"type="text/javascript"></script> <scripttype="text/javascript"language="javascript"> $(function(){ $("#txtUserName").focus(function(){ $(this).addClass("focus"); }).blur(function(){ $.ajax({ type:"GET", url:"valideUserName_ajax.aspx", dataType:"html", data:"userName="+$("#txtUserName").val(), beforeSend:function(XMLHttpRequest){ $("#showResult").text("正在查询。。。"); }, success:function(msg){ $("#showResult").html(msg); $("#showResult").css("color","red"); }, complete:function(XMLHttpRequest,textStatus){ //隐藏正在查询图片 }, error:function(){ //错误处理 } }); }); }); </script>

其中上面引用的js代码中的就是id为txtUserName的textbox先聚焦，失去焦点时，验证使用ajax判断用户名是否存在。

<asp:TextBoxID="txtUserName"size="25"Height="20px"runat="server"></asp:TextBox>

ajax获取的页面：valideUserName_ajax.aspx
前台页面的代码如下：

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><headrunat="server"><title>验证用户名是否存在</title></head><body><formid="form1"runat="server"><div> </div></form></body></html>

.cs的代码：本人使用三层架构，如用其他方法，请相应的转换：

publicpartialclassvalideUserName_ajax:System.Web.UI.Page { protectedvoidPage_Load(objectsender,EventArgse) { if(!string.IsNullOrEmpty(Request.QueryString["userName"])) { if(newzwx.BLL.adminUsers().ExistsUserName(Request.QueryString["userName"].ToString())) { Response.Write("<spanclass='error'> </span>"+"用户名已经存在，请重新输入。"); } else{ Response.Write("<spanclass='success'> </span>"+"恭喜该用户可以使用，请继续。"); } } else{ Response.Write("<spanclass='error'> </span>"+"用户名不能为空！"); } } }

当完成上面的步骤之后，可以实现判断用户名是否重复，但是新的问题出现了？

“/”应用程序中的服务器错误。 -------------------------------------------------------------------------------- 此页的状态信息无效，可能已损坏。说明:执行当前Web请求期间，出现未处理的异常。请检查堆栈跟踪信息，以了解有关该错误以及代码中导致错误的出处的详细信息。异常详细信息:System.Web.HttpException:此页的状态信息无效，可能已损坏。源错误: [没有相关的源行] 源文件:c:\Windows\Microsoft.NET\Framework\v2.0.50727\TemporaryASP.NETFiles\root\bab5ae03\ea433214\App_Web_asfn-zfc.1.cs行:0 堆栈跟踪: [FormatException:Base-64字符串中的无效字符。] System.Convert.FromBase64String(Strings)+0 System.Web.UI.ObjectStateFormatter.Deserialize(StringinputString)+77 System.Web.UI.ObjectStateFormatter.System.Web.UI.IStateFormatter.Deserialize(StringserializedState)+4 System.Web.UI.Util.DeserializeWithAssert(IStateFormatterformatter,StringserializedState)+37 System.Web.UI.HiddenFieldPageStatePersister.Load()+113 [ViewStateException:无效的视图状态。 ClientIP:127.0.0.1 Port: User-Agent:Mozilla/4.0(compatible;MSIE8.0;WindowsNT6.1;Trident/4.0;EmbeddedWebBrowserfrom:http://bsalsa.com/;SLCC2;.NETCLR2.0.50727;.NETCLR3.5.30729;.NETCLR3.0.30729;MediaCenterPC6.0;.NET4.0C;.NET4.0E;TabletPC2.0;360SE) ViewState:/wEPDwUJNzMxNjYzNjkwZBgBBR5fX0NvbnRyb2xzUmVxdWlyZVBvc3RCYWNrS2V5X18WHQULY2JsTWFuYWdlJDAFC2NibE1hbmFnZSQwBQxjYmxBcnRpY2xlJDAFDGNibEFydGljbGUkMQUMY2JsQXJ0aWNsZSQyBQxjYmxBcnRpY2xlJDMFDGNibEFydGljbGUkMwUQY2JsQXJ0aWNsZUtpbmQkMAUQY2JsQXJ0aWNsZUtpbmQkMQUQY2JsQXJ0aWNsZUtpbmQkMgUQY2JsQXJ0aWNsZUtpbmQkMwUQY2JsQXJ0aWNsZUtpbmQkMwUIY2JsUGljJDAFCGNibFBpYyQxBQhjYmxQaWMkMgUIY2JsUGljJDMFCGNibFBpYyQzBQxjYmxQaWNLaW5kJDAFDGNibFBpY0tpbmQkMQUMY2JsUGljS2luZCQyBQxjYmxQaWNLaW5kJDMFDGNibFBpY0tpbmQkMwUKY2JsVmlkZW8kMAUKY2JsVmlkZW8kMQUKY2JsVmlkZW8kMgUKY2JsVmlkZW8kMwUKY2JsVmlkZW8kMwUMaW1nQnRuU3VibWl0BQxpbWdCdG5DYW5jbGUzgcuA+4V7gkvpf3QO5Zd66FFRMQ==,/wEPDwUJNzgzNDMwNTMzZGT4DI9jhwcGjbIzQJAyCccg/Xoh2g== Referer:http://localhost:53227/site_ma...] [HttpException(0x80004005):此页的状态信息无效，可能已损坏。] System.Web.UI.ViewStateException.ThrowError(Exceptioninner,StringpersistedState,StringerrorPageMessage,BooleanmacValidationError)+106 System.Web.UI.ViewStateException.ThrowViewStateError(Exceptioninner,StringpersistedState)+14 System.Web.UI.HiddenFieldPageStatePersister.Load()+217 System.Web.UI.Page.LoadPageStateFromPersistenceMedium()+105 System.Web.UI.Page.LoadAllState()+43 System.Web.UI.Page.Proce***equestMain(BooleanincludeStagesBeforeAsyncPoint,BooleanincludeStagesAfterAsyncPoint)+6785 System.Web.UI.Page.Proce***equest(BooleanincludeStagesBeforeAsyncPoint,BooleanincludeStagesAfterAsyncPoint)+242 System.Web.UI.Page.Proce***equest()+80 System.Web.UI.Page.Proce***equestWithNoAssert(HttpContextcontext)+21 System.Web.UI.Page.Proce***equest(HttpContextcontext)+49 ASP.site_mag_manage_editmanage_aspx.Proce***equest(HttpContextcontext)inc:\Windows\Microsoft.NET\Framework\v2.0.50727\TemporaryASP.NETFiles\root\bab5ae03\ea433214\App_Web_asfn-zfc.1.cs:0 System.Web.CallHandlerExecutionStep.System.Web.HttpApplication.IExecutionStep.Execute()+181 System.Web.HttpApplication.ExecuteStep(IExecutionStepstep,Boolean&completedSynchronously)+75 -------------------------------------------------------------------------------- 版本信息:Microsoft.NETFramework版本:2.0.50727.5448;ASP.NET版本:2.0.50727.5456

后来又发了很多时间去网上找解决方案。最后找到一个比较满意的。且决解问题的，方案如下：
通过上网查询,给出以下解决方案:

在该工程中的web.config中添加如下代码：

来源:http://www.cnblogs.com/ufo0303/archive/2008/04/10/1146026.html

但是,按照网上给出的方法并没有解决问题.

于是, 参见:http://blog.csdn.net/Yamzef/archive/2007/03/26/1541160.aspx.其中说:

如果你在回调前不加这两句的话__theFormPostData就会在原来的基础上再添加现有的网页状态post数据，这样可以说现在回调时你已包含了两份post数据，但回调时，服务器方仍然把它当作一份看待，结果服务器分析不出post数据，只给你返回了一个网页状态已损坏的消息

分析,可能是B页面,包含form表单才造成问题出现.于是删除B.aspx中的Form标签.问题解决.

于是我就将我ajax引用页面的form删掉。代码变成如下：

对比发现了什么不一样了吗？少了form以及下面的div。

这时你再尝试一下，发现就这样实现了添加新的管理员吧。