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