Natives JS zur Implementierung der Formularvalidierungsfunktion

Natives JS zur Implementierung der Formularvalidierungsfunktion

Die Formularvalidierung ist eine der häufigsten Funktionen des Web-Frontends und auch eine grundlegende Fähigkeit der Front-End-Entwicklung. Die eigenständige Entwicklung einer Formularvalidierung kann auch dazu beitragen, Ihr Verständnis der Zeichenfolgenverarbeitung und regulärer Ausdrücke zu vertiefen.

Die grundlegende Formularüberprüfung umfasst: Buchstabenüberprüfung, Zahlenüberprüfung, Buchstaben- und Zahlenüberprüfung, Überprüfung chinesischer Schriftzeichen, Kennwortüberprüfung, Datumsüberprüfung, Mobiltelefonüberprüfung, E-Mail-Überprüfung, Kennwortüberprüfung usw.

Schreiben wir nun diese Bestätigungscodes fertig. Sehen wir uns zunächst an, wie die Buchstaben überprüft werden. Schreiben Sie zuerst den erforderlichen HTML-Code, erstellen Sie ein Formularelement mit der ID „formContainer“, fügen Sie ein Textfeld und eine Schaltfläche hinzu, die die englischen Buchstaben überprüfen müssen, und nach dem Textfeld wird ein Span-Element benötigt, um den Eingabeaufforderungstext zu speichern. Wie unten dargestellt:

<form action="" class="form_Box" id="formContainer">
 <dl>
  <dt>Englische Buchstaben:</dt>
  <dd><input type="text" id="verifyEn"><span></span></dd>
  <dd>
  <input type="submit" value="Senden" class="btn senden">
  <input Typ="reset" Wert="Zurücksetzen" Klasse="btn zurücksetzen">
  </dd>
 </dl>
 </form>

Bei der Entwicklung kann eine schrittweise Analyse der Funktionen und eine anschließende Implementierung dabei helfen, den Überblick zu behalten.

1. Holen Sie sich die Formularelemente und Textfeldelemente wie folgt:

var eFormContainer = document.getElementById('formContainer');
var eVerifyEn = document.getElementById('verifyEn');

2. Binden Sie das Übermittlungsereignis an das Formularelement, um eine Überprüfung durchzuführen, wenn auf die Schaltfläche „Senden“ geklickt wird.

eFormContainer.addEventListener('senden',Funktion(Ereignis){
 
});

Dieses Beispiel erfordert, dass bei erfolgreicher Überprüfung eine Eingabeaufforderung angezeigt wird, die angibt, dass die Überprüfung erfolgreich war. Wenn die Überprüfung fehlschlägt, wird der Cursor in das Textfeld positioniert und hinter dem Textfeld wird eine Eingabeaufforderung angezeigt, die angibt, dass die Überprüfung fehlgeschlagen ist. Sehen wir uns als Nächstes an, wie dies in der Funktion zum Senden von Ereignissen funktioniert.

3. Deklarieren Sie zunächst die zugehörigen Variablen in der Funktion und rufen Sie den Wert des Textfelds ab. Mit der Variable „bPass“ wird ermittelt, ob die Überprüfung bestanden werden kann. Die Variable „sPrompt“ ist der Eingabeaufforderungstext und die Variable „sValue“ ist der Wert des Textfelds. Wie unten dargestellt:

eFormContainer.addEventListener('senden',Funktion(Ereignis){
 var bPass = false;
 var sPrompt = '';
 var sValue = eVerifyEn.value;
});

4. Lassen Sie nicht zu, dass Textfelder leer bleiben. Bestimmen Sie, ob sValue eine leere Zeichenfolge ist. Wenn dies der Fall ist, zeigen Sie nach dem Textfeld eine Eingabeaufforderung an und aktivieren Sie das Textfeld. Dies ist auch erforderlich, um nachfolgende Vorgänge und Standardverhalten zu verhindern. Der Code lautet wie folgt:

eFormContainer.addEventListener('senden',function(){
 /* … */
 
 wenn(sValue.trim()==''){
  //Ändern Sie den Eingabeaufforderungstext sPrompt = 'Englische Buchstaben dürfen nicht leer sein!';
  //Der Cursor befindet sich im Buchstabentextfeld eVerifyEn.focus();
  //Eingabeaufforderungstext nach dem Textfeld anzeigen //Das übergeordnete Element des Textfelds abrufen let eParent = eVerifyEn.parentElement;
  //Holen Sie sich das Span-Element, das die Eingabeaufforderung speichert let eSpan = eParent.getElementsByTagName('span')[0];
  //Eingabeaufforderung zum Span-Element hinzufügen eSpan.innerHTML = sPrompt;
  //Formularübermittlung verhindern event.preventDefault();
  //Verhindert die Ausführung des nachfolgenden Codes return;
 }
 
});

5. Bestimmen Sie, ob der Eingabewert den Regeln entspricht, d. h. nur englische Buchstaben und keine anderen Zeichen enthält. Deklarieren Sie hier einen regulären Ausdruck, um zu bestimmen, ob es sich allesamt um englische Buchstaben handelt. Wie unten dargestellt:

eFormContainer.addEventListener('senden',function(){
 /* … */
 
 //Regulären Ausdruck deklarieren und prüfen, ob der String nur aus englischen Buchstaben besteht let reg = /^[a-zA-Z]+$/;
 bPass = reg.test(sValue);
 
});

6. Basierend auf dem Ergebnis des regulären Ausdrucks wird die Übermittlung weitergeleitet oder blockiert.

eFormContainer.addEventListener('senden',function(){
 /* … */
 
 wenn(bPass){
  //Eingabeaufforderung mit Warnmeldung (,,Überprüfung bestanden‘);
 }anders{
  //Prompttext ändern sPrompt = 'Es können nur englische Buchstaben eingegeben werden!';
  //Der Cursor befindet sich im Buchstabentextfeld eVerifyEn.focus();
  //Eingabeaufforderungstext nach dem Textfeld anzeigen //Das übergeordnete Element des Textfelds abrufen let eParent = eVerifyEn.parentElement;
  //Holen Sie sich das Span-Element, das die Eingabeaufforderung speichert let eSpan = eParent.getElementsByTagName('span')[0];
  //Eingabeaufforderung zum Span-Element hinzufügen eSpan.innerHTML = sPrompt;
  //Formularübermittlung verhindern event.preventDefault();
 }
 
});

7. Wenn Sie Inhalt in das Textfeld eingeben, sollten Sie die folgende Eingabeaufforderung löschen, wie unten gezeigt:

//Binden Sie das Eingabeereignis an das eFormContainer-Element und delegieren Sie alle Eingabeereignisse der Textfelder an das eFormContainer-Element.
 // Der Vorteil hierbei besteht darin, dass Sie nicht jedem Textfeld Ereignisse hinzufügen müssen.
 eFormContainer.addEventListener('Eingabe',Funktion(Ereignis){
 // Aktuelles Textfeld abrufen let eInput = event.target;
 //Holen Sie sich das übergeordnete Element des Textfelds let eParent = eInput.parentElement;
 //Holen Sie sich das Span-Element, das die Eingabeaufforderung speichert let eSpan = eParent.getElementsByTagName('span')[0];
 // Eingabeaufforderung löschen eSpan.innerHTML = '';
 });

Der vollständige Javascript-Code lautet derzeit wie folgt:

Funktion fnFormVerify(){
 // Formularelement abrufen var eFormContainer = document.getElementById('formContainer');
 // Textfeld für Bestätigungsschreiben abrufen var eVerifyEn = document.getElementById('verifyEn');
 // Binden Sie das Submit-Ereignis an das Formularelement eFormContainer.addEventListener('submit',function(){
  //Deklarieren Sie die Variable bPass, um zu bestimmen, ob die Überprüfung bestanden wurde. var bPass = false;
  //Deklarieren Sie die Variable sPrompt für den Eingabeaufforderungstext var sPrompt = '';
  // Holen Sie sich den Wert des Buchstabentextfelds, stellen Sie sicher, dass es nicht leer ist, und bestimmen Sie dann, ob der Wert nicht-englische Buchstaben enthält. Der Code lautet wie folgt:
  var sValue = eVerifyEn.value;
  // Stellen Sie sicher, dass es nicht leer ist, wenn (sValue.trim() == '') {
  //Ändern Sie den Eingabeaufforderungstext sPrompt = 'Englische Buchstaben dürfen nicht leer sein!';
  //Der Cursor befindet sich im Buchstabentextfeld eVerifyEn.focus();
  //Eingabeaufforderungstext nach dem Textfeld anzeigen //Das übergeordnete Element des Textfelds abrufen let eParent = eVerifyEn.parentElement;
  //Holen Sie sich das Span-Element, das die Eingabeaufforderung speichert let eSpan = eParent.getElementsByTagName('span')[0];
  //Eingabeaufforderung zum Span-Element hinzufügen eSpan.innerHTML = sPrompt;
  //Formularübermittlung verhindern event.preventDefault();
  //Verhindert die Ausführung des nachfolgenden Codes return;
  }

  //Regulären Ausdruck deklarieren und prüfen, ob der String nur aus englischen Buchstaben besteht let reg = /^[a-zA-Z]+$/;
  bPass = reg.test(sValue);
  wenn(bPass){
  //Eingabeaufforderung mit Warnmeldung (,,Überprüfung bestanden‘);
  }anders{
  //Prompttext ändern sPrompt = 'Es können nur englische Buchstaben eingegeben werden!';
  //Der Cursor befindet sich im Buchstabentextfeld eVerifyEn.focus();
  //Eingabeaufforderungstext nach dem Textfeld anzeigen //Das übergeordnete Element des Textfelds abrufen let eParent = eVerifyEn.parentElement;
  //Holen Sie sich das Span-Element, das die Eingabeaufforderung speichert let eSpan = eParent.getElementsByTagName('span')[0];
  //Eingabeaufforderung zum Span-Element hinzufügen eSpan.innerHTML = sPrompt;
  //Formularübermittlung verhindern event.preventDefault();
  }
 });

 //Binden Sie das Eingabeereignis an das eFormContainer-Element und delegieren Sie alle Eingabeereignisse der Textfelder an das eFormContainer-Element.
 // Der Vorteil hierbei besteht darin, dass Sie nicht jedem Textfeld Ereignisse hinzufügen müssen.
 eFormContainer.addEventListener('Eingabe',Funktion(Ereignis){
  // Aktuelles Textfeld abrufen let eInput = event.target;
  //Holen Sie sich das übergeordnete Element des Textfelds let eParent = eInput.parentElement;
  //Holen Sie sich das Span-Element, das die Eingabeaufforderung speichert let eSpan = eParent.getElementsByTagName('span')[0];
  // Eingabeaufforderung löschen eSpan.innerHTML = '';
 });
 }
 fnFormVerify();

Der Effekt ist wie unten dargestellt:

Dann müssen wir auch die digitale Verifizierung, Buchstaben- und Zahlenverifizierung, Verifizierung chinesischer Schriftzeichen, Passwortverifizierung, Datumsverifizierung, Mobiltelefonverifizierung, E-Mail-Verifizierung, Passwort usw. durchführen. Wenn jede Überprüfung auf diese Weise geschrieben wird, ist dies umständlich und es entsteht mehr Code. Daher ist es notwendig, eine Zeichenfolgenüberprüfungsfunktion zu kapseln und das Überprüfungsergebnis zurückzugeben. Beim Absenden wird jedes Textfeld der Reihe nach aufgerufen.

Fügen Sie die folgenden HTML-Elemente hinzu:

<form action="" class="form_Box" id="formContainer">
 <dl>
 <dt>Englische Buchstaben:</dt>
 <dd><input type="text" id="verifyEn"><span></span></dd>
 <dt>Englisch und Zahlen:</dt>
 <dd><input type="text" id="verifyEnNum"><span></span></dd>
 <dt>Nummer:</dt>
 <dd><Eingabetyp="Text" id="Verifizierungsnummer"><span></span></dd>
 <dt>Chinesische Schriftzeichen:</dt>
 <dd><Eingabetyp="Text" id="verifyCn"><span></span></dd>
 <dt>Datum:</dt>
 <dd><input type="text" id="verifyDate"><span></span></dd>
 <dt>E-Mail:</dt>
 <dd><input type="text" id="verifyEmail"><span></span></dd>
 <dt>Mobiltelefon:</dt>
 <dd><input type="text" id="verifyPhone"><span></span></dd>
 <dt>Passwort:</dt>
 <dd><input type="Passwort" id="verifyPwd"><span></span></dd>
 <dt>Passwort bestätigen:</dt>
 <dd><input type="Passwort" id="verifyForPwd"><span></span></dd>
 <dt></dt>
 <dd>
  <input type="submit" value="Senden" class="btn senden">
  <input Typ="reset" Wert="Zurücksetzen" Klasse="btn zurücksetzen">
 </dd>
 </dl>
</form>

Ändern Sie den js-Code erneut:

1. Holen Sie sich die Formularelemente und alle Textfelder wie folgt:

// Formularelement abrufen var eFormContainer = document.getElementById('formContainer');
 // Textfeld für Bestätigungsschreiben abrufen var eVerifyEn = document.getElementById('verifyEn');
 // Englische und digitale Textfelder abrufen var eVerifyEnNum = document.getElementById('verifyEnNum');
 // Digitales Textfeld abrufen var eVerifyNum = document.getElementById('verifyNum');
 // Textfeld für chinesische Zeichen abrufen var eVerifyCn = document.getElementById('verifyCn');
 // Datumstextfeld abrufen var eVerifyDate = document.getElementById('verifyDate');
 // E-Mail-Textfeld abrufen var eVerifyEmail = document.getElementById('verifyEmail');
 //Telefontextfeld abrufen var eVerifyPhone = document.getElementById('verifyPhone');
 // Textfeld für das Kennwort abrufen var eVerifyPwd = document.getElementById('verifyPwd');
 // Textfeld zur Kennwortbestätigung abrufen var eVerifyForPwd = document.getElementById('verifyForPwd');

2. Kapseln Sie eine Validierungsfunktion ein und übergeben Sie drei Parameter: „elem“ ist das Textfeldelement, „reg“ ist der reguläre Ausdruck und „text“ ist das Eingabeaufforderungsschlüsselwort. Wie unten dargestellt:

Funktion fnVerify(Element,Reg,Text){
 //Die im Textfeld eingegebenen Zeichen abrufen var sValue = elem.value;
 //Holen Sie sich das übergeordnete Element des Textfelds let eParent = elem.parentElement;
 //Holen Sie sich das Span-Element, das die Eingabeaufforderung speichert let eSpan = eParent.getElementsByTagName('span')[0];

 //Beurteilen, ob das Textfeldzeichen leer ist, if (sValue.trim() == '') {
 //Der Cursor befindet sich im Textfeld elem.focus();
 //Den Eingabeaufforderungstext nach dem Textfeld anzeigen eSpan.innerHTML = Text + „Darf nicht leer sein!“;
 //Gibt false zurück
 gibt false zurück;
 }

 // Bestimmen Sie, ob die Zeichenfolge den Regeln entspricht if(reg.test(sValue)){
 //Wenn es übereinstimmt, gib true zurück
 gibt true zurück;
 }anders{
 //Der Cursor befindet sich im Textfeld elem.focus();
 //Den Eingabeaufforderungstext nach dem Textfeld anzeigen eSpan.innerHTML = Text + „Falsches Format!“;
 //Wenn es nicht übereinstimmt, geben Sie false zurück.
 gibt false zurück;
 }
}

3. Binden Sie das Submit-Ereignis wie folgt an das Formularelement:

eFormContainer.addEventListener('senden',Funktion(Ereignis){
 //Deklarieren Sie die Variable bPass, um zu bestimmen, ob die Überprüfung bestanden wurde. var bPass = false;
 
 //Textfeldformat einzeln überprüfen bPass = fnVerify(eVerifyEn,/^[a-zA-Z]+$/,'Englische Buchstaben') &&
   fnVerify(eVerifyEnNum,/^[a-zA-Z0-9]*$/,'Englisch und Zahlen') &&
   fnVerify(eVerifyNum,/^\d*$/,'Zahl') &&
   fnVerify(eVerifyCn,/^[\u0391-\uFFE5]+$/,'Chinesische Schriftzeichen') &&
   fnVerify(eVerifyDate,/^(\d{2}|\d{4})-\d{1,2}-\d{1,2}$/,'Datum') &&
   fnVerify(eVerifyEmail,/^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/,'E-Mail') &&
   fnVerify(eVerifyPhone,/^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+\d{8})$/,'Telefon') &&
   fnVerify(eVerifyPwd,/^[\w!@#$%^&*?\(\)]{6,16}$/,'Passwort');

 //Bestätigen Sie, dass das Passwort mit dem Passwort übereinstimmt, und fügen Sie eine separate Überprüfung hinzu, wenn (eVerifyPwd.value !== eVerifyForPwd.value) {
 //Das übergeordnete Element zur Bestätigung des Passworts abrufen let eParent = eVerifyForPwd.parentElement;
 //Holen Sie sich das prompte Span-Element let eSpan = eParent.getElementsByTagName('span')[0];
 //Eingabeaufforderungsfehler eSpan.innerHTML = „Das bestätigte Kennwort muss mit dem Kennwort übereinstimmen“;
 //Aktiviere das Eingabefeld zur Kennwortbestätigung eVerifyForPwd.focus();
 //Nachfolgende Operationen verhindern bPass = false;
 }

 wenn(bPass){
 //Eingabeaufforderung mit Warnmeldung (,,Überprüfung bestanden‘);
 event.preventDefault(); //Diese Zeile kann nicht für die eigentliche Arbeit verwendet werden. Sie wird hier verwendet, um das Standardverhalten des Formulars zu verhindern.
 }anders{
 //Formularübermittlung verhindern event.preventDefault();
 }
 
});

Es gibt noch ein weiteres Problem, das gelöst werden muss. Wenn Sie Inhalt in das Textfeld eingeben, sollten Sie die Eingabeaufforderung dahinter löschen. Andernfalls ist es ungewöhnlich, eine Fehlermeldung zu erhalten, selbst wenn die Eingabe korrekt ist.

4. Binden Sie das Eingabeereignis an das Element eFormContainer, um den Eingabeaufforderungstext während der Eingabe zu löschen.

eFormContainer.addEventListener('Eingabe',Funktion(Ereignis){
 // Aktuelles Textfeld abrufen let eInput = event.target;
 //Holen Sie sich das übergeordnete Element des Textfelds let eParent = eInput.parentElement;
 //Holen Sie sich das Span-Element, das die Eingabeaufforderung speichert let eSpan = eParent.getElementsByTagName('span')[0];
 // Eingabeaufforderung löschen eSpan.innerHTML = '';
});

An diesem Punkt ist im Grunde eine vollständige Formularvalidierungsseite fertiggestellt. In diesem Beispiel-Tutorial wird das Ereignis „Formular übermitteln“ verwendet. In der aktuellen tatsächlichen Entwicklung kommt es jedoch selten vor, dass das Formular auf diese Weise direkt übermittelt wird. Diese Aussage dient dazu, eine Irreführung der Leser zu vermeiden.

Oben finden Sie Einzelheiten zur Implementierung der Formularvalidierung in nativem JS. Weitere Informationen zur JS-Formularvalidierung finden Sie in den anderen verwandten Artikeln auf 123WORDPRESS.COM!

Das könnte Sie auch interessieren:
  • Beispiel für die Validierung eines JavaScript-Formulars
  • Natives JS implementiert regelmäßige Validierung des Formulars (Senden erst nach Validierung)
  • 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

<<:  Redo-Dateiwartungsmethode der InnoDB-Engine

>>:  Eine kurze Diskussion zum Problem von Daten mit Nullwerten in der MySQL-Datenbank

Artikel empfehlen

Vue – Erste Schritte mit der Wettervorhersage

In diesem Artikelbeispiel wird der spezifische Co...

Best Practices-Handbuch für partitionierte MySQL-Tabellen

Vorwort: Partitionierung ist ein Tabellenentwurfs...

So drücken Sie relative Pfade in Linux aus

Wenn Ihr aktueller Pfad beispielsweise /var/log i...

So implementieren Sie CSS, um Auslassungspunkte anzuzeigen, wenn einzeiliger oder mehrzeiliger Text überläuft

1. Einreihiger Überlauf 1. Wenn eine einzelne Zei...

Vue implementiert eine kleine Countdown-Funktion

In vielen Projekten muss eine Countdown-Funktion ...

Beispiel für die Installation und Bereitstellung von Docker unter Linux

Nachdem Sie den folgenden Artikel gelesen haben, ...

MySQL-Optimierung: Join statt Unterabfrage verwenden

Verwenden Sie JOIN anstelle von Unterabfragen MyS...

Zwei Boxmodelle in Webseiten (W3C-Boxmodell, IE-Boxmodell)

Es gibt zwei Arten von Webseiten-Boxmodellen: 1: S...

Freigabe der schnellen Wiederherstellungslösung für große MySQL-SQL-Dateien

Vorwort Bei der Verwendung einer MySQL-Datenbank ...

Detaillierte Erläuterung der MySQL-Limitnutzung und Leistungsanalyse von Paging-Abfrageanweisungen

Beschränken Sie die Nutzung Wenn wir Abfrageanwei...

Lösen Sie das Problem, nachdem Sie --subnet zum Docker-Netzwerk hinzugefügt haben.

Nachdem Sie –subnet zum Erstellen des Docker-Netz...

Detaillierte Erläuterung der Live-Übertragungsfunktion von Vue

Vor kurzem hat das Unternehmen zufällig Live-Über...

Detaillierte Erläuterung der grundlegenden Verwaltung der KVM-Virtualisierung in CentOS7

1. Installieren Sie die KVM-Virtualisierung :::::...

Web-Kenntnisse: Lösung für die Koexistenz mehrerer IE-Versionen IETester

Meine Empfehlung Lösung für die Koexistenz mehrer...

Detaillierte Erläuterung der Verwendung der Drag & Drop-Zoom-Komponente für Vue-Bilder

Die spezifische Verwendung der Drag & Drop-Zo...