CSS+JS+Java设计12306登录界面

1.今天先来梳理JS部分：
众所周知，JS代码位于之间的

function checkGenValue(txtId,divId,spanId,regex,infoStr){
    //先从文档中获取元素
    var flag = false;
    var txtObj = document.getElementById(txtId);//txtObj是提示框中的文本对象
    var divObj = document.getElementById(divId);//divObj是输入框对象
    var spanObj = document.getElementById(spanId);//spanObj是提示框对象

//如果符合要求的话，返回true,而且提示框要隐藏，输入框要回到正常颜色
if(regex.test(txtObj.value)){
    flag = true;
    divObj.style.display = "none";
    txtObj.style.border= "1px solid red";
}else{
    //不符合要求的话，对输入框的颜色进行改变，弹出提示框，且框中有内容
    divObj.style.display = "block";
    spanObj.innerHTML = infoStr;
    txtObj.style.border = "1px solid red";
}
return flag;
}

完成了封装之后，我们可以根据业务需求进行调用：

//检查用户名
function checkUserName(){
    var regex = /^[\w\u4e00-\u9fa5]{6,30}$/;//用正则表达式来表达业务要求，
    var flag = checkGenValue("txtUsername","divUsername","spanUsername",regex,"请输入正确的用户名")；
    return flag;
}

//检查密码
function checkUserPwd(){
    var regex =/^.{6,}$/;
    var flag = checkGenValue("txtPassword","divPassword","spanPassword",regex,"请输入正确的密码")；
    return flag;
}

//当然特殊的方法，还是要单独的定义出来，比如说检查安全级别的方法

function checkSafePwd(){
    var txtPwd = document.getElementById("txtPassword");
    var regex1 = /^\d{6,}$/;//大于6位的数字字符
    var regex2 = /^\w{6,}$/;//大于6位的单词字符
    var regex3 = /^.*[~！@#%^*()\u4e00-\u9fa5].{5,}$/;
    var divObj = document.getElementById("_div_password_rank");
    var spanObj = document.getElementById("_span_password_rank");

    if(regex1.test(txtPwd.value)){
        divObj.className = "safe-rank rank-a";
        spanObj.innerHTML="危险";
    }else if(regex2.test(txtPwd.value)){
        divObj.className = "safe-rank rank-b";
        spanObj.innerHTML="中等";
    }else if(regex3.test(txtPwd.value)){
        divObj.className = "safe-rank rank-c";
        spanObj.innerHTML="高";
    }
}
//检查确认密码
function checkConfirmPwd(){
    var flag = false;
    var txtPwd = document.getElementById("txtPassword").value;
    var conPwd = document.getElementById("txtConfirmPassword").value;

    var divObj = document.getElementById("divConfirmPassword");
    var spanObj = document.getElementById("spanConfirmPassword");

    if(txtPwd===conPwd){
    flag = true;
    divObj.style.display = "none";
    spanObj.innerHTML="";
}else{
    divObj.style.display = "block";
    spanObj.innerHTML = "密码不一致";
    spanObj.style.color = "red";
}

//检查密保问题
function checkQuenPwd(){
    var selectObj = document.getElementById("cmbQuestion");
    var inputObj = document.getElementById("otherpasswordQuestion");

    if(selectObj.value=="customQuestion"){
        inputObj.style.display = "inline";
    }else{
        inputObj.style.display = "none";
    }
}

//更换图片
function getImg(){
    var imgObj = document.getElementById("imgCode");
    var value = imgObj.src;
    if(value.indexOf("getPassCodeNew.jpg")>=0){
        imgObj.src = "img/getPassCodeNew1.png";
    }else{
        imgObj.src = "img/getPassCodeNew.jpg";
    }
}
//检查验证码是否正确，首先把验证码存在一个数组中，获取输入的验证码内容
//然后比较，如果不正确，提示错误信息并且输入框变色，如果正确一切照常。
    var codes = ["aHH4","UPZ3"];
    function checkCode(){
        var imgObj = document.getElementById("imgCode");
        var value = imgObj.src;

        var codeValue ="";
        if(value.indexOf("getPassCodeNew.jpg")>=0){
            codeValue = codes[0];
    }else{
            codeValue = codes[1];
    }

    var txtCode = document.getElementById("txtRandCode");
                var divObj = document.getElementById("divRandCode");

                if( txtCode.value == codeValue ){
                    divObj.style.display = "none";
                    return true;
                }else{
                    divObj.style.display = "block";
                    return false;
                }
            }

//总的检查 
        function checkAll(){
            var flag = checkUserName() && checkUserPwd() && checkConfirmPwd();
            flag = flag && checkCode();

            return flag;
        }