利用js制作异步验证ajax方法（）

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

 

转载于:https://www.cnblogs.com/xs-yqz/p/5116364.html