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 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程序设计有所帮助。
相关推荐
-
jquery+ajax验证不通过也提交表单问题处理
validationEngine给我们为前端的表单验证减少了很大的工作量.大部分情况我们使用validationEngine验证表单的形式有几种方式: 1 使用正常的表单提交.这种情况validationEngine验证不通过是不会提交表单的. 2 使用ajax提交表单,但是没有使用ajax验证. 这种方式也比较简单,在我们使用ajax请求前检查验证是否通过就可以,例如: 复制代码 代码如下: //验证不通过时return if(!$("form#ajaxForm").val
-
jquery formValidator插件ajax验证 内容不做任何修改再离开提示错误的bug解决方法
query formValidator插件非常好用,但是有一个严重的Bug,在使用ajax验证的时候,如果输入框的内容已经存在,把鼠标放到输入框,不做任何修改再离开,则会提示错误, 这是这个插件犯的一个很愚蠢的错误 复制代码 代码如下: oneIsValid: function(id, index) { var returnObj = new Object(); returnObj.id = id; returnObj.ajax = -1; returnObj.errormsg = ""
-
jquery+ajax实现注册实时验证实例详解
本文实例讲述了jquery+ajax实现注册实时验证.分享给大家供大家参考,具体如下: 当我们注册一个用户时,会实时提示该用户的信息是否可用,这就是ajax的应用,很久以前就看过这个实现了,今天又看了一遍,给记录下来O(∩_∩)O哈! 先介绍下ajax中$.get,由于$.post用法和$.get大同小异就不再介绍了: 这是一个简单的 GET 请求功能以取代复杂 $.ajax .请求成功时可调用回调函数.如果需要在出错时执行函数,请使用 $.ajax. 复制代码 代码如下: $(selector
-
jquery validate和jquery form 插件组合实现验证表单后AJAX提交
要实现表单验证和无刷新提交表单我们可以使用jQuery的两个很好用的插件--jquery validate.js 和 jquery form.js.具体详细说明情况下文. 1.jQuery validate.js,它说白了就是一个很高尚的人为我们写好了各种表单的验证,不用我们这些童鞋去现写了,一天天的多累啊,呵呵. 2.jQuery form.js,"这个插件能够让你简洁的将以HTML形式提交的表单升级成采用AJAX技术提交的表单. 插件里面主要的方法, ajaxForm 和 ajaxSubmi
-
S2SH整合JQuery+Ajax实现登录验证功能实现代码
不多说了,上码 action 复制代码 代码如下: package com.lk.action; import javax.annotation.Resource; import com.googlecode.jsonplugin.annotations.JSON; import com.lk.service.StudentControl; import com.opensymphony.xwork2.ActionSupport; public class LoginAjaxAction ext
-
ajax jquery 异步表单验证示例代码
文件目录: html代码: 复制代码 代码如下: <html> <head> <title>异步表单验证</title> <script type='text/javascript' src='jquery.js' ></script> <script> function checkname(){ //$("input[name='name']").val() $.ajax({ type:"
-
jQury Ajax使用Token验证身份实例代码
因为最近做了几个后台,所以经常会涉及到Token验证身份操作后台,所以这里记录一个如何向后台传请求头和Token. success:function(dat){ console.log(dat); if(dat.code==1){ sessionStorage.setItem('token',dat.data.access_token); //这里设置缓存存储Token sessionStorage.setItem('user',userName); location.href = "index
-
jQuery+AJAX实现遮罩层登录验证界面（附源码）
JQuery遮罩层登录界面效果的实现,AJAX实现登录验证,文章尾有完整示例源码下载,欢迎大家学习研究. 操作系统:Windwos7 Ultimate 开发工具:Visual Studio 2010 数据库:Sql Server 2005 测试浏览器:IE8.FF3.6.8.Google Chrome (IE8中弹出登录层后会出现竖拉条,其他两种没有出现,那个竖拉条可以在JS中通过修改数值让其不出现,但是下面会出现白边,越来越觉得IE有点那个了......) 1.预览 1)登录前 2)点击登录显
-
jQuery使用$.ajax进行即时验证的方法
本文实例讲述了jQuery使用$.ajax进行即时验证的方法.分享给大家供大家参考,具体如下: 使用jQuery和一般处理程序即时验证用户录入的学号是否重复,当光标离开输入框即给出提示. <%@ Page Language="C#" AutoEventWireup="true" CodeFile="AddStudent.aspx.cs" Inherits="AddStudent" %> <!DOCTYPE h
-
jQuery使用$.ajax进行即时验证实例详解
本文实例讲述了jQuery使用$.ajax进行即时验证的方法.分享给大家供大家参考,具体如下: 这里实现使用jQuery和一般处理程序即时验证用户录入的学号是否重复,当光标离开输入框即给出提示. <%@ Page Language="C#" AutoEventWireup="true" CodeFile="AddStudent.aspx.cs" Inherits="AddStudent" %> <!DOCTY
-
jQuery中ajax的load()与post()方法实例详解
本文实例讲述了jQuery中ajax的load()与post()方法.分享给大家供大家参考,具体如下: 一.load()方法 在jQuery ajax的load()方法能够载入远程 HTML 文件代码并插入至 DOM 中,这个与post,get还是有一点的区别,但可以快速在页面加载时就加载一个页面的html保存到dom中并且可执行哦. load()方法默认使用 GET 方式, 如果传递了data参数则使用Post方式. 传递附加参数时自动转换为 POST 方式.jQuery 1.2 中,可以指定
-
jquery实现用户信息修改验证输入方法汇总
本文实例讲述了jquery实现用户信息修改验证输入方法.分享给大家供大家参考.具体如下: var realnameFlag = 0; var addressFlag = 0; var zipFlag=0; var cellphoneFlag=0; var homephoneFlag=0; var oldpasswordFlag=1; var newpasswordFlag=1; //判断email function check_email() { $("#showSpan").hide
-
JQuery实现Ajax加载图片的方法
本文实例讲述了JQuery实现Ajax加载图片的方法.分享给大家供大家参考,具体如下: 最近在学习JQuery,想从原理上模拟一下无刷新的相册浏览. 最先想到的思路是利用缓存,也就是先显示提示消息,然后get图片,在get完的时候回调,将img标签的src改掉,由于刚刚get过,有了缓存,所以图片会立刻显示出来. 页面元素: <input class="picbtn" type="button" value="Next" /> <
-
jQuery实现ajax调用WCF服务的方法(附带demo下载)
本文实例讲述了jQuery实现ajax调用WCF服务的方法.分享给大家供大家参考,具体如下: 关于AJAX调用WCF服务分为跨域和不跨域两种方式,今天咱们先介绍下不跨域下的调用方法.DEMO是在VS2008写的. 经过测试与研究,发现AJAX调用WCF服务必须满足以下条件 1.wcf的通讯方式必须使用webHttpBinding 2.必须设置<endpointBehaviors>节点的值 3.服务的实现必须添加标记 复制代码 代码如下: [AspNetCompatibilityRequirem
-
jQuery+ThinkPHP+Ajax实现即时消息提醒功能实例代码
心血来潮想为自己的小项目做一个提醒系统,譬如私信,评论等消息都能及时传递过来.由于道行尚浅,网上那些长轮询对于我略微复杂,于是觉得还是自己写一写试试比较好. 我的思路是,单独在数据库中建一个提醒表,表主要由接收者的id和消息类型两个字段组成 /* 前台提醒表 */ CREATE TABLE IF NOT EXISTS notification( id INT NOT NULL AUTO_INCREMENT PRIMARY KEY, -- 主键自增 mid INT NOT NULL DEFAULT
-
Spring MVC+ajax进行信息验证的方法
本文是一个ajax结合Spring MVC使用的入门,首先我们来了解一下什么是Ajax AJAX 不是新的编程语言,而是一种使用现有标准的新方法.AJAX 最大的优点是在不重新加载整个页面的情况下,可以与服务器交换数据并更新部分网页内容.所以ajax对于提升用户体验十分重要 XMLHttpRequest 是 AJAX 的基础. 主要的方法有两种: var xmlhttp=new XMLHttpRequest(); xmlhttp.open(method,url,async) xmlhttp.se
-
jQuery的Ajax接收java返回数据方法
1.前端Ajax请求如下: $.ajax({ type : "post", //async:false, url : PATH + "/product/selectPicture.action", dataType : "json", success : function(data) { $.each(data,function(k,v){ alert(k +":"+ v); }); } }); 2 其中PATH在jsp页面中
-
Asp中使用JQuery的AJAX提交中文乱码解决方法
客户端页:client.html 复制代码 代码如下: <script> //jquery的post $.post ( 'server.asp', { Act:'DoSubmit', UserName:escape('我们'),//进行编码 WebSite:'www.jb51.net' }, function(data)