关于做登录页面

登录页面，看起来比较简单，从外观来说说是一个表格里面分别有字和一个TEXT的文本输入框，但是要做一一个提示框还是不容易的，这个需要对于制作要有比较明确的分析和思路，首先要有一个表格规划，，规划其中的内容，然后是对于浏览器兼容的问题，上次在表格中也说过，因为浏览器不同，我们要找的表格框也不同，如果求方便的话也可以在表格中设一个ID或者NAME、CALSS,这样比较方便用名称查找，，废话不多少看代码：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>

    <style type="text/css">
        .td{
            color: red;
            font-size: 13px;
        }

    </style>
    <script type="text/javascript">
        var str = [0,0,0,0]

        window.onload = function(){

            var inputs = document.getElementsByName("text")
            for(var i=0;i<inputs.length;i++){

                inputs[i].onblur = function(){
                    var input = document.getElementById("tijiao")

                    var text = this.value.trim()

                    var tr = this.parentNode.parentNode;

                    var text1 = tr.cells[0].textContent;

                    var text2 = text1.substring(0,text1.length-1)

                    if(text.length==0&&(text2=="用户名"||text2=="密码")){
                        tr.cells[2].innerHTML = text2+"不能为空";
                        if(text2=="密码"){
                            str[1] = 0;
                        }else{
                            str[0] = 0;
                        }
                    }
                    else if(text.length>6&&(text2=="用户名"||text2=="密码"))
                    {
                        tr.cells[2].innerHTML = text2+"长度不能小于6";
                        if(text2=="密码"){
                            str[1] = 0;
                        }else{
                            str[0] = 0;
                        }
                    }
                    else if(isNumOrChar(text)&&(text2=="用户名"||text2=="密码")){
                        tr.cells[2].innerHTML = text2+"不能纯数字或者纯字母";
                        if(text2=="密码"){
                            str[1] = 0;
                        }else{
                            str[0] = 0;
                        }
                    }
                    else if(text2=="邮箱"&&text.length==0){
                        tr.cells[2].innerHTML = text2+"不能为空";
                        str[2] = 0;
                    }
                    else if(text2=="邮箱"&&isNotEmail(text))
                    {
                        tr.cells[2].innerHTML = text2+"格式不正确";
                        str[2] = 0;
                    }
                    else if(text2=="手机"&&text.length==0)
                    {
                        tr.cells[2].innerHTML = text2+"不能为空";
                        str[3] = 0;
                    }else if(text2=="手机"&&isNotPhone(text))
                    {
                        tr.cells[2].innerHTML = text2+"格式不正确";
                        str[3] = 0;
                    }
                    else{
                        tr.cells[2].innerHTML = "";
                        switch (text2){
                            case "手机":
                                str[3] = 1;
                                    break;
                            case "邮箱":
                                str[2] = 1;
                                    break;
                            case "用户名":
                                str[0] = 1;
                                    break;
                            case "密码":
                                str[1] = 1;
                                    break;
                        }
                    }

                }
            }   if(str.toString()=="1,1,1,1"){
                input.disabled = false;
            }else{
                input.disabled = true;
            }
        }

        function isNumOrChar(str){

            var reg = /^\d\d{4,}\d$/g
            var reg1 = /^[a-z][a-z]{4,}[a-z]$/g

           return (reg.test(str)||reg1.test(str))
        }

        function isNotEmail(str){
            var reg = /^\w\w{5,12}@(qq|sina|163)(\.com|\.cn)/g
            return !reg.test(str);
        }

        function isNotPhone(str){
            var reg = /^1[35789]\d{8}\d$/       a
            return !reg.test(str)
        }

    </script>
</head>
<body>
    <form>
        <table>
            <tr>
                <td>用户名:</td>
                <td><input type ="text" name = "text"/></td>
                <td class="td"></td>
            </tr>
            <tr>
                <td>密码:</td>
                <td><input type ="password" name = "text"/></td>
                <td class="td"></td>
            </tr>
            <tr>
                <td>邮箱:</td>
                <td><input type ="text" name = "text"/></td>
                <td class="td"></td>
            </tr>

            <tr>
                <td>手机:</td>
                <td><input type ="text" name = "text"/></td>
                <td class="td"></td>
            </tr>
            <tr>
                <td></td>
                <td colspan="2">
                    <input type="submit" value="submit" disabled = "disabled" id="tijiao"/>
                    <input type="reset" value="reset"/>
                </td>

            </tr>
        </table>

    </form>
</body>
在这中主要是正则表达式要正确，其中逻辑并不是很多，只要熟悉代码单词和正则表达式应该没有什么问题。