jQuery使用$.ajax進(jìn)行即時(shí)驗(yàn)證實(shí)例詳解
本文實(shí)例講述了jQuery使用$.ajax進(jìn)行即時(shí)驗(yàn)證的方法。分享給大家供大家參考,具體如下:
這里實(shí)現(xiàn)使用jQuery和一般處理程序即時(shí)驗(yàn)證用戶錄入的學(xué)號(hào)是否重復(fù),當(dāng)光標(biāo)離開(kāi)輸入框即給出提示。
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="AddStudent.aspx.cs" Inherits="AddStudent" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> <style type="text/css"> .clsShow { font-size: 13px; border: solid 1px #cc3300; padding: 2px; display: none; margin-bottom: 5px; background-color: #ffe0a3; } </style> <script type="text/javascript" src="Scripts/jquery-1.4.2.js"></script> <script type="text/javascript"> $(function () { $("#btnSave").click(function () { if ($(".clsShow").html().toString() != "")//存在提示信息,則不允許提交表單 return false; else return true; }); $("#txtNum").focus(); //輸入焦點(diǎn) $("#txtNum").keydown(function (event) { if (event.which == "13") {//回車(chē)鍵,移動(dòng)光標(biāo)到密碼框 $("#txtName").focus(); $("#txtNum").trigger("blur"); } }); $("#txtNum").blur(function () { //獲取學(xué)號(hào) var strTxtName = encodeURI($("#txtNum").val()); //開(kāi)始發(fā)送數(shù)據(jù) $.ajax ({ //請(qǐng)求驗(yàn)證學(xué)號(hào)是否重復(fù) url: "Check.ashx", type: "post", //傳送請(qǐng)求數(shù)據(jù) data: { txtNum: strTxtName }, success: function (strValue) { //登錄成功后返回的數(shù)據(jù) //根據(jù)返回值進(jìn)行狀態(tài)顯示 if (strValue == "True") {//注意是True,不是true $(".clsShow").css("display", "inline"); $(".clsShow").html("學(xué)號(hào)已存在,請(qǐng)修改!"); } else { $(".clsShow").hide(); //就是把display屬性變成none $(".clsShow").html(""); } } }) }) }) </script> </head> <body> <form id="form1" runat="server"> <div> 學(xué)號(hào):<asp:TextBox ID="txtNum" runat="server"></asp:TextBox> <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ControlToValidate="txtNum" ErrorMessage="不能為空"></asp:RequiredFieldValidator> <div class="clsShow"></div> <br /> 姓名:<asp:TextBox ID="txtName" runat="server"></asp:TextBox> <asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server" ControlToValidate="txtName" ErrorMessage="不能為空"></asp:RequiredFieldValidator> <br /> 數(shù)學(xué):<asp:TextBox ID="txtMath" runat="server"></asp:TextBox> <asp:RequiredFieldValidator ID="RequiredFieldValidator3" runat="server" ControlToValidate="txtMath" ErrorMessage="不能為空"></asp:RequiredFieldValidator> <asp:RangeValidator ID="RangeValidator1" runat="server" ControlToValidate="txtMath" ErrorMessage="分?jǐn)?shù)在0-100之間" MaximumValue="100" MinimumValue="0" Type="Integer"></asp:RangeValidator> <br /> 英語(yǔ):<asp:TextBox ID="txtEnglish" runat="server"></asp:TextBox> <asp:RequiredFieldValidator ID="RequiredFieldValidator4" runat="server" ControlToValidate="txtEnglish" ErrorMessage="不能為空"></asp:RequiredFieldValidator> <asp:RangeValidator ID="RangeValidator2" runat="server" ControlToValidate="txtEnglish" ErrorMessage="分?jǐn)?shù)在0-100之間" MaximumValue="100" MinimumValue="0" Type="Integer"></asp:RangeValidator> <br /> 語(yǔ)文:<asp:TextBox ID="txtChinese" runat="server"></asp:TextBox> <asp:RequiredFieldValidator ID="RequiredFieldValidator5" runat="server" ControlToValidate="txtChinese" ErrorMessage="不能為空"></asp:RequiredFieldValidator> <asp:RangeValidator ID="RangeValidator3" runat="server" ControlToValidate="txtChinese" ErrorMessage="分?jǐn)?shù)在0-100之間" MaximumValue="100" MinimumValue="0" Type="Integer"></asp:RangeValidator> <br /> <asp:Button ID="btnSave" runat="server" Text="保存" onclick="btnSave_Click" /> <asp:Button ID="btnBack" runat="server" Text="返回" CausesValidation="False" onclick="btnBack_Click" /> <asp:Label ID="lblMsg" runat="server"></asp:Label> </div> </form> </body> </html>
一般處理程序Check.ashx代碼:
<%@ WebHandler Language="C#" class="Check" %> using System; using System.Web; public class Check : IHttpHandler { public void ProcessRequest (HttpContext context) { context.Response.ContentType = "text/plain"; string num = context.Request["txtNum"].ToString(); bool result = false; if(num=="12")//為了簡(jiǎn)化代碼,沒(méi)有訪問(wèn)數(shù)據(jù)庫(kù)。實(shí)際項(xiàng)目應(yīng)查詢數(shù)據(jù)庫(kù)。 { result = true; } context.Response.Write(result); } public bool IsReusable { get { return false; } } }
希望本文所述對(duì)大家jQuery程序設(shè)計(jì)有所幫助。
- jQuery Ajax 實(shí)例詳解 ($.ajax、$.post、$.get)
- JQuery.Ajax()的data參數(shù)類(lèi)型實(shí)例詳解
- jquery+ajax實(shí)現(xiàn)注冊(cè)實(shí)時(shí)驗(yàn)證實(shí)例詳解
- 實(shí)例詳解jQuery Mockjax 插件模擬 Ajax 請(qǐng)求
- 輕量級(jí)asp.net ajax解決方案詳解
- 詳解JavaScript for循環(huán)中發(fā)送AJAX請(qǐng)求問(wèn)題
- PHP+Ajax實(shí)現(xiàn)無(wú)刷新分頁(yè)實(shí)例詳解(附demo源碼下載)
- 詳解原生JavaScript實(shí)現(xiàn)jQuery中AJAX處理的方法
- jquery ajax局部加載方法詳解(實(shí)現(xiàn)代碼)
- Ajax基礎(chǔ)詳解教程(一)
- Ajax基礎(chǔ)詳解教程(二)
相關(guān)文章
實(shí)例講解jQuery中對(duì)事件的命名空間的運(yùn)用
jQuery支持帶命名空間的事件,這樣就可以方便地對(duì)同一事件使用不同的監(jiān)聽(tīng)器并進(jìn)行管理,接下來(lái)我們就以實(shí)例講解jQuery中對(duì)事件的命名空間的運(yùn)用2016-05-05jQuery中add實(shí)現(xiàn)同時(shí)選擇兩個(gè)id對(duì)象
jquery同時(shí)選擇兩個(gè)id對(duì)象的時(shí)候,可以用add來(lái)實(shí)現(xiàn)。2010-10-10JQueryMiniUI按照時(shí)間進(jìn)行查詢的實(shí)現(xiàn)方法
下面小編就為大家?guī)?lái)一篇JQueryMiniUI按照時(shí)間進(jìn)行查詢的實(shí)現(xiàn)方法。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-06-06jQuery中$.each()函數(shù)的用法引申實(shí)例
jQuery中的$.each()函數(shù)比f(wàn)orEach更加強(qiáng)大,可以用來(lái)遍歷JavaScript中的任意集合,借來(lái)下來(lái)我們會(huì)舉幾個(gè)jQuery中$.each()函數(shù)的用法引申實(shí)例,首先先來(lái)回顧一下遍歷用法的基礎(chǔ):2016-05-05關(guān)于setInterval、setTimeout在jQuery中的使用注意事項(xiàng)
最近碰到個(gè)問(wèn)題,在使用jquery寫(xiě)定時(shí)器時(shí),總是會(huì)出現(xiàn)fn不存在的錯(cuò)誤提示2011-09-09