Comment implémenter l'interface d'enregistrement des utilisateurs en javascript (avec code)

Le contenu de cet article explique comment implémenter l'interface d'enregistrement des utilisateurs en JavaScript (avec du code). Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

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

Code 2.html

<div class="block">
    <div class="photo"></div>
    <div class="biao">
        <form name="form">
            <ul>
                <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">确认密码：</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 class="d"><input id="sub" type="submit" value="注册"></li>
            </ul>
        </form>
    </div>
</div>

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

Recommandations associées :

js pour implémenter l'interface de connexion et d'enregistrement

ajax pour implémenter utilisateurs enregistrés Un ensemble complet de procédures

Utilisez Ajax et les formulaires pour mettre en œuvre les fonctions requises pour les utilisateurs enregistrés

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!