快捷導(dǎo)航

JS實(shí)現(xiàn)用戶(hù)注冊(cè)界面功能

更新時(shí)間：2021年09月22日 09:51:54 作者：yezi__626

這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)用戶(hù)注冊(cè)界面功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了JS實(shí)現(xiàn)用戶(hù)注冊(cè)界面功能的具體代碼，供大家參考，具體內(nèi)容如下

1.css代碼

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

2.html代碼

<div class="block">
    <div class="photo"></div>
    <div class="biao">
        <form name="form">
            <ul>
                <li><label style="color: white">賬&nbsp;&nbsp;號(hào)：</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">確認(rèn)密碼：</label><input class="txt" type="text"></li>
                <li><label style="color: white">電話號(hào)碼：</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="注冊(cè)"></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="請(qǐng)輸入賬號(hào)";
                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="請(qǐng)輸入密碼";
                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="密碼錯(cuò)誤";
                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="請(qǐng)?jiān)俅未_認(rèn)密碼";
                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="請(qǐng)重新輸入";
                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="請(qǐng)輸入號(hào)碼";
                s.className="error";
                li[this.index].appendChild(s)
            }
            else if(this.value.length!=11){
                var s=document.createElement("span");
                s.innerHTML="號(hào)碼格式錯(cuò)誤";
                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="請(qǐng)輸入郵箱";
                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;
        }
      }
    }

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: