JS implements user registration interface function

This article example shares the specific code of JS to implement the user registration interface function for your reference. The specific content is as follows

1.css code

*{
            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 code

<div class="block">
    <div class="photo"></div>
    <div class="biao">
        <form name="form">
            <ul>
                <li><label style="color: white">Account Number:</label><input class="txt" type="text"></li>
                <li><label style="color: white">Password:</label><input class="txt" type="text"></li>
                <li><label style="color: white">Confirm password:</label><input class="txt" type="text"></li>
                <li><label style="color: white">Phone number:</label><input class="txt" type="text"></li>
                <li><label style="color: white">Mail Box:</label><input class="txt" type="text"></li>
                <li class="d"><input id="sub" type="submit" value="Register"></li>
            </ul>
        </form>
    </div>
</div>

3.js code

 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="Please enter your account number";
                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="Please enter your password";
                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="Wrong password";
                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="Please confirm your password again";
                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="Please re-enter";
                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="Please enter a number";
                s.className="error";
                li[this.index].appendChild(s)
            }
            else if(this.value.length!=11){
                var s = document.createElement("span");
                s.innerHTML="The number format is wrong";
                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="Please enter your email";
                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;
        }
      }
    }

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

You may also be interested in: