如何利用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 = ""; } }