零基础学习AJAX之制作自动校验的表单
传统网页在注册时检测用户名是否被占用，传统的校验显然缓慢笨拙。
当ajax出现后，这种体验有了很大的改观，因为在用户填写表单时，签名的表单项已经发送给了服务器，然后根据用户填写好的内容进行数据查询。在查询号无需页面刷新就自动给了提示。类似这样的应用大大的提高了用户的体验，本节简单介绍自动校验表单制作方法。从原理上分析ajax的作用。
1.搭建框架
首先为html框架
<form name="register">
<p><label for = "User">输用户名<input type="text" name="User" id="User"></label><span id="UserResult"></span></p>
<p><label for = "passwd1">输入密码<input type="password" name="passwd1" id="passwd1"></label></p>
<p><label for = "passwd2">重复输入<input type="password" name="passwd2" id="passwd2"></label></p>
<p><input type="submit" value="注册"></p>
<p><input type="reset" value="重置"></p>
</form>
2.建立异步请求
当用户输完“用户名”开始输入别的表单时进行后台校验，代码如下：
输用户名<input type="text" name="User" id="User" onblur="startCheck(this)">
在函数startCheck()中，直接发送this关键字，将文本框对象自己作为参数传递，而函数本身则首先判断用户是否输入为空，如果为空，则直接返回，并聚焦用户名文本框，给出相应的提示。
function startCheck(oInput){
//判断是否有输入，没有输入则直接返回。
if(!oInput.value){
oInput.focus();//聚焦到用户名文本框
document.getElementById("User").innerHTML="用户名不能为空";
return;
}
//创建异步请求
//....
}
当用户输入用户名后，用toLowerCase()转化为小写字母，并建立异步请求。
其中showResult()函数用于显示服务器处理返回的responseText文本。
<script type="text/javascript">
var xmlHttp;
function createXMLHttprequest() {
if (window.ActiveXObject)
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
else if (window.XMLHttpRequest)
xmlHttp = new XMLHttpRequest();
}
function startCheck(oInput) {
//判断是否有输入，没有输入则直接返回。
if (!oInput.value) {
oInput.focus(); //聚焦到用户名文本框
document.getElementById("User").innerHTML = "用户名不能为空";
return;
}
//创建异步请求
createXMLHttpRequest();
var sUrl = "1-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>
3.服务器处理
<%@ 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.");
%>
4.显示异步查询的结果
在用户输入表单其它项目时，异步返回结果已经在后台悄悄完成。
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";
}
以上代码是对服务器返回结果的显示。
该案例的完整代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script type="text/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 = "用户名不能为空";
return;
}
//创建异步请求
createXMLHttpRequest();
var sUrl = "1-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>
<form name="register">
<p>
<label for="User">输用户名
<input type="text" name="User" id="User" onblur="startCheck(this)">
</label><span id="UserResult"></span>
</p>
<p>
<label for="passwd1">输入密码
<input type="password" name="passwd1" id="passwd1">
</label>
</p>
<p>
<label for="passwd2">重复输入
<input type="password" name="passwd2" id="passwd2">
</label>
</p>
<p>
<input type="submit" value="注册">
</p>
<p>
<input type="reset" value="重置">
</p>
</form>
</body>
</html>
相关推荐
-
JavaScript实现信用卡校验方法
本文实例讲述了JavaScript实现信用卡校验方法.分享给大家供大家参考.具体分析如下: 这里JavaScript版的信用卡校验代码,采用了Luhn算法 function isValidCreditCard(type, ccnum) { if (type == "Visa") { // Visa: length 16, prefix 4, dashes optional. var re = /^4\d{3}-?\d{4}-?\d{4}-?\d{4}$/; } else if (typ
-
PHP实现通过Luhn算法校验信用卡卡号是否有效
本文实例讲述了PHP实现通过Luhn算法校验信用卡卡号是否有效的方法.分享给大家供大家参考.具体实现方法如下: $numbers = "49927398716 49927398717 1234567812345678 1234567812345670"; foreach (split(' ', $numbers) as $n) echo "$n is ", luhnTest($n) ? 'valid' : 'not valid', '</br>'; fu
-
C++计算ICMP头的校验和实例
本文实例讲述了C++计算ICMP头的校验和的方法,分享给大家供大家参考.具体实现代码如下: 复制代码 代码如下: USHORT checksum(USHORT* buff, int nSize) { unsigned long cksum=0; //将数据以字为单位加到cksum while (nSize > 1) { cksum += *buff++; nSize -= sizeof(USHORT); }
-
python和shell实现的校验IP地址合法性脚本分享
一.python校验IP地址合法性 执行效果: python代码: 复制代码 代码如下: [root@yang python]# vi check_ip.py #!/usr/bin/python import os,sys def check_ip(ipaddr): import sys addr=ipaddr.strip().split('.') #切割IP地址为一个列表 #print addr if len(addr) !=
-
详细介绍C#之文件校验工具的开发及问题
.加密算法的熟悉 目前校验文件使用最多的是MD值和SHA值,不外乎有些使用CRC,前段时间微软发布了VisualStudio正式版,win镜像,微软官方给出的校验方式都是校验文件的SHA值. C#进行MD加密与SHA加密的实现总结在这里 .文件的加密计算 知道了如何进行普通字符串的加密还不够,我们要校验的文件的MD值或SHA值,接下来熟悉如何获取文件的MD值和SHA值 获取文件的MD值 public static string GetFileMD(string filePath)
-
微信公众平台消息接口校验与消息接口响应实例
本文实例讲述了微信公众平台消息接口校验与消息接口响应的方法.分享给大家供大家参考.具体分析如下: 开发微信公众平台消息接口过程中,我们首先需要验证消息接口的有效性,验证通过后,才可以进行其他开发,首先我们来看一下微信公众平台给我的 PHP SDK. 1.需要设置一个 TOKEN 信息,代码如下: 复制代码 代码如下: efine("TOKEN", "weixin"); 这个 TOKEN 信息可以由开发者自行设定. 2.有个 wechatCallbackapiTest
-
Codeigniter校验ip地址的方法
本文实例讲述了Codeigniter校验ip地址的方法.分享给大家供大家参考.具体分析如下: 这里演示了Codeigniter如何获取用户ip地址,同时校验ip地址的有效性 获取用户ip: $this->input->ip_address(); //如果ip获取失败,则返回 0.0.0.0,我们也可以使用下面的代码校验ip的有效性 $ip = "192.168.1.1"; if (!$this->input->valid_ip($ip)) { echo &quo
-
php校验表单检测字段是否为空的方法
本文实例讲述了php校验表单检测字段是否为空的方法.分享给大家供大家参考.具体如下: php校验表单,检测字段是否为空,当表单中有未填写的字段,则会显示错误信息. <html> <body> <form METHOD="POST" ACTION="ErrorCheck.php"> <h1>Contact Information</h1> <label>Nickname:</label>
-
Symfony数据校验方法实例分析
本文实例讲述了Symfony数据校验方法.分享给大家供大家参考.具体分析如下: 校验在web应用程序中是一个常见的任务.数据输入到表单需要被校验.数据在被写入数据库之前或者传入一个webservice时也需要被校验. Symfony2 配备了一个Validator 组件,它让校验工作变得简单易懂.该组件是基于JSR303 Bean校验规范.一个Java规范用在PHP中. 基本验证 理解校验的最好方法是看它的表现.首先,假设你已经创建了一个用于你应用程序某个地方的PHP对象. 复制代码 代码如下:
-
零基础学习AJAX之制作自动校验的表单
传统网页在注册时检测用户名是否被占用,传统的校验显然缓慢笨拙. 当ajax出现后,这种体验有了很大的改观,因为在用户填写表单时,签名的表单项已经发送给了服务器,然后根据用户填写好的内容进行数据查询.在查询号无需页面刷新就自动给了提示.类似这样的应用大大的提高了用户的体验,本节简单介绍自动校验表单制作方法.从原理上分析ajax的作用. 1.搭建框架 首先为html框架 复制代码 代码如下: <form name="register"> <p>
-
零基础学习AJAX之AJAX框架
上文(零基础学习AJAX之AJAX的简介和基础)对ajax异步请求服务器做了详细的介绍和基础应用,可以看出,ajax的一些过程是相对不变的.不必要每次发送请求都写一遍发送代码,一些ajax开发人员已经把他们的过程封装成ajax框架. 本节主要介绍ajaxLib和ajaxGold两款框架. 1.ajaxLib ajaxLib是一个非常小巧的ajax框架. 使用它首先将文件使用引入到页面中.改框架是一个直接获取XML的框架,调运函数如下: loadXMLDoc(url,callback,boolea
-
零基础学习AJAX之AJAX的简介和基础
本节简介(异步链接服务器对象)XMLHTTPRequest以及AJAX的简介. AJAX即"Asynchronous Javascript And XML"(异步JavaScript和XML). AJAX有四个方面的好处:1.即减轻了服务器的负担.2带来了更好的用户体验.3.基于标准被广泛的支持.4.拥有更好的页面呈现和数据分离. 技术名称 技术说明 javascript javascript是通用的脚本语言,AJAX是用javascript编写的 css 用户界面的样式通过css来修
-
零基础学习C/C++需要注意的地方
谈及C/C++,功能强大.应用广泛,一旦掌握了后,若是再自学其他语言就显得轻而易举了.那为什么学C/C++的人少呢?很多人认为C/C++虽然博大精深,但也难学.其实就本人认为C/C++并非是"difficult(困难)"的,只要你能理清思路,掌握它的精髓,配合一套教材.那么学C/C++是一件非常容易且又其乐无穷的事.今天本人就与大家一起谈谈如何学习C/C++或者说学习C/C++应从哪几方面着手. 先来说说C语言. 1.入门后多看代码 在有一定基础以后一定要多看别人的代码.注意代码中的算
-
零基础学习Python爬虫
目录 爬虫 为什么我们要使用爬虫 爬虫准备工作 爬虫项目讲解 代码分析 1.爬取网页 2.逐一解析数据 3.保存数据 讲解我们的爬虫之前,先概述关于爬虫的简单概念(毕竟是零基础教程) 爬虫 网络爬虫(又被称为网页蜘蛛,网络机器人)就是模拟浏览器发送网络请求,接收请求响应,一种按照一定的规则,自动地抓取互联网信息的程序. 原则上,只要是浏览器(客户端)能做的事情,爬虫都能够做. 为什么我们要使用爬虫 互联网大数据时代,给予我们的是生活的便利以及海量数据爆炸式的出现在网络中. 过去,我们通过书籍.报
-
学习LayUI时自研的表单参数校验框架案例分析
开发背景&痛点 : 每次写前端的表单的时候需要对表单里用户填写的内容进行校验,减少服务器压力,提前对已知错误对用户提示.每次会要写很多的if else等等对输入框中的内容进行判断,并对为空.格式不正确等情况作出对应提示. 需要写大量重复的if else语句,实在太麻烦,所以自己写了这个框架用于前端参数的校验. 本框架基于LayUI框架 对于三种开发者情况: 1.完全不会LayUI也没有任何关系 在html头部中添加如下代码就OK了 <script src="https://www.
-
Ajax带提示的验证表单实例
本文实例讲述了Ajax带提示的验证表单.分享给大家供大家参考.具体如下: 这是一个常用的Ajax表单验证程序,实时提示你输入的字符是否符合要求,简洁明快,便于修改,这是用JavaScript实现的,没有掺杂其它的框架类代码,因此比较实用. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-ajax-table-check-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.
-
纯javascript的ajax实现php异步提交表单的简单实例
很多时候需要异步提交表单,当表单太多是时候,一个个getElementById变得很不实际 当然,jquery可以实现异步提交表单,jquery.form.js这个库貌似也挺流行 只是有时候并不想使用额外的库,所以就琢磨着自己写,用纯js来实现异步提交表单 实现如下(本例用POST方式提交,用php作为服务器脚本) HTM L文件:test <html> <head> <script type="text/javascript" src="nam
-
Ajax和PHP正则表达式验证表单及验证码
模式匹配符: \:转义字符 例如:\b转义了b ^:正则表达式开始符号 $:正则表达式结束符号 *:匹配前面的字符出现0次或者n次 +:匹配前面的字符出现1次或者n次 ?:匹配前面的字符出现0次或者1次 .:匹配除了换行符以外的所有单个字符 |:或者的意思,例如x|y 匹配x或者y {n}:匹配前面的n个字符 {n,m}:匹配至少n个最多m个前面字符 [xyz]:匹配中括号里的任意一个字符 [^xyz]:匹配除了中括号里的任意一个字符等价于[0-9] \w:匹配任意一个数字或字母或下划线 等价于
-
AJAX PHP无刷新form表单提交的简单实现(推荐)
ajax.php: <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> </head> <script language="javascript"> function saveUserInfo() { //获取