jQuery使用$.ajax进行即时验证实例详解
本文实例讲述了jQuery使用$.ajax进行即时验证的方法。分享给大家供大家参考,具体如下:
这里实现使用jQuery和一般处理程序即时验证用户录入的学号是否重复,当光标离开输入框即给出提示。
<%@PageLanguage="C#"AutoEventWireup="true"CodeFile="AddStudent.aspx.cs"Inherits="AddStudent"%> <!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> <styletype="text/css"> .clsShow { font-size:13px; border:solid1px#cc3300; padding:2px; display:none; margin-bottom:5px; background-color:#ffe0a3; } </style> <scripttype="text/javascript"src="Scripts/jquery-1.4.2.js"></script> <scripttype="text/javascript"> $(function(){ $("#btnSave").click(function(){ if($(".clsShow").html().toString()!="")//存在提示信息,则不允许提交表单 returnfalse; else returntrue; }); $("#txtNum").focus();//输入焦点 $("#txtNum").keydown(function(event){ if(event.which=="13"){//回车键,移动光标到密码框 $("#txtName").focus(); $("#txtNum").trigger("blur"); } }); $("#txtNum").blur(function(){ //获取学号 varstrTxtName=encodeURI($("#txtNum").val()); //开始发送数据 $.ajax ({//请求验证学号是否重复 url:"Check.ashx", type:"post", //传送请求数据 data:{txtNum:strTxtName}, success:function(strValue){//登录成功后返回的数据 //根据返回值进行状态显示 if(strValue=="True"){//注意是True,不是true $(".clsShow").css("display","inline"); $(".clsShow").html("学号已存在,请修改!"); } else{ $(".clsShow").hide();//就是把display属性变成none $(".clsShow").html(""); } } }) }) }) </script> </head> <body> <formid="form1"runat="server"> <div> 学号:<asp:TextBox ID="txtNum"runat="server"></asp:TextBox> <asp:RequiredFieldValidatorID="RequiredFieldValidator1"runat="server" ControlToValidate="txtNum"ErrorMessage="不能为空"></asp:RequiredFieldValidator> <divclass="clsShow"></div> <br/> 姓名:<asp:TextBoxID="txtName"runat="server"></asp:TextBox> <asp:RequiredFieldValidatorID="RequiredFieldValidator2"runat="server" ControlToValidate="txtName"ErrorMessage="不能为空"></asp:RequiredFieldValidator> <br/> 数学:<asp:TextBox ID="txtMath"runat="server"></asp:TextBox> <asp:RequiredFieldValidatorID="RequiredFieldValidator3"runat="server" ControlToValidate="txtMath"ErrorMessage="不能为空"></asp:RequiredFieldValidator> <asp:RangeValidatorID="RangeValidator1"runat="server" ControlToValidate="txtMath"ErrorMessage="分数在0-100之间"MaximumValue="100" MinimumValue="0"Type="Integer"></asp:RangeValidator> <br/> 英语:<asp:TextBoxID="txtEnglish"runat="server"></asp:TextBox> <asp:RequiredFieldValidatorID="RequiredFieldValidator4"runat="server" ControlToValidate="txtEnglish"ErrorMessage="不能为空"></asp:RequiredFieldValidator> <asp:RangeValidatorID="RangeValidator2"runat="server" ControlToValidate="txtEnglish"ErrorMessage="分数在0-100之间"MaximumValue="100" MinimumValue="0"Type="Integer"></asp:RangeValidator> <br/> 语文:<asp:TextBoxID="txtChinese"runat="server"></asp:TextBox> <asp:RequiredFieldValidatorID="RequiredFieldValidator5"runat="server" ControlToValidate="txtChinese"ErrorMessage="不能为空"></asp:RequiredFieldValidator> <asp:RangeValidatorID="RangeValidator3"runat="server" ControlToValidate="txtChinese"ErrorMessage="分数在0-100之间"MaximumValue="100" MinimumValue="0"Type="Integer"></asp:RangeValidator> <br/> <asp:ButtonID="btnSave"runat="server"Text="保存"onclick="btnSave_Click"/> <asp:ButtonID="btnBack"runat="server"Text="返回"CausesValidation="False" onclick="btnBack_Click"/> <asp:LabelID="lblMsg"runat="server"></asp:Label> </div> </form> </body> </html>
一般处理程序Check.ashx代码:
<%@WebHandlerLanguage="C#"class="Check"%> usingSystem; usingSystem.Web; publicclassCheck:IHttpHandler{ publicvoidProcessRequest(HttpContextcontext){ context.Response.ContentType="text/plain"; stringnum=context.Request["txtNum"].ToString(); boolresult=false; if(num=="12")//为了简化代码,没有访问数据库。实际项目应查询数据库。 { result=true; } context.Response.Write(result); } publicboolIsReusable{ get{ returnfalse; } } }
希望本文所述对大家jQuery程序设计有所帮助。