Ajax自动校验的表单
2010-09-08 00:17
246 查看
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>自动校验的表单</title>
<style type="text/css">
<!--
form{
padding:0px; margin:0px;
font-size:12px;
font-family:Arial, Helvetica, sans-serif;
}
input{
border:1px solid #004082;
font-size:12px;
font-family:Arial, Helvetica, sans-serif;
}
-->
</style>
<script language="javascript">
var xmlHttp;
////创建异步请求对象
function createXMLHttpRequest(){
if(window.ActiveXObject)
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
else if(window.XMLHttpRequest)
xmlHttp = new XMLHttpRequest();
}
//显示异步查询结果
function showResult(sText){
var oSpan = document.getElementById("UserResult");
oSpan.innerHTML = sText;
if(sText.indexOf("already exists") >= 0)
//如果用户名已被占用
oSpan.style.color = "red";
else
oSpan.style.color = "black";
}
function startCheck(oInput){
//首先判断是否有输入,没有输入直接返回,并提示
if(!oInput.value){
oInput.focus(); //聚焦到用户名的输入框
document.getElementById("UserResult").innerHTML = "User cannot be empty.";
return;
}
//创建异步请求
createXMLHttpRequest();
var sUrl = "9-9.aspx?user=" + oInput.value.toLowerCase() + "×tamp=" + new Date().getTime();
xmlHttp.open("GET",sUrl,true);
xmlHttp.onreadystatechange = function(){
if(xmlHttp.readyState == 4 && xmlHttp.status == 200)
showResult(xmlHttp.responseText); //显示服务器结果
}
xmlHttp.send(null);
}
</script>
</head>
<body>
<form name="register">
<!-- 利用文本框的onblur()函数,即当光标离开该文本框时调用相关的函数-->
用户名:<input type="text" onblur="startCheck(this)" name="User"><span id="UserResult"></span><br />
输入密码:<input type="password" name="passwd1"/><br />
确认密码:<input type="password" name="passwd2"/><br />
<input type="submit" value="注册"/>
<input type="reset" value="重置"/>
</form>
</body>
</html>
服务器端处理文件9-9.aspx,通常服务器接收到用户的输入后会查询数据库,检测该用户是否已经被注册,然后将查询结果返回给客户端。
<%@ Page Language="C#" ContentType="text/html" ResponseEncoding="gb2312" %>
<%@ Import Namespace="System.Data" %>
<%
Response.CacheControl = "no-cache";
Response.AddHeader("Pragma","no-cache");
//获得用户输入如果是isaac则代表已注册,把查询结果返回给客户端
if(Request["user"]=="isaac")
Response.Write("Sorry, " + Request["user"] + " already exists.");
else
Response.Write(Request["user"]+" is ok.");
%>
<html>
<head>
<title>自动校验的表单</title>
<style type="text/css">
<!--
form{
padding:0px; margin:0px;
font-size:12px;
font-family:Arial, Helvetica, sans-serif;
}
input{
border:1px solid #004082;
font-size:12px;
font-family:Arial, Helvetica, sans-serif;
}
-->
</style>
<script language="javascript">
var xmlHttp;
////创建异步请求对象
function createXMLHttpRequest(){
if(window.ActiveXObject)
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
else if(window.XMLHttpRequest)
xmlHttp = new XMLHttpRequest();
}
//显示异步查询结果
function showResult(sText){
var oSpan = document.getElementById("UserResult");
oSpan.innerHTML = sText;
if(sText.indexOf("already exists") >= 0)
//如果用户名已被占用
oSpan.style.color = "red";
else
oSpan.style.color = "black";
}
function startCheck(oInput){
//首先判断是否有输入,没有输入直接返回,并提示
if(!oInput.value){
oInput.focus(); //聚焦到用户名的输入框
document.getElementById("UserResult").innerHTML = "User cannot be empty.";
return;
}
//创建异步请求
createXMLHttpRequest();
var sUrl = "9-9.aspx?user=" + oInput.value.toLowerCase() + "×tamp=" + new Date().getTime();
xmlHttp.open("GET",sUrl,true);
xmlHttp.onreadystatechange = function(){
if(xmlHttp.readyState == 4 && xmlHttp.status == 200)
showResult(xmlHttp.responseText); //显示服务器结果
}
xmlHttp.send(null);
}
</script>
</head>
<body>
<form name="register">
<!-- 利用文本框的onblur()函数,即当光标离开该文本框时调用相关的函数-->
用户名:<input type="text" onblur="startCheck(this)" name="User"><span id="UserResult"></span><br />
输入密码:<input type="password" name="passwd1"/><br />
确认密码:<input type="password" name="passwd2"/><br />
<input type="submit" value="注册"/>
<input type="reset" value="重置"/>
</form>
</body>
</html>
服务器端处理文件9-9.aspx,通常服务器接收到用户的输入后会查询数据库,检测该用户是否已经被注册,然后将查询结果返回给客户端。
<%@ Page Language="C#" ContentType="text/html" ResponseEncoding="gb2312" %>
<%@ Import Namespace="System.Data" %>
<%
Response.CacheControl = "no-cache";
Response.AddHeader("Pragma","no-cache");
//获得用户输入如果是isaac则代表已注册,把查询结果返回给客户端
if(Request["user"]=="isaac")
Response.Write("Sorry, " + Request["user"] + " already exists.");
else
Response.Write(Request["user"]+" is ok.");
%>
相关文章推荐
- AJAX学习笔记之 制作自动校验的表单
- AJAX练习(一):制作可以自动校验的表单(从原理上分析ajax的作用)
- 零基础学习AJAX之制作自动校验的表单
- AJAX 学习笔记[八] AJAX 制作可自动校验的表单
- 浅析onsubmit校验表单时利用ajax的return false无效问题
- Ajax中通过JS代码自动获取表单元素值的示例代码
- Html表单的正则校验--将不符合指定正则表达式的字符串自动替换为空
- 使用Ajax自动填写表单
- onsubmit校验表单时利用ajax的return false 无效问题
- ajax提交表单时阻止表单自动提交
- easyui-validatebox form表单提交时校验 ajax提交时校验
- 浅析onsubmit校验表单时利用ajax的return false无效问题
- onsubmit校验表单时利用ajax的return false无效解决方法
- 【JAVAWEB学习笔记】28_jquery加强:json数据结构、jquery的ajax操作和表单校验插件
- jq和ajax进行表单校验,对于新增行ID重复问题的处理
- 使用JQuery和Ajax实现基本表单校验
- ajax自动提交表单数据,经php处理返回数据
- jQuery.ajaxSubmit异步提交表单并用jQuery.validate进行校验
- onsubmit校验表单时利用ajax的return false无效解决方法
- Ajax应用――自动补全表单字段(Google Instant)