JS implementiert die Benutzerregistrierungsschnittstellenfunktion

In diesem Artikelbeispiel wird der spezifische JS-Code zur Implementierung der Benutzerregistrierungsschnittstellenfunktion zu Ihrer Information geteilt. Der spezifische Inhalt ist wie folgt

1. CSS-Code

*{
            Rand: 0;
            Polsterung: 0;
        }
        .Block{
            Position: relativ;
            Rand: 0 automatisch;
            Rand oben: 80px;
            Breite: 710px;
            Höhe: 500px;
            Rand: 1px durchgezogen rgba(29, 29, 29, 0,64);
            Hintergrund: URL("./img/logo2396.jpg")keine Wiederholung;
            Hintergrundgröße: 100 %;
        }
        .Foto {
            Position: absolut;
            Z-Index: 1;
            Breite: 710px;
            Höhe: 500px;
            Hintergrundfarbe: rgba(0, 0, 0, 0,71);
        }
        .biao{
            Rand oben: 20px;
            Position: absolut;
            Z-Index: 2;
            Rand links: 150px;
        }
        li{
            Position: relativ;
            Polsterung links: 20px;
            Listenstil: keiner;
            Zeilenhöhe: 70px;
            Breite: 400px;
            Rand: 1px durchgehend weiß;
            Rand: 5px automatisch;
        }
        li-Eingabe[Typ=Text]{
            Polsterung links: 20px;
            Rahmenstil: keiner;
            Hintergrund: keiner;
        }
        Eingabe[Typ=Senden]{
            Rand links: 150px;
            Rahmenstil: keiner;
            Schriftgröße: 25px;
            Farbe: weiß;
            Hintergrund: keiner;
        }
        .D{
            Hintergrundfarbe: rgba(222, 53, 3, 0,71);
        }
       .txt{
           Zeilenhöhe: 50px;
           Breite: 280px;
           Schriftgröße: 15px;
           Farbe: weiß;
       }
       .Fehler {
           Position: absolut;
           Z-Index: 2;
           links: 150px;
           Farbe: rgba(253, 253, 253, 0,4);
           Schriftgröße: 14px;
       }

2.html-Code

<div Klasse="Block">
    <div Klasse="Foto"></div>
    <div Klasse="biao">
        <Formularname="Formular">
            <ul>
                <li><label style="color: white">Kontonummer:</label><input class="txt" type="text"></li>
                <li><label style="color: white">Passwort:</label><input class="txt" type="text"></li>
                <li><label style="color: white">Passwort bestätigen:</label><input class="txt" type="text"></li>
                <li><label style="color: white">Telefonnummer:</label><input class="txt" type="text"></li>
                <li><label style="color: white">Briefkasten:</label><input class="txt" type="text"></li>
                <li class="d"><input id="sub" type="submit" value="Registrieren"></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=Funktion(){
        yan();
        var errl = document.getElementsByClassName("Fehler").Länge;
        wenn(!errl){
            gibt true zurück;
        }
        gibt false zurück;
    };
    Funktion yan(){
        für(var i=0;i<txt.length;i++){
            txt[i].fokus();
        }
        untergeordneter Fokus();
    }
    für (var i=0;i<txt.length;i++)
    {
    txt[i].index=i;
    txt[i].onfocus=Funktion (){
    wenn(dieses.übergeordnetesElement.kinder[2]==undefiniert) return;
    dieses.übergeordnetesElement.kinder[2].entfernen();
    };
    txt[i].onblur=Funktion (){
    Schalter (dieser.index) {
        Fall 0:
            wenn(dieser.Wert==""){
                var s = document.createElement("span");
                s.innerHTML="Bitte geben Sie Ihre Kontonummer ein";
                s.className="Fehler";
                li[this.index].anhängenKind(e)
            }
            anders{
                var s = document.createElement("span");
                s.innerHTML="";
                s.className="Erfolg";
                li[this.index].anhängenKind(e)
            }
            brechen;
        Fall 1:
            wenn(dieser.Wert==""){
                var s = document.createElement("span");
                s.innerHTML="Bitte geben Sie Ihr Passwort ein";
                s.className="Fehler";
                li[this.index].anhängenKind(e)
            }
            sonst wenn(diese.Wertlänge<6||diese.Wertlänge>11) {
                var s = document.createElement("span");
                s.innerHTML="Falsches Passwort";
                s.className="Fehler";
                li[this.index].appendChild(s);
               txt[diesen.index].wert="";
            }
             anders{
                    var s = document.createElement("span");
                    s.innerHTML="";
                    s.className="Erfolg";
                    li[this.index].anhängenKind(e)
                }
            brechen;
        Fall 2:
            wenn(dieser.Wert==""){
                var s = document.createElement("span");
                s.innerHTML="Bitte bestätigen Sie Ihr Passwort noch einmal";
                s.className="Fehler";
                li[diesen.index].appendChild(s);
                txt[diesen.index].wert="";
            }
            sonst wenn(dieser.Wert!=txt[1].Wert){
                var s = document.createElement("span");
                s.innerHTML="Bitte erneut eingeben";
                s.className="Fehler";
                li[this.index].appendChild(s);
                txt[diesen.index].wert="";
            }
            anders{
                var s = document.createElement("span");
                s.innerHTML="";
                s.className="Erfolg";
                li[this.index].anhängenKind(e)
            }
            brechen;
        Fall 3:
            wenn(dieser.Wert==""){
                var s = document.createElement("span");
                s.innerHTML="Bitte geben Sie eine Nummer ein";
                s.className="Fehler";
                li[this.index].anhängenKind(e)
            }
            sonst wenn(dieser.Wert.Länge!=11){
                var s = document.createElement("span");
                s.innerHTML="Das Zahlenformat ist falsch";
                s.className="Fehler";
                li[this.index].anhängenKind(e)
                txt[diesen.index].wert="";
            }
            anders{
                var s = document.createElement("span");
                s.innerHTML="";
                s.className="Erfolg";
                li[this.index].anhängenKind(e)
            }
            brechen;
        Fall 4:
            wenn(dieser.Wert==""){
                var s = document.createElement("span");
                s.innerHTML="Bitte geben Sie Ihre E-Mail-Adresse ein";
                s.className="Fehler";
                li[this.index].anhängenKind(e)
            }
            anders{
                var s = document.createElement("span");
                s.innerHTML="";
                s.className="Erfolg";
                li[this.index].anhängenKind(e)
            }
            brechen;
        }
      }
    }

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.

Das könnte Sie auch interessieren: