如何利用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. <转>golang 并发性能数据

    1.管道chan吞吐极限10,000,000,单次Put,Get耗时大约100ns/op,无论是采用单Go程,还是多Go程并发(并发数:100, 10000, 100000),耗时均没有变化,Go内核 ...

  2. Python中安装numpy,scipy,matplotlib安装方法

    这个吧,说简单也简单,说难吧我捣鼓了两天才弄出来,真是头发都急白了.其实只要一个网址就搞定了,嘿嘿 http://www.lfd.uci.edu 这里面有你需要的任何东西,当你运行python imp ...

  3. JSON数据的基础使用

    之前一直把JSON想做一种数据类型,通过这几天的使用,发现其实JSON只是一种数据的格式,而与int string double等等数据类型是有本质的区别. JSON(JavaScript Objec ...

  4. leetcode 237 Delete Node in a Linked List python

    题目: Write a function to delete a node (except the tail) in a singly linked list, given only access t ...

  5. imgur.py

    #!/usr/bin/env python # -*- coding: utf-8 -*- from __future__ import with_statement import sys impor ...

  6. A/B的困扰

    在学会简单A+B后,在实验A/B时遇到了下面的问题. #include<stdio.h> #include<stdlib.h> int main() { int a,b; sc ...

  7. 恶补ASP.NET基础【1】枚举和结构

    有时我们希望变量提取的是一个固定集合中的值,此时就可以用枚举类型, 例: enum OpenMode : byte { 新增=, 编辑=, 查看= } class Program { static v ...

  8. 打造阅读Linux源代码利器

    打造阅读Linux源代码利器 在Linux里阅读/编写代码一般用vi 但是碰到较大的项目时阅读源代码还是比较费力,一直用find  和 grep命令. 其实,我们自己可以打造一个阅读源代码的vim,这 ...

  9. 定制化Azure站点Java运行环境(3)

    定制化Azure Website提供的默认的Tomcat和JDK环境 在我们之前的测试中,如果你访问你的WEB站点URL时不加任何上下文,实际上你看到的web界面是系统自带的测试页面index.jsp ...

  10. Thread 线程简单例子

    //这个方法是 静态的 public static void ThreadFunc() {//计数器 ; while(true) { //休眠1秒 Thread.Sleep(); //计数器递增 co ...