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 相关文章推荐
JS提交form表单实例分析
Dec 10 Javascript
Bootstrap中的Dropdown下拉菜单更改为悬停(hover)触发
Aug 31 Javascript
vue实现todolist单页面应用
Apr 11 Javascript
JS组件系列之JS组件封装过程详解
Apr 28 Javascript
javascript 中iframe高度自适应(同域)实例详解
May 16 Javascript
微信小程序Redux绑定实例详解
Jun 07 Javascript
JS处理数据四舍五入(tofixed与round的区别详解)
Oct 26 Javascript
Node.js使用cookie保持登录的方法
May 11 Javascript
解决eclipse中没有js代码提示的问题
Oct 10 Javascript
vue组件之间数据传递的方法实例分析
Feb 12 Javascript
vue-cli4使用全局less文件中的变量配置操作
Oct 21 Javascript
react中的DOM操作实现
Jun 30 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
获取用户Ip地址通用方法与常见安全隐患(HTTP_X_FORWARDED_FOR)
2013/06/01 PHP
关于crontab的使用详解
2013/06/24 PHP
PHP提高编程效率的20个要点
2015/09/23 PHP
10个对初学者非常有用的PHP技巧
2016/04/06 PHP
thinkPHP5.0框架安装教程
2017/03/25 PHP
php curl获取到json对象并转成数组array的方法
2018/05/31 PHP
实例分析PHP将字符串转换成数字的方法
2019/01/27 PHP
jquery 批量上传图片实现代码
2010/01/28 Javascript
Jquery 扩展方法
2010/05/06 Javascript
在JavaScript中用getMinutes()方法返回指定的分时刻
2015/06/10 Javascript
AngularJS 与百度地图的结合实例
2016/10/20 Javascript
AngularJS辅助库browserTrigger用法示例
2016/11/03 Javascript
详解基于Vue+Koa的pm2配置
2017/10/24 Javascript
分享ES6的7个实用技巧
2018/01/18 Javascript
vue.js element-ui tree树形控件改iview的方法
2018/03/29 Javascript
ng-repeat指令在迭代对象时的去重方法
2018/10/02 Javascript
React 全自动数据表格组件——BodeGrid的实现思路
2019/06/12 Javascript
微信小程序点击滚动到指定位置的实现
2020/05/22 Javascript
Element Rate 评分的使用方法
2020/07/27 Javascript
[45:50]完美世界DOTA2联赛PWL S3 CPG vs Forest 第二场 12.16
2020/12/17 DOTA
[01:10:30]DOTA2-DPC中国联赛正赛 Dragon vs Dynasty BO3 第一场 3月4日
2021/03/11 DOTA
Python使用MD5加密字符串示例
2014/08/22 Python
Python变量和字符串详解
2017/04/29 Python
Python获取二维矩阵每列最大值的方法
2018/04/03 Python
python实现通过flask和前端进行数据收发
2019/08/22 Python
Python Django实现layui风格+django分页功能的例子
2019/08/29 Python
Python中BeautifuSoup库的用法使用详解
2019/11/15 Python
python+Selenium自动化测试——输入,点击操作
2020/03/06 Python
Python中bisect的用法及示例详解
2020/07/20 Python
HTML5实现可缩放时钟代码
2017/08/28 HTML / CSS
Quiksilver荷兰官方网站:冲浪和滑雪板
2019/11/16 全球购物
英国领先的隐形眼镜在线供应商:Lenstore.co.uk
2019/11/24 全球购物
《雕塑之美》教学反思
2014/04/24 职场文书
工程部经理岗位职责
2015/02/02 职场文书
公务员廉洁从政心得体会
2016/01/19 职场文书
经典《舰娘》游改全新动画预告 预定11月开播
2022/04/01 日漫