本文實例講述了jQuery使用$.ajax進行即時驗證的方法。分享給大家供大家參考，具體如下：
這里實現使用jQuery和一般處理程序即時驗證用戶錄入的學號是否重復，當光標離開輸入框即給出提示。
<%@ 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(); //輸入焦點 $("#txtNum").keydown(function (event) { if (event.which == "13") {//回車鍵,移動光標到密碼框 $("#txtName").focus(); $("#txtNum").trigger("blur"); } }); $("#txtNum").blur(function () { //獲取學號 var strTxtName = 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> <form id="form1" runat="server"> <div> 學號:<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 /> 數學:<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="分數在0-100之間" MaximumValue="100" MinimumValue="0" Type="Integer"></asp:RangeValidator> <br /> 英語:<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="分數在0-100之間" MaximumValue="100" MinimumValue="0" Type="Integer"></asp:RangeValidator> <br /> 語文:<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="分數在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")//為了簡化代碼，沒有訪問數據庫。實際項目應查詢數據庫。 { result = true; } context.Response.Write(result); } public bool IsReusable { get { return false; } }}希望本文所述對大家jQuery程序設計有所幫助。
新聞熱點
疑難解答
