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 相关文章推荐
Windows Live的@live.com域名注册漏洞 利用代码
Dec 27 Javascript
Javascript异步编程的4种方法让你写出更出色的程序
Jan 17 Javascript
JavaScript获取FCK编辑器信息的具体方法
Jul 12 Javascript
Javascript基础教程之定义和调用函数
Jan 18 Javascript
深入浅出理解javaScript原型链
May 09 Javascript
轻松使用jQuery双向select控件Bootstrap Dual Listbox
Dec 13 Javascript
基于JavaScript实现动态创建表格和增加表格行数
Dec 20 Javascript
微信小程序 聊天室简单实现
Apr 19 Javascript
理解javascript async的用法
Aug 22 Javascript
JS运动特效之任意值添加运动的方法分析
Jan 24 Javascript
详解promise.then,process.nextTick, setTimeout 以及 setImmediate的执行顺序
Nov 21 Javascript
Windows下安装 node 的版本控制工具 nvm
Feb 06 Javascript
基于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
PHP计数器的实现代码
2013/06/08 PHP
php下获取http状态的实现代码
2014/05/09 PHP
详解php中 === 的使用
2016/10/24 PHP
PHP实现批量删除(封装)
2017/04/28 PHP
javascript支持firefox,ie7页面布局拖拽效果代码
2007/12/20 Javascript
jquery 屏蔽一个区域内的所有元素,禁止输入
2009/10/22 Javascript
Javascript JSQL,SQL无处不在,
2010/05/05 Javascript
jquery 日期分离成年月日的代码
2010/05/14 Javascript
JSON 和 JavaScript eval使用说明
2010/06/13 Javascript
jQuery实现的背景动态变化导航菜单效果
2015/08/24 Javascript
jquery实现的3D旋转木马特效代码分享
2015/08/25 Javascript
AngularJS 模块化详解及实例代码
2016/09/14 Javascript
微信小程序 http请求详细介绍
2016/10/09 Javascript
简单快速的实现js计算器功能
2017/08/17 Javascript
vue 实现类似淘宝星级评分的示例
2018/03/01 Javascript
JS高级技巧(简洁版)
2018/07/29 Javascript
在vue中实现点击选择框阻止弹出层消失的方法
2018/09/15 Javascript
axios使用拦截器统一处理所有的http请求的方法
2018/11/02 Javascript
js 实现ajax发送步骤过程详解
2019/07/25 Javascript
vue组件命名和props命名代码详解
2019/09/01 Javascript
浅谈python中列表、字符串、字典的常用操作
2017/09/19 Python
Django 迁移、操作数据库的方法
2019/08/02 Python
使用Django搭建一个基金模拟交易系统教程
2019/11/18 Python
Roots加拿大官网:加拿大休闲服饰品牌
2016/10/24 全球购物
松本清官方海外旗舰店:日本最大的药妆连锁店
2017/11/21 全球购物
家得宝墨西哥官网:The Home Depot墨西哥
2019/11/18 全球购物
应用英语专业自荐信
2014/01/26 职场文书
幼儿园大班开学教师寄语
2014/04/03 职场文书
创业女性典型材料
2014/05/02 职场文书
求职意向书
2014/07/29 职场文书
2014年公务员退休工资改革方案
2014/10/01 职场文书
学校总务处领导干部个人对照检查材料思想汇报
2014/10/06 职场文书
2014年保卫部工作总结
2014/11/21 职场文书
人才市场接收函
2015/01/30 职场文书
2015年环保局工作总结
2015/05/22 职场文书
pandas 操作 Excel操作总结
2021/03/31 Python