用js制作163登陆页面终极版（写了一晚上）

于 2016-07-11 21:50:15 发布
阅读量3.6k 收藏 1
点赞数 1
分类专栏： Web
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/miachen520/article/details/51884276
版权

用js制作163登陆页面终极版（写了一晚上），有些功能还不太完善，有兴趣的可以去自己再实现一些功能，基本上所有的功能我都实现了，只有少数的没有实现，里面还有一些正则表达式的运用，主要还是用表格设计的，没有用div，下次上传div的。

下面看HTML代码：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>mischen</title>
    <script src="util.js"></script>
</head>
   <center>

    <form action="test.html" method="get" name="phoneForm">
        <table width="400px" id="phone">
            <tr>
                <td colspan="3" align="center">
                    <img src="注册字母邮箱.bmp" οnclick="showMailForm()"/>
                    <img src="注册手机号邮箱.bmp"/>
                </td>
            </tr>
            <tr>
                <td align="right">*手机号码</td>
                <td width="50%"><input type="text" name="phoneNum" style="width:100%;" οnchange="valiPhone(this)"/></td>
                <td>@163.com</td>
            </tr>
            <tr>
                <td> </td>
                <td colspan="2" >
                    <span style="color: grey;font-size: 10px;" id="phoneMsg">请填写手机号码</span>
                </td>
            </tr>
            <tr>
                <td align="right">*短信验证码</td>
                <td width="50%" colspan="2"><input type="text" name="valiCode" style="width:100%;" οnchange="valiCode1(this)"/></td>
            </tr>
            <tr>
                <td> </td>
                <!-- colspan  表示  跨两列      rowspan    表示跨两行-->
                <td colspan="2" >
                    <span style="color: grey;font-size: 10px;" id="codeMsg">请查收手机短信，并填写短信中的验证码</span>
                </td>
            </tr>
            <tr>
                <td align="right">*密码</td>
                <td width="50%" colspan="2"><input type="password" name="pwd" style="width:100%;" οnchange="valiPwd(this)"/></td>
            </tr>
            <tr>
                <td> </td>
                <!-- colspan  表示  跨两列      rowspan    表示跨两行-->
                <td colspan="2" >
                    <span style="color: grey;font-size: 10px;" id="pwdMsg">6~16个字符，区分大小写</span>
                </td>
            </tr>
            <tr>
                <td align="right">*确认密码</td>
                <td width="50%" colspan="2"><input type="password" name="repwd" style="width:100%;" οnchange="valiRepwd(this)"/></td>
            </tr>
            <tr>
                <td> </td>
                <!-- colspan  表示  跨两列      rowspan    表示跨两行-->
                <td colspan="2" colspan="2">
                    <span style="color: grey;font-size: 10px;" id="repwdMsg">请再次填写密码
                    </span>
                </td>
            </tr>
            <tr>
                <td> </td>
                <td colspan="2">
                    <img src="提交.bmp"  οnclick="subForm()"/>
                </td>
            </tr>
            </table>
    </form>
    <form action="test.html" method="get" style="display:none" name="mailForm">
       <table width="400px">
        <tr>
            <td colspan="3" align="center">
                <img src="注册字母邮箱2.bmp" />
                <img src="注册手机邮箱2.bmp" οnclick="showPhoneForm()"/>

            </td>
        </tr>
        <tr>
            <td align="right">*邮件地址</td>
            <td width="50%"><input type="text" name="phoneNum" style="width:100%;" οnchange="mailAddr(this)"/></td>
            <td>@<select>
                <option value="163.com" selected>163.com</option>
                <option value="126.com">126.com</option>
                <option value="yeah.net">yeah.net</option>
            </select></td>
        </tr>
        <tr>
            <td> </td>
            <!-- colspan  表示  跨两列      rowspan    表示跨两行-->
            <td colspan="2" >
                <span style="color: grey;font-size: 10px;" id="mailMsg">6~18个字符，可使用字母、数字、下划线，需以字母开头</span>
            </td>
        </tr>
        <tr>
            <td align="right">*密码</td>
            <td width="50%" colspan="2"><input type="text" name="phoneNum1" style="width:100%;" οnchange="mailPwd(this)"/></td>
        </tr>
        <tr>
            <td> </td>
            <!-- colspan  表示  跨两列      rowspan    表示跨两行-->
            <td colspan="2" >
                <span style="color: grey;font-size: 10px;" id="pwdMsg1">6~16个字符，区分大小写</span>
            </td>
        </tr>
        <tr>
            <td align="right">*确认密码</td>
            <td width="50%" colspan="2"><input type="text" name="phoneNum2" style="width:100%;" οnchange="mailrePwd(this)"/></td>
        </tr>
        <tr>
            <td> </td>
            <!-- colspan  表示  跨两列      rowspan    表示跨两行-->
            <td colspan="2" colspan="2">
                    <span style="color: grey;font-size: 10px;" id="rePwdMsg1">请再次填写密码
                    </span>
            </td>
        </tr>
        <tr>
            <td align="right">*手机号码</td>
            <td width="50%" colspan="2"><input type="text" name="phoneNum" style="width:100%;" οnchange="mailPhone(this)"/></td>
        </tr>
        <tr>
            <td> </td>
            <!-- colspan  表示  跨两列      rowspan    表示跨两行-->
            <td colspan="2" colspan="2">
                    <span style="color: grey;font-size: 10px;" id="mailPhoneMsg">忘记密码时，可以通过该手机号码快速找回密码
                    </span>
            </td>
        </tr>
        <tr>
            <td align="right">*验证码</td>
            <td width="50%" colspan="2"><input type="text" name="phoneNum" style="width:100%;"/></td>
        </tr>
        <tr>
            <td> </td>
            <!-- colspan  表示  跨两列      rowspan    表示跨两行-->
            <td colspan="2" colspan="2">
                    <span style="color: grey;font-size: 10px;">请填写图片中的字符，不区分大小写
                    </span>
            </td>
        </tr>
        <tr>
            <td align="right">*短信验证码</td>
            <td width="50%" colspan="2"><input type="text" name="phoneNum" style="width:100%;"/></td>
        </tr>
        <tr>
            <td> </td>
            <!-- colspan  表示  跨两列      rowspan    表示跨两行-->
            <td colspan="2" colspan="2">
                    <span style="color: grey;font-size: 10px;">请查收手机短信，并填写短信中的验证码
                    </span>
            </td>
        </tr>
        <tr>
            <td> </td>
            <td colspan="2">
                <img src="提交.bmp" οnclick="sumForm()"/>
            </td>
        </tr>
    </table>
</form>
       </center>
<body>

</body>
</html>
<script>
    var phoneForm=document.phoneForm;
    var mailForm=document.forms[1];
    //设置四个状态分别代表每个表单的验证结果
    var phoneResult=false;
    var codeResult=false;
    var pwdResult=false;
    var repwdResult=false;
    //显示邮箱注册的表单
    function showMailForm(){
        phoneForm.style.display="none";
        mailForm.style.display="block";
    }
    function showPhoneForm(){
        phoneForm.style.display="block";
        mailForm.style.display="none";
    }
    function mailAddr(mailObj){
        var val1=mailObj.value;
        var mailMsg=$("#mailMsg");
        if(!val1){
            mailMsg.innerHTML="<font color='red'>邮箱地址不能为空</font>";
            return false;
        }else if(!(/^[a-zA-Z]\w{5,17}$/.test(val1))) {
                mailMsg.innerHTML="<font color='red'>邮箱地址必须为6~18个字符，可使用字母、数字、下划线，需以字母开头</font>";
                return false;
        }else{
            mailMsg.innerHTML="请填写邮件地址";
            return true;
        }

    }
    function mailPhone(phoneObj1){
        var val=phoneObj1.value;
        var phoneMsg=$("#mailPhoneMsg");
        if(!val){
            phoneMsg.innerHTML="<font color='red'>手机号不能为空</font>";
            //phoneResult=false;
            return false;
        }else if(val.length!=11){
            phoneMsg.innerHTML="<font color='red'>手机号长度只能为11位</font>";
            //phoneResult=false;
            return false;
        }else{
            phoneMsg.innerHTML="请填写手机号码";
            //phoneResult=true;
            return true;
        }
    }
    function valiPhone(phoneObj){
        var val=phoneObj.value;
        var phoneMsg=$("#phoneMsg");
        if(!val){
            phoneMsg.innerHTML="<font color='red'>手机号不能为空</font>";
            //phoneResult=false;
            return false;
        }else if(val.length!=11){
            phoneMsg.innerHTML="<font color='red'>手机号长度只能为11位</font>";
            //phoneResult=false;
            return false;
        }else{
            phoneMsg.innerHTML="请填写手机号码";
            //phoneResult=true;
            return true;
        }
    }
    function valiCode1(codeObj){
        var val=codeObj.value;
        var codeMsg=$("#codeMsg");
        if(!val){
            codeMsg.innerHTML="<font color='red'>验证码不能为空</font>";
//            codeResult=false;
            return false;
        }else if(val.length!=6){
            codeMsg.innerHTML="<font color='red'>验证码长度只能为6位</font>";
//            codeResult=false;
            return false;
        }else{
            codeMsg.innerHTML="请查收手机短信，并填写短信中的验证码";
//            codeResult=true;
            return true;
        }
    }
    function mailPwd(pwdObj1){
        var val2=pwdObj1.value;
        var pwdMsg1=$("#pwdMsg1");
        if(!val2){
            pwdMsg1.innerHTML="<font color='red'>密码不能为空</font>";
//            pwdResult=false;
            return false;

        }else if(val2.length<6||val2.length>16){
            pwdMsg1.innerHTML="<font color='red'>密码长度只能为6-16位</font>";
//            pwdResult=false;
            return false;
        }else{
            pwdMsg1.innerHTML="6~16个字符，区分大小写";
//            pwdResult=true;
            return true;
        }
    }
    function valiPwd(pwdObj){
        var val=pwdObj.value;
        var pwdMsg=$("#pwdMsg");
        if(!val){
            pwdMsg.innerHTML="<font color='red'>密码不能为空</font>";
//            pwdResult=false;
            return false;

        }else if(val.length<6||val.length>16){
            pwdMsg.innerHTML="<font color='red'>密码长度只能为6-16位</font>";
//            pwdResult=false;
            return false;
        }else{
            pwdMsg.innerHTML="6~16个字符，区分大小写";
//            pwdResult=true;
            return true;
        }
    }
    function mailrePwd(repwdObj1){
        var val3=repwdObj1.value;
        var comValue=repwdObj1.form["phoneNum1"].value;
        var repwdMsg1=$("#rePwdMsg1");
        if(val3!=comValue){
            repwdMsg1.innerHTML="<font color='red'>两次密码输入不一致</font>";
//            repwdResult=false;
            return false;
        }else{
            repwdMsg1.innerHTML="请再次填写密码";
//            repwdResult=true;
            return true;
        }

    }
    function valiRepwd(repwdObj){
        var val=repwdObj.value;
        //repwdObj  表单域对象     表单域对象.form   获取form表单对象   form表单对象.表单域name    表单域对象
        var comValue=repwdObj.form["pwd"].value;
        var repwdMsg=$("#repwdMsg");
        if(val!=comValue){
            repwdMsg.innerHTML="<font color='red'>两次密码输入不一致</font>";
//            repwdResult=false;
            return false;
        }else{
            repwdMsg.innerHTML="请再次填写密码";
//            repwdResult=true;
            return true;
        }
    }
    function subForm(){
        //用四种结果  进行判断
        //var result=phoneResult&&codeResult&&pwdResult&&repwdResult;
        //分别再执行一次表单验证  返回结果
//        alert(valiCode1($("valiCode")[0])); 用于测试
        var result=valiPhone($("phoneNum")[0])&&valiCode1($("valiCode")[0])&&valiPwd($("pwd")[0])&&valiRepwd($("repwd")[0]);
        if(result){
            phoneForm.submit();
        }else{
            alert("表单填写有误，请确认后再提交");
        }
    }
    function sumForm(){

    }


</script>

下面是js代码： 

/**
 *
 * @param idOrName  如果传入id  前面加上#   如果传入name  直接传入
 * @returns {*}  返回元素节点  如果没找到 返回null
 */
function $(idOrName){
    var obj=null;
    if(idOrName){
        if(idOrName.charAt(0)=="#"){
            obj=document.getElementById(idOrName.substring(1));
        }else{
            obj=document.getElementsByName(idOrName);
        }
    }
    return obj;
}
/**
 *
 * @param parentNode  父节点
 * @returns {Array}  所有的元素子节点
 */
function getChildNodes(parentNode){
    var childs=parentNode.childNodes;
    var newChilds=[];
    for(var i=0;i<childs.length;i++){
        if(childs[i].nodeType==1){
            newChilds.push(childs[i]);
        }
    }
    return newChilds;
}
/**
 *
 * @param parentNode 父节点
 * @returns {*|Node}   第一个元素节点
 */
function getFirstChild(parentNode){
    var firstChild=parentNode.firstChild;
    if(firstChild.nodeType==3){
        firstChild=firstChild.nextSibling;
    }
    return firstChild;

}
/**
 *
 * @param parentNode 父节点
 * @returns {*|Node}   最后一个元素节点
 */
function getLastChild(parentNode){
    var lastChild=parentNode.lastChild;
    if(lastChild.nodeType==3){
        lastChild=lastChild.previousSibling;
    }
    return lastChild;
}
/**
 *
 * @param node  元素节点
 * @returns {*|Node}  返回下一个兄弟元素节点
 */
function getNextSibling(node){
    var nextNode=node.nextSibling;
    if(nextNode.nodeType==3){
        nextNode=nextNode.nextSibling;
    }
    return nextNode;
}
/**
 *
 * @param node  元素节点
 * @returns {*|Node}  返回前一个兄弟元素节点
 */
function getPreviousSibling(node){
    var preNode=node.previousSibling;
    if(preNode.nodeType==3){
        preNode=preNode.previousSibling;
    }
    return preNode;
}


界面实现效果如下：




mischen520
关注
专栏目录
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值