Übersicht über die HTML-Formularüberprüfung
Webformulare sind häufig der am häufigsten verwendete und wichtigste Bestandteil von Webanwendungen. Bei der Formularüberprüfung werden die vom Benutzer eingegebenen Daten anhand der vordefinierten Regeln überprüft. Die Formularvalidierung kann entweder clientseitig oder serverseitig erfolgen. Die HTML-Formularvalidierung ist die Form der clientseitigen Validierung, bei der die Validierung der Daten durchgeführt wird, bevor die Daten an den Server gesendet werden. Die Validierung von HTML-Formularen ist wichtig und nützlich, da sie die clientseitige Benutzeroberfläche und die Leistung der Webanwendung verbessert.
HTML-Formularüberprüfung
Es gibt hauptsächlich zwei Möglichkeiten, wie die Validierung von HTML-Formularen durchgeführt werden kann:
- Verwendung der integrierten HTML5-Funktionalität
- JavaScript verwenden
1. Verwenden der integrierten HTML5-Funktionalität
HTML5 bietet diese Funktion zur Formularüberprüfung ohne Verwendung von JavaScript. Formularelemente werden mit Validierungsattributen versehen, die die Formularvalidierung für uns automatisch ermöglichen. Mit Validierungsattributen können wir verschiedene Arten von Regeln für unsere Formularelemente angeben. Sie ermöglichen es uns, die Länge der Daten festzulegen, die Werte der Daten einzuschränken usw.
Sehen wir uns ein einfaches Beispiel für die Validierung von HTML-Formularen mit integrierten Formularvalidierungselementen an und fahren dann mit der Validierung von HTML-Formularen mit JavaScript fort.
Beispiel
Formularvalidierung mit HTML5-Validierungsattribut - In diesem Beispiel wird das erforderliche Formularvalidierungs-Tag verwendet, wodurch die Eingabe von Daten in diesem Feld obligatorisch wird. Andernfalls wird das Formular nicht gesendet. Unten ist das Code-Snippet für dasselbe zusammen mit einem Styling eines Webformulars.
.formData (
padding-top: 20px;
padding-bottom: 20px;
padding-left: 10px;
background-color: darkcyan;
)
form (
font-size: 30px;
)
form input (
margin-left: 10px;
font-size: 15px;
)
Name:
Wir haben also ein sehr einfaches Webformular mit nur einem Eingabedatenfeld als "Name". Bitte beachten Sie, dass wir das erforderliche Schlüsselwort im Eingabe-Tag-Element verwendet haben.
Ausgabe :
Versuchen wir, das Formular abzusenden, ohne einen Wert in das Namensfeld einzugeben. Nach dem Absenden erhalten Sie die Fehlermeldung "Bitte füllen Sie dieses Feld aus" und das Formular wird nicht gesendet.
Ausgabe mit leeren Daten
Es ist also ersichtlich, dass die Fehlermeldung nicht von uns hinzugefügt wird und von HTML selbst bereitgestellt wird.
Genau wie das erforderliche Attribut, das von HTML bereitgestellt wird, stehen verschiedene Formular-Tags zur Verfügung. Unten finden Sie eine Liste einiger Formularvalidierungs-Tags.
- minlength: Dient zum Festlegen der erforderlichen Mindestlänge eines Elements
- maxlength: Wird verwendet, um die erforderliche maximale Länge eines Elements festzulegen
- Muster: Wird verwendet, um einen regulären Ausdruck zu definieren
2. Verwenden von JavaScript
JavaScript wird häufig für die Validierung von HTML-Formularen verwendet, da es mehr Möglichkeiten zum Anpassen und Festlegen der Validierungsregeln bietet. Einige der in HTML5 bereitgestellten Tags werden in älteren Versionen von Internet Explorer nicht unterstützt. JavaScript wird seit langem für die Formularvalidierung verwendet.
Bei der Validierung von JavaScript-Formularen definieren wir grundsätzlich Funktionen zur Validierung der Daten, bevor sie an den Server gesendet werden. Wir können jede Logik implementieren, die zum Erreichen der Validierungsregeln erforderlich ist. JavaScript ist auf diese Weise flexibler, da die Definition von Regeln nicht eingeschränkt ist. Es sind jedoch Kenntnisse in JavaScript erforderlich, um dies im Vergleich zur Formularvalidierung mit integrierten Tags zu implementieren.
Sehen wir uns das Beispiel der Formularüberprüfung mit JavaScript an. Wir werden das gleiche Beispiel des Formulars mit nur einer Eingabe als Namenselement implementieren.
Beispiel:
.formData (
padding-top: 20px;
padding-bottom: 20px;
padding-left: 10px;
background-color: darkcyan;
position: absolute;
width: 100%;
)
form (
font-size: 30px;
)
form input (
margin-left: 10px;
font-size: 15px;
)
.errorMessage (
background-color: white;
width: 143px;
padding-left: 10px;
padding-right: 10px;
padding-top: 5px;
padding-bottom: 5px;
margin-left: 107px;
visibility: hidden;
border-radius: 10px;
position: relative;
float: left;
)
.errorMessage.top-arrow:after (
content: " ";
position: absolute;
right: 90px;
top: -15px;
border-top: none;
border-right: 10px solid transparent;
border-left: 10px solid transparent;
border-bottom: 15px solid white;
)
Name:
function validateForm() (
var nameVal = document.forms("simpleForm")("name").value;
if(nameVal == null || nameVal == "") (
document.getElementsByClassName( "errorMessage" )(0).style.visibility = "visible";
document.getElementsByClassName( "errorMessage" )(0).innerHTML = "Please Fill out this field";
return false;
) else (
return true;
)
)
Aus dem vorherigen Beispiel haben wir das erforderliche Tag aus dem Formularelement "name" entfernt. Stattdessen haben wir ein Tag onsubmit in das Formularelement eingefügt. Wie bereits erwähnt, schreiben wir eine Funktion zur Validierung, für die ein Tag hinzugefügt wird.
Wir haben eine Funktion namens validateForm () geschrieben, die die Validierung durchführt. Wir implementieren die gleiche Regel, um zu überprüfen, ob die im Namensfeld eingegebenen Daten leer sind oder nicht. Die Logik, um dies zu überprüfen, ist ein Klick auf die Schaltfläche "Senden". Diese Funktion wird aufgerufen und der eingegebene Wert wird daraufhin überprüft, ob er null oder leer ist. Die Funktion gibt true zurück, wenn die Daten nicht null oder leer sind. Wenn die Daten jedoch leer oder leer sind, wird dem Benutzer die Fehlermeldung angezeigt.
Ausgabe
Wenn wir versuchen, das Formular ohne Eingabe von Daten abzusenden, sollte die Fehlermeldung auf dem Bildschirm angezeigt werden. Wie aus dem Beispiel hervorgeht, haben wir die Fehlermeldung in gleicher Weise wie möglich gestaltet.
Ausgabe mit leeren Daten
Fazit - HTML-Formularvalidierung
Wir haben also ein sehr einfaches Beispiel für die Formularvalidierung auf der Clientseite gesehen. Es gibt hauptsächlich zwei Möglichkeiten, eine HTML-Formularüberprüfung durchzuführen. Erstens wird die in HTML5 integrierte Funktionalität verwendet, und zweitens wird JavaScript verwendet. Mit der ersten Methode müssen wir keinen zusätzlichen Code schreiben.
Empfohlene Artikel
Dies war eine Anleitung zur Validierung von HTML-Formularen. Hier diskutieren wir die Übersicht und zwei Möglichkeiten der HTML-Formularvalidierung, mit denen sie durchgeführt werden können. Sie können sich auch die folgenden Artikel ansehen, um mehr zu erfahren -
- HTML-Ereignisse
- Versionen von HTML
- HTML5-Elemente
- Anwendungen von HTML