jQuery使用$.ajax进行即时验证的方法

首页 > 网络编程 > > > jquery 更新日期： 2015-08-05

这篇文章主要介绍了jQuery使用$.ajax进行即时验证的方法,较为详细的分析了jQuery基于ajax实现前台验证与后台数据交互的相关技巧,非常简单实用,需要的朋友可以参考下

本文实例讲述了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 runat="server"> <div> 学号:<asp:TextBox runat="server"></asp:TextBox> <asp:RequiredFieldValidator runat="server" ControlToValidate="txtNum" ErrorMessage="不能为空"></asp:RequiredFieldValidator> <div></div> <br /> 姓名:<asp:TextBox runat="server"></asp:TextBox> <asp:RequiredFieldValidator runat="server" ControlToValidate="txtName" ErrorMessage="不能为空"></asp:RequiredFieldValidator> <br /> 数学:<asp:TextBox runat="server"></asp:TextBox> <asp:RequiredFieldValidator runat="server" ControlToValidate="txtMath" ErrorMessage="不能为空"></asp:RequiredFieldValidator> <asp:RangeValidator runat="server" ControlToValidate="txtMath" ErrorMessage="分数在0-100之间" MaximumValue="100" MinimumValue="0" Type="Integer"></asp:RangeValidator> <br /> 英语:<asp:TextBox runat="server"></asp:TextBox> <asp:RequiredFieldValidator runat="server" ControlToValidate="txtEnglish" ErrorMessage="不能为空"></asp:RequiredFieldValidator> <asp:RangeValidator runat="server" ControlToValidate="txtEnglish" ErrorMessage="分数在0-100之间" MaximumValue="100" MinimumValue="0" Type="Integer"></asp:RangeValidator> <br /> 语文:<asp:TextBox runat="server"></asp:TextBox> <asp:RequiredFieldValidator runat="server" ControlToValidate="txtChinese" ErrorMessage="不能为空"></asp:RequiredFieldValidator> <asp:RangeValidator runat="server" ControlToValidate="txtChinese" ErrorMessage="分数在0-100之间" MaximumValue="100" MinimumValue="0" Type="Integer"></asp:RangeValidator> <br /> <asp:Button runat="server" Text="保存" /> <asp:Button runat="server" Text="返回" CausesValidation="False" /> <asp:Label runat="server"></asp:Label> </div> </form> </body> </html>

一般处理程序Check.ashx代码：

<%@ WebHandler Language="C#" %> 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程序设计有所帮助。

> 本站内容系网友提交或本网编辑转载，其目的在于传递更多信息，并不代表本网赞同其观点和对其真实性负责。如涉及作品内容、版权和其它问题，请及时与本网联系，我们将在第一时间删除内容！

jQuery中ajax的load()与post()方法实例详解

这篇文章主要介绍了jQuery中ajax的load与post方法,结合实例详细分析了jQuery中load与post方法实现ajax交互的相关技巧与注意事项,需要的朋友可以参考下本文实例讲述了jQuery中ajax的load()与post()方法.分享给大家供大家参考,具体如下: 一.load()方法在jQuery ajax的load()方法能够载入远程 ...

jQuery实现ajax调用WCF服务的方法(附带demo下载)

jQuery使用$.ajax进行即时验证的方法 / bnee.net