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

Analyse der Implementierungsmethode zum Ändern des Standardnetzwerksegments von Docker

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

Analyse der Implementierungsmethode zum Ändern des Standardnetzwerksegments von Docker

Entwurf und Implementierung eines Supermarkt-Warenwirtschaftssystems auf Basis von Mysql+JavaSwing

Detaillierte Erläuterung der Methoden zur Überprüfung und Verwaltung von MySQL-Benutzerrechten

Eine kurze Analyse des Unterschieds zwischen statisch und selbst in PHP-Klassen

Miniprogramme ermöglichen die Auswahl von Produktattributen oder Spezifikationen

Ausführliche Diskussion über die automatische Inkrementierung von Primärschlüsseln in MySQL

Lösung für das img-Tag-Problem unter IE10

So wählen Sie zwischen MySQL CHAR und VARCHAR

So konvertieren Sie eine Spalte mit durch Kommas getrennten Werten in Spalten in MySQL

Beispielüberprüfung MySQL | Update-Feld mit demselben Wert zeichnet Binlog auf

Artikel empfehlen

So konfigurieren Sie SSH/SFTP und legen Berechtigungen unter dem Linux-Betriebssystem fest

Docker-Container greift auf MySQL-Operationen des Hosts zu

So löschen Sie den Timer elegant in Vue

Grundlegende Verwendung von benutzerdefinierten Anweisungen in Vue

Nützliche Codes zum Erstellen von Webseiten

Implementierungscode zum Erstellen von Screenshots mit HTML und zum Speichern als lokale Bilder

Vue implementiert horizontales Scrollen von Text im Laufschriftstil

Eine Zusammenfassung der Gründe, warum MySQL keinen Datumsfeldindex verwendet

Native JS realisiert einheitliche Bewegungen verschiedener Sportarten

Zusammenfassung der speicherbezogenen Parameter von MySQL 8.0

Einführung in die Cloud-native-Technologie Kubernetes (K8S)

Implementierungscode für den MySQL-Protokolltrigger

Detaillierte Erläuterung der MySQL-Datumszeichenfolgen-Zeitstempelkonvertierung

Unterschied zwischen HTML4 und HTML5: So fügen Sie einer Eingabe Fokusimplementierungscode hinzu

Installieren Sie ein CentOS-System basierend auf WindowsX Hyper-V