AJAX学习笔记之制作自动校验的表单

最新推荐文章于 2023-06-25 21:47:44 发布

milk1626

最新推荐文章于 2023-06-25 21:47:44 发布

阅读量342

点赞数

分类专栏： AJAX 读书笔记文章标签： ajax xmlhttprequest function user input border

本文链接：https://blog.csdn.net/milk1626/article/details/5453452

版权

读书笔记同时被 2 个专栏收录

18 篇文章 0 订阅

订阅专栏

AJAX

13 篇文章 0 订阅

订阅专栏

多数注册页面,在注册时都需判断用户名是否存在，下面以该实例，实现异步判断：

9-9.html：

<!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">

</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() + "&timestamp=" + 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">
<table cellpadding="5" cellspacing="0" border="0">
<tr><td>用户名:</td><td><input type="text" οnblur="startCheck(this)" name="User"></td> <td><span id="UserResult"></span></td> </tr>
<tr><td>输入密码:</td><td><input type="password" name="passwd1"></td> <td></td> </tr>
    <tr><td>确认密码:</td><td><input type="password" name="passwd2"></td> <td></td> </tr>
<tr>
  <td colspan="2" align="center">
  <input type="submit" value="注册">
        <input type="reset" value="重置">
  </td> <td></td>
</tr>
</table>
</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");

if(Request["user"]=="isaac")
Response.Write("Sorry, " + Request["user"] + " already exists.");
else
Response.Write(Request["user"]+" is ok.");
%>

milk1626

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
AJAX学习笔记之制作自动校验的表单

多数注册页面,在注册时都需判断用户名是否存在，下面以该实例，实现异步判断：9-9.html：自动校验的表单form{ padding:0px; margin:0px; font-size:12px; font-family:Arial, Helvetica, sans-serif;}input{ border:1px solid #004082; font-size:12px; fo
复制链接

扫一扫