Natives JS implementiert regelmäßige Validierung des Formulars (Senden erst nach Validierung)

Folgende Funktionen sind implementiert:

1. Benutzername: onfouc zeigt die Nachrichtenregel an; onkeyup zählt Zeichen, wobei chinesische Zeichen zwei Zeichen sind; onblur überprüft, ob es bestanden wird

2. Mailbox: Onblur-Abgleich mit regulären Ausdrücken. Der reguläre Ausdruck wird entsprechend Ihren eigenen Anforderungen geschrieben und kann entsprechend Ihren persönlichen Anforderungen geändert werden

3. Passwort: Zeigt die Stärke des Passworts beim Eintippen an, überprüft das Passwort beim Einblenden, ob es aus denselben Zeichen besteht, ob es nur aus Buchstaben oder nur aus Zahlen besteht und ob die Länge den Anforderungen entspricht

4. Passwort bestätigen: Überprüfen Sie, ob es dasselbe ist wie beim letzten Mal

5. Der Absenden-Button ist erst gültig, wenn alle Eingaben überprüft wurden, andernfalls ist er ungültig

Wichtige Punkte:

1. Chinesisch besteht aus zwei Schriftzeichen:

Funktion getLength(str) {
    return str.replace(/[^\x00-xff]/g, "xx").Länge;
    //x00-xff stellt alle Doppelbyte-Zeichen im ASCII-Code dar. Dieser Satz bedeutet, alle Nicht-Einzelbyte-Zeichen durch xx zu ersetzen, also zwei Einzelbyte-Zeichen, und dann die Länge zu berechnen}

2. Regulärer Ausdruck zur E-Mail-Verifizierung:

var re_e = /^[\w_\.\-]+@[\w]+.([\w]{2,4})$/g

3. Sind alle Charaktere gleich?

Funktion findStr(str, n){
    vartemp = 0;
    für(var i = 0;i<str.length;i++){
        wenn(str.charAt(i)==n){
            temp++:
        };
    }
}

4. Sind alles Zahlen oder alles Buchstaben?

 var re_n = /[^\d]/g;
 if(!re_n.test(str)){//Alle sind Zahlen}

 var re_n = /[^\a-zA-Z]/g;
 if(!re_n.test(str)){//Alle Zeichen}

5. Die Schaltfläche ist nur gültig, wenn alle Formularüberprüfungen bestanden wurden und übermittelt werden können:

//Mein Ansatz besteht darin, jedem Input eine Verifizierungskennung hinzuzufügen, z. B. „email_state“. Schreiben Sie eine weitere Verifizierungsfunktion, verifizieren Sie die Verifizierungskennungen dieser vier Inputs und legen Sie fest, dass die Schaltfläche anklickbar ist, andernfalls wird sie deaktiviert. Rufen Sie diese Verifizierungsfunktion einmal bei jedem Onblur auf.

Der vollständige Code lautet wie folgt

Funktion register() {
    var oName = document.getElementById("name");
    var Anzahl = document.getElementById("Anzahl");
    var psw = document.getElementById("psw");
    var psw2 = document.getElementById("psw2");
    var E-Mail = document.getElementById("E-Mail");
    var name_msg = document.getElementsByClassName("name_msg")[0];
    var psw_msg = document.getElementsByClassName("psw_msg")[0];
    var psw2_msg = document.getElementsByClassName("psw2_msg")[0];
    var email_msg = document.getElementsByClassName("email_msg")[0];
    var psw = document.getElementById("psw");
    var psw2 = document.getElementById("psw2");
    var Intensität = getByClass("Intensität")[0].getElementsByTagName("Spanne");
    var registerbtn = document.getElementById("senden");
    var oName_state = false;
    var E-Mail-Status = false;
    var psw_state = false;
    var psw2_state = false;
    var name_length = 0;

    oName.onfocus = Funktion() {
        name_msg.style.display = "Inline-Block";
    }
    oName.onkeyup = Funktion() {
        count.style.visibility = "sichtbar";
        name_length = getLength(dieser.Wert);
        Anzahl.innerHTML = Name_Länge + "Zeichen";
        wenn (Namenslänge == 0) {
            count.style.visibility = "versteckt";
        }
    }
    oName.onblur = Funktion() {
        //Enthält ungültige Zeichen, darf nicht leer sein, Länge überschreitet 25, Länge ist kleiner als 6 Zeichen var re = /[^\w\u4e00-\u9fa5]/g;
        wenn (erneut testen(diesen.Wert)) {
            name_msg.innerHTML = "<i class='fa fa-close'>Enthält ungültige Zeichen</i>";
            oName_state = falsch;
        } sonst wenn (dieser.Wert == "") {
            name_msg.innerHTML = "<i class='fa fa-close'>darf nicht leer sein</i>";
            oName_state = falsch;
        } sonst wenn (Namenslänge > 25) {
            name_msg.innerHTML = "<i class='fa fa-close'> darf nicht länger als 25 Zeichen sein</i>";
            oName_state = falsch;
        } sonst wenn (Namenslänge < 6) {
            name_msg.innerHTML = "<i class='fa fa-close'>darf nicht weniger als 6 Zeichen haben</i>";
            oName_state = falsch;
        } anders {
            name_msg.innerHTML = "<i class='fa fa-check-square'>OK!</i>";
            oName_state = wahr;
        }
        Prüfformular();
    }

    psw.onfocus = Funktion() {
        psw_msg.style.display = "Inline-Block";
        psw_msg.innerHTML = "<i class='fa fa-lightbulb-o'>6-16 Zeichen, Buchstaben, Zahlen oder Symbole können nicht alleine verwendet werden</i>"
    }
    psw.onkeyup = Funktion() {
        wenn (diese.Wert.Länge > 5) {
            Intensität[1].className = "aktiv";
            psw2.removeAttribute("deaktiviert");
            psw2_msg.style.display = "Inline-Block";
        } anders {
            Intensität[1].className = "";
            psw2.setAttribute("deaktiviert", "");
            psw2_msg.style.display = "keine";
        }
        wenn (diese.Wert.Länge > 10) {
            Intensität[2].className = "aktiv";
            psw2.removeAttribute("deaktiviert");
            psw2_msg.style.display = "Inline-Block";
        } anders {
            Intensität[2].className = "";
        }
    }
    psw.onblur = Funktion() {
        //Darf nicht leer sein, darf nicht gleich sein, Zeichenlänge 6-16, darf nicht nur Zahlen sein, darf nicht nur Buchstaben sein var m = findStr(psw.value, psw.value[0]);
        var re_n = /[^\d]/g;
        var re_t = /[^a-zA-Z]/g;
        wenn (dieser.Wert == "") {
            psw_msg.innerHTML = "<i class='fa fa-close'>darf nicht leer sein</i>";
            psw_state = falsch;
        } sonst wenn (m == dieser.Wert.Länge) {
            psw_msg.innerHTML = "<i class='fa fa-close'> dürfen nicht dieselben Zeichen sein</i>";
            psw_state = falsch;
        } sonst wenn (diese.Wertlänge < 6 || diese.Wertlänge > 16) {
            psw_msg.innerHTML = "<i class='fa fa-close'>Länge sollte 6–16 Zeichen betragen</i>";
            psw_state = falsch;
        } sonst wenn (!re_n.test(dieser.Wert)) {
            psw_msg.innerHTML = "<i class='fa fa-close'>Darf nicht nur aus Zahlen bestehen</i>";
            psw_state = falsch;
        } sonst wenn (!re_t.test(dieser.Wert)) {
            psw_msg.innerHTML = "<i class='fa fa-close'>Darf nicht nur aus Buchstaben bestehen</i>";
            psw_state = falsch;
        } anders {
            psw_msg.innerHTML = "<i class='fa fa-check-square'>OK!</i>";
            psw_state = wahr;
        }
        Prüfformular();
    }


    psw2.onblur = Funktion() {
        wenn (psw2.value != psw.value) {
            psw2_msg.innerHTML = "<i class='fa fa-close'>Die beiden Eingaben sind inkonsistent</i>";
            psw2_state = falsch;
        } anders {
            psw2_msg.innerHTML = "<i class='fa fa-check-square'>OK!</i>";
            psw2_state = wahr;
        }
        Prüfformular();
    }

    email.onblur = Funktion() {
        var re_e = /^[\w_\-\.]+@[\w]+\.([\w]{2,4})$/g;
        wenn (!re_e.test(dieser.Wert)) {
            email_msg.innerHTML = "<i class='fa fa-close'>Bitte geben Sie das richtige E-Mail-Format ein</i>";;
            E-Mail-Status = falsch;
        } anders {
            email_msg.innerHTML = "<i class='fa fa-check-square'>OK!</i>";
            E-Mail-Status = wahr;
        }
        Prüfformular();
    }
    Funktion Prüfformular() {
        wenn (oName_state && oName_state && psw_state && psw2_state) {
            registerbtn.removeAttribute("deaktiviert");
            // registerbtn.className+=" "+"readySubmit";
            $("#submit").addClass("bereitsSubmit");
        } anders {
            registerbtn.setAttribute("deaktiviert", "");
            //registerbtn.className = registerbtn.className.replace( neuer RegExp( "(\\s|^)" + "readySubmit" + "(\\s|$)" ), " " );  
            // registerbtn.className = registerbtn.className.replace( /(\s|^)readySubmit(\s|$)/g, " " );       
            $("#submit").removeClass("bereitsSubmit");
        }
    }
}

Funktion getLength(str) {
    return str.replace(/[^\x00-xff]/g, "xx").Länge;
}

Funktion findStr(str, n) {
    vartemp = 0;
    für (var i = 0; i < str.length; i++) {
        wenn (str.charAt(i) == n) {
            Temperatur++;
        }
    }
    Rücklauftemperatur;
}

Teil des HTML-Codes

<Formular-ID="Formular">
   <div Klasse="Namensfeld">
        <label>Benutzername</label>
        <input type="text" id="name" Autofokus erforderlich/><span class="msg name_msg"><i class="fa fa-lightbulb-o"> 5–25 Zeichen, 1 chinesisches Zeichen sind zwei Zeichen, es wird empfohlen, einen chinesischen Mitgliedsnamen zu verwenden</i></span>
        <div id="count">0 Zeichen</div>
   </div>
   <div class="E-Mail-Feld" erforderlich>
        <label>Briefkasten</label>
       <input type="text" id="email" /><span class="msg email_msg"></span>
       </div>
   <div class="pwd-field" erforderlich>
        <label>Passwort</label>
        <input type="Passwort" id="psw" /><span class="msg psw_msg"></span>
        <div class="Intensität">
            <span class="active">Schwach</span><span>Mittel</span><span>Stark</span>
       </div>
   </div>
   <div class="pwd2-field" erforderlich>
        <label>Passwort bestätigen</label>
        <input type="password" id="psw2" disabled="" /><span class="msg psw2_msg">Bitte erneut eingeben</span>
   </div>
   <button type="submit" id="submit" disabled="" class="submitBtn">Registrieren</button>
</form>

CSS-Teil

.Namensfeld {
    Rand oben: 10px
}

.E-Mail-Feld {
    Rand oben: 3px
}

.pwd-Feld {
    Rand oben: 10px
}

.pwd2-Feld {
    Rand oben: 10px
}

.label registrieren {
    schweben: links;
    Breite: 80px;
    Rand rechts: 10px;
    Textausrichtung: rechts
}

.register .name_msg,
.register .psw_msg,
.register .psw2_msg,
.registrieren .email_msg {
    Rand links: 10px;
    Anzeige: keine
}

.Intensität,
#zählen {
    Polsterung links: 90px;
    Rand oben: 3px
}

#zählen {
    Sichtbarkeit: versteckt;
    Farbe: #999;
    Schriftgröße: 12px
}

.Intensitätsspanne {
    Anzeige: Inline-Block;
    Hintergrund: #FBAA51;
    Breite: 55px;
    Höhe: 20px;
    Textausrichtung: zentriert
}

.Intensität .aktiv {
    Hintergrund: rgba(0, 128, 0, 0,61)
}

.registrieren .submitBtn {
    Breite: 163px;
    Rand: 10px 0 0 90px
}

#einreichen {
    Farbe: #555
}

Zusammenfassen

Dies ist das Ende dieses Artikels über die Implementierung einer regulären Formularvalidierung mit nativem JS (wird erst nach der Validierung übermittelt). Weitere Informationen zur regulären Formularvalidierung mit JS finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!

Das könnte Sie auch interessieren:

Beispiel für die Validierung eines JavaScript-Formulars
Natives JS zur Implementierung der Formularvalidierungsfunktion
Implementieren der Formularvalidierung mit JavaScript
Vollständiges Beispiel für eine einfache JS-Formularvalidierungsfunktion
Beispielcode für die Verwendung von JavaScript zur Validierung eines Formulars mithilfe von Formularelementen
JavaScript implementiert Formularregistrierung, Formularvalidierung und Operatorfunktionen
Ein vollständiges Beispiel für eine einfache Formularvalidierung, implementiert durch JS
Einfaches Beispiel einer mit JS implementierten Formularvalidierungsfunktion
Beispiel für die Validierung eines grundlegenden JavaScript-Formulars (reine Js-Implementierung)
Implementieren der Formularvalidierung mit JavaScript

<<: Zusammenfassung der Berechtigungsprobleme bei gespeicherten MySQL-Prozeduren

>>: So starten/stoppen Sie den Tomcat-Server in Java

JavaScript-Implementierung des klassischen Schlangenspiels

Natives JS implementiert regelmäßige Validierung des Formulars (Senden erst nach Validierung)

Folgende Funktionen sind implementiert:

Wichtige Punkte:

Der vollständige Code lautet wie folgt

Zusammenfassen

JavaScript-Implementierung des klassischen Schlangenspiels

Erfahrung im Webdesign

Vue+Bootstrap realisiert ein einfaches Studentenverwaltungssystem

Detaillierte Erläuterung der Nginx-Konfigurationsparameter auf Chinesisch (Lastausgleich und Reverse-Proxy)

Apple Mac OS X in VMWare12 installieren – Grafik-Tutorial

Die Idee und der Prozess von Vue zur Realisierung der Funktion zum Speichern von Konto und Passwort

mysql Backup-Skript und halten Sie es für 7 Tage

Chrome überwacht Cookie-Änderungen und weist Werte zu

Das WeChat-Applet implementiert das Scrollen von Text

CSS implementiert einen Popup-Fenstereffekt mit einer Maskenebene, die geschlossen werden kann

Artikel empfehlen

Informationen zum Textumbruchproblem bei IE-Labels (LI)

Lösen Sie das Problem, dass MySQL „not in“ verwendet, um Nullwerte einzuschließen

js, um den Popup-Effekt zu erzielen

Reine JS-Methode zum Exportieren von Tabellen nach Excel

Detaillierter Prozess zum Erstellen eines NFS-Servers mithilfe des NFS-Ganesha-Image von Docker

Häufige Browserkompatibilitätsprobleme (Zusammenfassung)

So handhaben Sie lange Daten bei der Anzeige in HTML

Detaillierte Erklärung der Lösung für das zu langsame Docker-Compose

Verwendung von Docker UI, einem Docker-Visualisierungsverwaltungstool

Docker-Pull-Image und Tag-Vorgang Pull | Tag

Tutorial zur HTML-Tabellenauszeichnung (29): Farbattribut für helle Zellenränder BORDERCOLORLIGHT

Was macht die MySQL-Datenbank?

8 leistungsstarke Techniken zum Erstellen von HTML-Webseiten

Einführung in die Verwendung gängiger XHTML-Tags

So stellen Sie einzelne Tabellendaten mithilfe der vollständigen MySQL-Datenbanksicherungsdaten wieder her