zoukankan      html  css  js  c++  java
  • 利用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 = "";
        }
    }
  • 相关阅读:
    mac下卸载mysql
    mac安装MySQL笔记
    mac安装python3.7.0
    web自动化测试之8大元素定位方法
    postman的下载和使用
    说说性能测试
    jmeter动态修改线程组参数
    服务器性能监控
    性能测试分配堆内存
    nmon分析工具的使用
  • 原文地址:https://www.cnblogs.com/xs-yqz/p/5116364.html
Copyright © 2011-2022 走看看