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

来源：互联网发布：下载中文ae软件编辑：程序博客网时间：2024/05/20 17:23

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;        }

0 0