jQuery使用$.ajax进行即时验证实例详解


Posted in Javascript onDecember 11, 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 相关文章推荐
JavaScript利用构造函数和原型的方式模拟C#类的功能
Mar 06 Javascript
JavaScript 封装一个tab效果源码分享
Sep 15 Javascript
javascript正则表达式定义(语法)总结
Jan 08 Javascript
Javascript将数值转换为金额格式(分隔千分位和自动增加小数点)
Jun 22 Javascript
jquery实现点击页面回到顶部
Nov 23 Javascript
JS限定手机版中图片大小随分辨率自动调整的方法
Dec 05 Javascript
javaScript字符串工具类StringUtils详解
Dec 08 Javascript
微信小程序搭建(mpvue+mpvue-weui+fly.js)的详细步骤
Sep 18 Javascript
使用微信小程序开发弹出框应用实例详解
Oct 18 Javascript
IntelliJ IDEA编辑器配置vue高亮显示
Sep 26 Javascript
使用jQuery实现购物车
Oct 29 jQuery
原生Javascript+HTML5一步步实现拖拽排序
Jun 12 Javascript
JavaScript基础篇(6)之函数表达式闭包
Dec 11 #Javascript
jQuery弹簧插件编写基础之“又见弹窗”
Dec 11 #Javascript
jQuery点击改变class并toggle及toggleClass()方法定义用法
Dec 11 #Javascript
Express实现前端后端通信上传图片之存储数据库(mysql)傻瓜式教程(二)
Dec 10 #Javascript
Express的路由详解
Dec 10 #Javascript
在 Express 中使用模板引擎
Dec 10 #Javascript
Express实现前端后端通信上传图片之存储数据库(mysql)傻瓜式教程(一)
Dec 10 #Javascript
You might like
php中数组首字符过滤功能代码
2012/07/31 PHP
windwos下使用php连接oracle数据库的过程分享
2014/05/26 PHP
PHP汉字转换拼音的函数代码
2015/12/30 PHP
Mac版PhpStorm之XAMPP整合apache服务器配置的图文教程详解
2016/10/13 PHP
PHP基于堆栈实现的高级计算器功能示例
2017/09/15 PHP
php实现socket推送技术的示例
2017/12/20 PHP
自制轻量级仿jQuery.boxy对话框插件代码
2010/10/26 Javascript
再谈javascript图片预加载技术(详细演示)
2011/03/12 Javascript
jQuery.Validate验证库的使用介绍
2013/04/26 Javascript
js 获取、清空input type=&quot;file&quot;的值(示例代码)
2013/12/24 Javascript
JavaScript常用的弹出广告及背投广告实现方法
2015/02/06 Javascript
微信小程序实现星级评分和展示
2018/07/05 Javascript
微信小程序实现打卡日历功能
2020/09/21 Javascript
Node.js HTTP服务器中的文件、图片上传的方法
2019/09/23 Javascript
Angular封装表单控件及思想总结
2019/12/11 Javascript
js实现简单选项卡制作
2020/08/05 Javascript
[01:26]DOTA2荣耀之路2:iG,China
2018/05/24 DOTA
python实现mysql的单引号字符串过滤方法
2015/11/14 Python
Python使用Turtle模块绘制五星红旗代码示例
2017/12/11 Python
python高阶爬虫实战分析
2018/07/29 Python
在python3中pyqt5和mayavi不兼容问题的解决方法
2019/01/08 Python
python在openstreetmap地图上绘制路线图的实现
2019/07/11 Python
Python实现名片管理系统
2020/02/14 Python
python根据完整路径获得盘名/路径名/文件名/文件扩展名的方法
2020/04/22 Python
python 爬取B站原视频的实例代码
2020/09/09 Python
Canvas环形饼图与手势控制的实现代码
2019/11/08 HTML / CSS
俄罗斯在线水暖商店:Perfecto.ru
2019/10/25 全球购物
幼儿园母亲节活动方案
2014/03/10 职场文书
奶茶店创业计划书
2014/08/14 职场文书
冰峪沟导游词
2015/02/09 职场文书
2015年小学生自我评价范文
2015/03/03 职场文书
信仰纪录片观后感
2015/06/08 职场文书
机关单位2016年创先争优活动总结
2016/04/05 职场文书
2019年冬至:天冷暖人心的问候祝福语大全
2019/12/20 职场文书
实体类或对象序列化时,忽略为空属性的操作
2021/06/30 Java/Android
数据库之SQL技巧整理案例
2021/07/07 SQL Server