JS实现用户注册界面功能

*{            margin: 0;            padding: 0;        }        .block{            position: relative;            margin: 0 auto;            margin-top: 80px;            width: 710px;            height: 500px;            border: 1px solid rgba(29, 29, 29, 0.64);            background: url("./img/logo2396.jpg")no-repeat;            background-size: 100%;        }        .photo {            position: absolute;            z-index: 1;            width: 710px;            height: 500px;            background-color: rgba(0, 0, 0, 0.71);        }        .biao{            margin-top: 20px;            position: absolute;            z-index: 2;            margin-left: 150px;        }        li{            position: relative;            padding-left:20px ;            list-style: none;            line-height: 70px;            width: 400px;            border: 1px solid white;            margin:5px auto;        }        li input[type=text]{            padding-left: 20px;            border-style: none;            background: none;        }        input[type=submit]{            margin-left: 150px;            border-style: none;            font-size: 25px;            color: white;            background: none;        }        .d{            background-color: rgba(222, 53, 3, 0.71);        }       .txt{           line-height: 50px;           width: 280px;           font-size: 15px;           color: white;       }       .error {           position: absolute;           z-index: 2;           left: 150px;           color: rgba(253, 253, 253, 0.4);           font-size: 14px;       }

<div class="block">    <div class="photo"></div>    <div class="biao">        <form name="form">            <ul>                <li><label style="color: white">账&nbsp;&nbsp;号：</label><input class="txt" type="text"></li>                <li><label style="color: white">密&nbsp;&nbsp;码：</label><input class="txt" type="text"></li>                <li><label style="color: white">确认密码：</label><input class="txt" type="text"></li>                <li><label style="color: white">电话号码：</label><input class="txt" type="text"></li>                <li><label style="color: white">邮&nbsp;&nbsp;箱：</label><input class="txt" type="text"></li>                <li class="d"><input id="sub" type="submit" value="注册"></li>            </ul>        </form>    </div></div>

 var sub=document.getElementById("sub"); var txt=document.getElementsByClassName("txt");     var li=document.getElementsByTagName("li");    document.forms.form.onsubmit=function(){        yan();        var errl=document.getElementsByClassName("error").length;        if(!errl){            return true;        }        return false;    };    function yan(){        for(var i=0;i<txt.length;i++){            txt[i].focus();        }        sub.focus();    }    for(var i=0;i<txt.length;i++)    {    txt[i].index=i;    txt[i].onfocus=function (){    if(this.parentElement.children[2]==undefined) return;    this.parentElement.children[2].remove();    };    txt[i].onblur=function (){    switch (this.index){        case 0:            if(this.value==""){                var s=document.createElement("span");                s.innerHTML="请输入账号";                s.className="error";                li[this.index].appendChild(s)            }            else{                var s=document.createElement("span");                s.innerHTML="";                s.className="sucess";                li[this.index].appendChild(s)            }            break;        case 1:            if(this.value==""){                var s=document.createElement("span");                s.innerHTML="请输入密码";                s.className="error";                li[this.index].appendChild(s)            }            else if(this.value.length<6||this.value.length>11) {                var s=document.createElement("span");                s.innerHTML="密码错误";                s.className="error";                li[this.index].appendChild(s);               txt[this.index].value="";            }             else{                    var s=document.createElement("span");                    s.innerHTML="";                    s.className="sucess";                    li[this.index].appendChild(s)                }            break;        case 2:            if(this.value==""){                var s=document.createElement("span");                s.innerHTML="请再次确认密码";                s.className="error";                li[this.index].appendChild(s);                txt[this.index].value="";            }            else if(this.value!=txt[1].value){                var s=document.createElement("span");                s.innerHTML="请重新输入";                s.className="error";                li[this.index].appendChild(s);                txt[this.index].value="";            }            else{                var s=document.createElement("span");                s.innerHTML="";                s.className="sucess";                li[this.index].appendChild(s)            }            break;        case 3:            if(this.value==""){                var s=document.createElement("span");                s.innerHTML="请输入号码";                s.className="error";                li[this.index].appendChild(s)            }            else if(this.value.length!=11){                var s=document.createElement("span");                s.innerHTML="号码格式错误";                s.className="error";                li[this.index].appendChild(s)                txt[this.index].value="";            }            else{                var s=document.createElement("span");                s.innerHTML="";                s.className="sucess";                li[this.index].appendChild(s)            }            break;        case 4:            if(this.value==""){                var s=document.createElement("span");                s.innerHTML="请输入邮箱";                s.className="error";                li[this.index].appendChild(s)            }            else{                var s=document.createElement("span");                s.innerHTML="";                s.className="sucess";                li[this.index].appendChild(s)            }            break;        }      }    }