javascript在提交表单时异步检验多项内容

重点看一下js代码是怎么设计的。

window.onload = initPage;//初始化加载

var usernameValid=false;//检查用户名的有效性标记

var passwordValid=false;//检查密码的有效性标记

function initPage() {

  document.getElementById("username").onblur = checkUsername;//加载同户名的检查

  document.getElementById("password2").οnblur=checkPassword;//加载密码的检查

  document.getElementById("register").disabled = true;//禁用注册按钮

  document.getElementById("register").οnclick=registerUser;//加载注册按钮处理事件程序

}

function checkUsername() {//异步发送用户名

  document.getElementById("username").className = "thinking";

  usernameRequest = createRequest();

  if (usernameRequest== null)

    alert("Unable to create request");

  else {

    var theName = document.getElementById("username").value;

    var username = escape(theName);

    var url= "checkName.php?username=" + username;

    usernameRequest.onreadystatechange = showUsernameStatus;

    usernameRequest.open("GET", url, true);

    usernameRequest.send(null);

  }

}

function showUsernameStatus() {

  if (usernameRequest.readyState == 4) {

    if (usernameRequest.status == 200) {

      if (usernameRequest.responseText == "okay") {//检查成功，将用户名有效性标记改为true

        document.getElementById("username").className = "approved";

        usernameValid = true;

      } else {

        document.getElementById("username").className = "denied";

        document.getElementById("username").focus();

        document.getElementById("username").select();

        passwordValid= false;

      }

      checkFormStatus();//检查表单的有效性

    }

  }

}

function checkPassword(){

    var password1=document.getElementById("password1");

    var password2=document.getElementById("password2");

    

    password1.className="thinking";

    

    if(password1.value==""||(password1.value!=password2.value)){//两次密码不一致的处理

        password1.className="denied";

        passwordValid=false;

        checkFormStatus();

        return;

    }

    

     passwordRequest=createRequest();

    if(passwordRequest==null){

        alert("Unable to create request");

    }else{

        var password=escape(password1.value);

        var url="checkPass.php?password="+password;

        passwordRequest.onreadystatechange=showPasswordStatus;

        passwordRequest.open("GET",url,true);

        passwordRequest.send(null);

    }

}

function showPasswordStatus(){

    if(passwordRequest.readyState==4){

        if(passwordRequest.status==200){

            var password1=document.getElementById("password1");

            if(passwordRequest.responseText=="okay"){

                password1.className="approved";

                passwordValid=true;

            }else{

                password1.className="denied";

                password1.focus();

                password1.select();

                passwordValid=false;

            }

            checkFormStatus();

        }

    }

}

function checkFormStatus(){

    if(usernameValid&&passwordValid){

        document.getElementById("register").disabled=false;

    }else{

      document.getElementById("register").disabled=true;  

    }

}

function registerUser(){

    t=setInterval("scrollImages(),50");

    document.getElementById("register").value="Processing......";

    registerRequest=createRequest();

    if(registerRequest==null){

        alert("Unable to create request");

    }else{

        var url="register.php";

        registerRequest.onreadystatechange=registerationProcessed;

        registerRequest.open("GET",url,true);

        registerRequest.send(null);

    }

}

function registerationProcessed(){

    if(registerRequest.readyState==4){

        if(registerRequest.status==200){

            document.getElementById("wrapper").innerHTML=registerRequest.responseText;

        }

    }

}

function scrollImages(){

    var coverBarDiv=document.getElementById("coverBar");

    var images=coverBarDiv.getElementsByTagName("img");

    for(var i=0;i<images.length;i++){

        var left=images[i].style.left.substr(0,images[i].style.left.length-2);

        if(left<= -86){

            left=532;

        }

        images[i].style.left=(left-1)+"px";

    }

}