首页 > Web开发 > 详细

利用js制作异步验证ajax方法()

时间:2016-01-09 15:05:13      阅读:134      评论:0      收藏:0      [点我收藏+]

技术分享

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

 

利用js制作异步验证ajax方法()

原文:http://www.cnblogs.com/xs-yqz/p/5116364.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!