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


Posted in Javascript onDecember 08, 2015

本文实例讲述了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程序设计有所帮助。

Javascript 相关文章推荐
关于IE浏览器以及Firefox下的javascript冒泡事件的响应层级
Oct 14 Javascript
dwz 如何去掉ajaxloading具体代码
May 22 Javascript
jquery ajaxSubmit 异步提交的简单实现
Feb 28 Javascript
javascript设计模式之解释器模式详解
Jun 05 Javascript
解决ueditor jquery javascript 取值问题
Dec 30 Javascript
jQuery 实现评论等级好评差评特效
May 06 Javascript
JS阻止事件冒泡行为和闭包的方法
Jun 16 Javascript
基于BootStrap multiselect.js实现的下拉框联动效果
Jul 28 Javascript
jQuery实现百度图片移入移出内容提示框上下左右移动的效果
Jun 05 jQuery
深入浅析Vue中的Prop
Jun 10 Javascript
你应该了解的JavaScript Array.map()五种用途小结
Nov 14 Javascript
jQuery实现的鼠标拖动浮层功能示例【拖动div等任何标签】
Dec 29 jQuery
基于JavaScript创建动态Dom
Dec 08 #Javascript
jQuery实现form表单基于ajax无刷新提交方法详解
Dec 08 #Javascript
JS判断当前页面是否在微信浏览器打开的方法
Dec 08 #Javascript
js实现兼容IE、Firefox的图片缩放代码
Dec 08 #Javascript
JS实现按比例缩放图片的方法(附C#版代码)
Dec 08 #Javascript
JS获取文件大小方法小结
Dec 08 #Javascript
js+ajax实现获取文件大小的方法
Dec 08 #Javascript
You might like
自制汽车收音机天线:收听广播的技巧和方法
2021/03/02 无线电
经典的PHPer为什么被认为是草根?
2007/04/02 PHP
php错误提示failed to open stream: HTTP request failed!的完美解决方法
2011/06/06 PHP
使用PHP获取汉字的拼音(全部与首字母)
2013/06/27 PHP
浅谈web上存漏洞及原理分析、防范方法(安全文件上存方法)
2013/06/29 PHP
php检测iis环境是否支持htaccess的方法
2014/02/18 PHP
php提交表单发送邮件的方法
2015/03/20 PHP
CodeIgniter针对数据库的连接、配置及使用方法
2016/03/03 PHP
PHP使用PDO 连接与连接管理操作实例分析
2020/04/21 PHP
JavaScript 密码强度判断代码
2009/09/05 Javascript
Javascript 圆角div的实现代码
2009/10/15 Javascript
一个页面元素appendchild追加到另一个页面元素的问题
2013/01/27 Javascript
javascript获得网页窗口实际大小的示例代码
2013/09/21 Javascript
javascript删除字符串最后一个字符
2014/01/14 Javascript
Angular设置title信息解决SEO方面存在问题
2016/08/19 Javascript
JavaScript 详解预编译原理
2017/01/22 Javascript
利用imgareaselect辅助后台实现图片上传裁剪
2017/03/02 Javascript
JQuery 封装 Ajax 常用方法(推荐)
2017/05/21 jQuery
ExtJs整合Echarts的示例代码
2018/02/27 Javascript
vue中引入mxGraph的步骤详解
2019/05/17 Javascript
vue实现简单计算商品价格
2020/09/14 Javascript
[01:19:46]DOTA2-DPC中国联赛 正赛 SAG vs DLG BO3 第一场 2月28日
2021/03/11 DOTA
使用python获取CPU和内存信息的思路与实现(linux系统)
2014/01/03 Python
Python数据分析库pandas基本操作方法
2018/04/08 Python
提升python处理速度原理及方法实例
2019/12/25 Python
python中加背景音乐如何操作
2020/07/19 Python
Python爬虫逆向分析某云音乐加密参数的实例分析
2020/12/04 Python
HTML5应用之文件上传
2016/12/30 HTML / CSS
Myprotein比利时官方网站:欧洲第一运动营养品牌
2020/10/04 全球购物
中软Java笔试题
2012/11/11 面试题
几个数据库方面的面试题
2016/07/01 面试题
领导的自我鉴定
2013/12/28 职场文书
办公室打字员岗位职责
2014/04/16 职场文书
爱心捐款倡议书范文
2014/05/12 职场文书
欢迎家长标语
2014/10/08 职场文书
初中生300字旷课检讨书
2014/11/19 职场文书