如何利用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 < 2){ 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 == 4){ if(xhr.status == 200){ msg = xhr.responseText; if(msg == \'1\'){ 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 == 4){ if(xhr.status == 200){ var msg = xhr.responseText; if(msg == \'1\'){ 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 < 6){ 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 == 4){ if(xhr.status == 200){ msg = xhr.responseText; if(msg != \'1\'){ 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"; } }, 50); function noticeClear(id){ id.innerHTML = ""; id.style.background = ""; } }