本文例項為大家分享了實現使用者註冊介面功能的具體程式碼，供大家參考，具體內容如下

1.程式碼

*{
            margin: 0;
            padding: 0;
        }
        .block{
            position: relative;
            margin: 0 auto;
            margin-top: 80px;
            width: 710px;
            height: 500px;
            border: 1px solid rgba(29,29,0.64);
            background: url("./img/logo2396.jpg")no-repeat;
            background-size: 100%;
       www.cppcns.com
 
 }
        .photo {
            position: absolute;
            z-index: 1;
            width: 710px;
            height: 500px;
            background-color: rgba(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: 70pxYyWKCuLMXT
 
;
            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;
       }

2.html程式碼

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

3.js程式碼

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

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。