如何利用js写ajax异步验证。代码如下:

window.onload = function(){
var name = document.getElementById('register-name-text'),
email = document.getElementById('register-email-text'),
pwd = document.getElementById('register-pwd-text'),
repwd = document.getElementById('register-repwd-text'),
// id = document.getElementById('register-id-text'),
authcode = document.getElementById('register-authcode-text'),
submit = document.getElementById('register-submit'); var nameWarn = document.getElementById('name-warn'),
emailWarn = document.getElementById('email-warn'),
pwdWarn = document.getElementById('pwd-warn'),
repwdWarn = document.getElementById('repwd-warn'),
// idWarn = document.getElementById('id-warn'),
authcodeWarn = document.getElementById('authcode-warn'); var isName = false,
isEmail = false,
isPwd = false,
isRepwd = false,
// isId = false,
isAuthcode = false; name.focus(); var xhr = new XMLHttpRequest();
var msg = ''; name.oninput = function(){
if(name.value == ""){
noticeClear(nameWarn);
nameWarn.innerHTML = "用户名不能为空";
isName = false;
} else if(name.value.length < ){
noticeClear(nameWarn);
nameWarn.innerHTML = "用户名不能小于2位";
isName = false;
} else{
xhr.open('GET', '../AjaxRequest/nameCheck.php?name=' + name.value, true);
xhr.send();
xhr.onreadystatechange = function(){
if(xhr.readyState == ){
if(xhr.status == ){
msg = xhr.responseText;
if(msg == ''){
noticeClear(nameWarn);
nameWarn.innerHTML = "用户名已存在";
isName = false;
} else{
noticeClear(nameWarn);
nameWarn.style.background = "url(../images/check_right.gif) no-repeat 5px 5px";
isName = true;
}
}
}
}
}
} email.oninput = function(){
var emailType = /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z_-]+)+$/;
if(email.value == ""){
noticeClear(emailWarn);
emailWarn.innerHTML = "邮箱不能为空";
isEmail = false;
} else if(!email.value.match(emailType)){
noticeClear(emailWarn);
emailWarn.innerHTML = "邮箱格式错误";
isEmail = false;
} else {
xhr.open('GET', '../AjaxRequest/emailCheck.php?email=' + email.value, true);
xhr.send();
xhr.onreadystatechange = function(){
if(xhr.readyState == ){
if(xhr.status == ){
var msg = xhr.responseText;
if(msg == ''){
noticeClear(emailWarn);
emailWarn.innerHTML = "邮箱已被注册";
isEmail = false;
} else{
noticeClear(emailWarn);
emailWarn.style.background = "url(../images/check_right.gif) no-repeat 5px 5px";
isEmail = true;
}
}
}
}
}
} pwd.oninput = function(){
if(pwd.value == ""){
noticeClear(pwdWarn);
pwdWarn.innerHTML = "密码不能为空";
isPwd = false;
} else if(pwd.value.length < ){
noticeClear(pwdWarn);
pwdWarn.innerHTML = "密码不能小于6位";
isPwd = false;
} else {
noticeClear(pwdWarn);
pwdWarn.style.background = "url(../images/check_right.gif) no-repeat 5px 5px";
isPwd = true;
}
} repwd.oninput = function(){
if(repwd.value == ""){
noticeClear(repwdWarn);
repwdWarn.innerHTML = "";
isRepwd = false;
} else if (repwd.value != pwd.value){
noticeClear(repwdWarn);
repwdWarn.innerHTML = "密码输入不一致";
isRepwd = false;
} else {
noticeClear(repwdWarn);
repwdWarn.style.background = "url(../images/check_right.gif) no-repeat 5px 5px";
isRepwd = true;
}
} // id.oninput = function(){
// var reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
// if(id.value == ""){
// noticeClear(idWarn);
// idWarn.innerHTML = "身份证号不能为空";
// isId = false;
// } else if(!id.value.match(reg)){
// noticeClear(idWarn);
// idWarn.innerHTML = "身份证号格式错误";
// isId = false;
// } else {
// noticeClear(idWarn);
// idWarn.style.background = "url(../images/check_right.gif) no-repeat 5px 5px";
// isId = true;
// }
// } authcode.oninput = function(){
xhr.open('GET', '../AjaxRequest/captchaCheck.php?code=' + authcode.value, true);
xhr.send();
xhr.onreadystatechange = function(){
if(xhr.readyState == ){
if(xhr.status == ){
msg = xhr.responseText;
if(msg != ''){
noticeClear(authcodeWarn);
authcodeWarn.innerHTML = "验证码错误";
isAuthcode = false;
} else{
noticeClear(authcodeWarn);
authcodeWarn.style.background = "url(../images/check_right.gif) no-repeat 5px 5px";
isAuthcode = true;
}
}
}
}
} setInterval(function(){
if(!(isName && isEmail && isPwd && isRepwd && isAuthcode)){
submit.disabled = true;
submit.style.color = "#CCC";
} else {
submit.disabled = false;
submit.style.color = "#000";
}
}, ); function noticeClear(id){
id.innerHTML = "";
id.style.background = "";
}
}

利用js制作异步验证ajax方法()的更多相关文章

  1. 利用js制作html table分页示例(js实现分页)

    有时候table的列数太长,不利于使用者查询,所以利用JS做了一个table的分页,以下为相关代码 一.JS代码 <script type="text/javascript" ...

  2. 利用aiohttp制作异步爬虫

      asyncio可以实现单线程并发IO操作,是Python中常用的异步处理模块.关于asyncio模块的介绍,笔者会在后续的文章中加以介绍,本文将会讲述一个基于asyncio实现的HTTP框架--a ...

  3. 初学JS——利用JS制作的别踩白块儿(街机模式) 小游戏

    这个是上个星期5写的了,当时是突然想写个游戏,就想到了别踩白块儿,当时的想法是 可能普通模式的别踩白块儿因为他的“块儿”是滚动的向上这种,以我目前会的技术想不出怎么写, 但是如果是街机模式,通过你每按 ...

  4. 利用jQuery.validate异步验证用户名是否存在

    转:http://www.cnblogs.com/linzheng/archive/2010/10/14/1851781.html HTML头部引用: <script type="te ...

  5. 2017.11.9 如何利用JS做登陆验证界面

    ()案例----JavaScript实现输入验证 需要验证的表单输入域和要求 用户名不能为空,是否符合规定的格式 密码长度是否超过6,两次密码输入一致 邮箱地址:邮箱地址必须符合邮箱形式 ~~~注意提 ...

  6. 利用js获取客户端ip的方法

    1. 通过script标签引入url 比如如下代码: <script type="text/javascript" src="http://pv.sohu.com/ ...

  7. 利用JS制作简便计算器

    var d; var a=prompt("请输入数字"); a=parseInt(a); if(isNaN(a)){ alert("請輸入正確數字"); } e ...

  8. Ajax异步验证登陆或者注册

    首先介绍一个不错的学习Ajax的中文网站:http://www.w3school.com.cn/ajax/index.asp AJAX = 异步 JavaScript 和 XML.详细介绍见上面的网址 ...

  9. ajaxSetup和普通的ajax方法.

    我明明写了ajaxSetup()方法可是它有时候却不一定是会执行,因为比如我common.js里写的ajaxSetup()方法,然后index.js里写了ajax方法,可是有的时候ajaxSetup里 ...

随机推荐

  1. Lua编程入门-学习笔记2

    第6章 深入函数 函数是一种“第一类值(First-Class Value)”,他们具有特定的词法域(lexical scoping) 将表达式“function(x) <body> en ...

  2. OpenCV学习笔记(一)安装及运行第一个OpenCV程序

    1.下载及安装 OpenCV是一套开源免费的图形库,主要有C/C++语言编写,官网: http://opencv.org/ .在 http://opencv.org/downloads.html 可以 ...

  3. RMAN之一:快速入门

    1.数据导出基础 (1)创建datapump导出文件的目录对象并为相应用户授予权限. 出于安全考虑,不允许oracle用户直接在OS上进行文件的操作,而应通过directory对象指定. SQL> ...

  4. mysql 根据规定的数组进行排序

    最近在开发中遇到一个问题,我要根据一组商品的佣金进行排序和分页,可是佣金并不在商品表中,于是我就只能通过数组的操作把佣金计算出来,然后通过array_multisort()方法进行排序,可是无法做到分 ...

  5. 使用firefoxprofile,selenium设置firefox,初始化firefox

    1.什么是firefoxprofile 简单的来说就是个人定制,比如你设置自己访问主页,禁用加载图片这些个性化的设置,都可以保存到一个文件夹下,就是firefoxprofile,下次使用时候,加载该f ...

  6. SQL Server 对表的 12 种一般性操作

    01. 创建 create table Strings(ID int);    go 02. 为表添加列 alter table Strings    add String nvarchar(32); ...

  7. MEMS陀螺仪(gyroscope)的结构

    MEMS陀螺仪(gyroscope)的设计和工作原理可能各种各样,但是公开的MEMS陀螺仪均采用振动物体传感角速度的概念.利用振动来诱导和探测科里奥利力而设计的MEMS陀螺仪没有旋转部件.不需要轴承, ...

  8. 进程退出前删除自身EXE

    进程退出前删除自身EXE 下面的代码由Gary Nebbett写就.Gary Nebbett乃是WINDOWS NT/2000 NATIVE API REFERENCE的作者.乃NT系统一等一的高手. ...

  9. bzoj3299 [USACO2011 Open]Corn Maze玉米迷宫

    Description 今年秋天,约翰带着奶牛们去玩玉米迷宫.迷宫可分成NxM个格子,有些格子种了玉 米,种宥玉米的格子无法通行.  迷宫的四条边界上都是种了玉米的格子,其屮只有一个格子 没种,那就是 ...

  10. (译)"usermod"命令使用完全指导---15个练习例程截图

    "usermod"命令使用完全指导---15个练习例程截图 By Babin Lonston Under: Linux Commands On: November 11, 2014 ...