HTML-Formularvalidierung

Bei der HTML-Formularvalidierung handelt es sich um einen Prozess zur Untersuchung des Inhalts der HTML-Formularseite, um zu verhindern, dass fehlerhafte Daten an den Server gesendet werden. Dieser Prozess ist ein wichtiger Schritt bei der Entwicklung von HTML-basierten Webanwendungen, da er die Qualität der Webseite oder Webanwendung leicht verbessern kann. Es gibt zwei Möglichkeiten, die HTML-Formularvalidierung durchzuführen: die Verwendung der integrierten HTML5-Funktionalität und die Verwendung von JavaScript.

HTML-Formularvalidierung

Es gibt hauptsächlich zwei Möglichkeiten, wie die HTML-Formularvalidierung durchgeführt werden kann,

• Verwendung der integrierten HTML5-Funktionalität
• Verwendung von JavaScript

1. Verwendung der integrierten HTML5-Funktionalität

HTML5 bietet diese Funktion der Formularvalidierung ohne Verwendung von JavaScript. Den Formularelementen werden Validierungsattribute hinzugefügt, die die Formularvalidierung für uns automatisch ermöglichen. Mithilfe von Validierungsattributen können wir verschiedene Arten von Regeln für unsere Formularelemente festlegen. Sie ermöglichen es uns, die Länge der Daten festzulegen, eine Beschränkung der Datenwerte festzulegen usw.

Sehen wir uns ein einfaches Beispiel für die Validierung von HTML-Formularen mithilfe integrierter Elemente zur Formularvalidierung an und fahren wir dann mit der Validierung von HTML-Formularen mithilfe von JavaScript fort.

Beispiel

Formularvalidierung mithilfe des HTML5-Validierungsattributs – In diesem Beispiel verwenden wir das erforderliche Formularvalidierungs-Tag, das dazu führt, dass Daten in diesem Feld obligatorisch eingegeben werden müssen. andernfalls wird das Formular nicht übermittelt. Unten ist der Codeausschnitt dafür, zusammen mit etwas Stil eines Webformulars.

<style>
.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;
}
</style>


<div class="formData">
<form action="#">
Name: <input type="text" name="name" required>
<input type="submit">
</form>
</div>

Wir haben also ein sehr einfaches Webformular mit nur einem Eingabedatenfeld als „Name“. Bitte beachten Sie, dass wir im Eingabe-Tag-Element das erforderliche Schlüsselwort verwendet haben.

Ausgabe:

Versuchen wir, das Formular abzusenden, ohne einen Wert in das Namensfeld einzugeben. Beim 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 wurde und von HTML selbst bereitgestellt wird.

Wie das von HTML bereitgestellte erforderliche Attribut stehen verschiedene Formular-Tags zur Verwendung zur Verfügung. Unten finden Sie eine Liste einiger Formularvalidierungs-Tags,

• minlength: Wird verwendet, um die erforderliche Mindestlänge eines Elements festzulegen
• maxlength: Wird verwendet, um die erforderliche maximale Länge eines Elements festzulegen
• Muster: Wird zum Definieren eines Regex-Ausdrucks verwendet

2. Verwendung 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; Außerdem werden einige der in HTML5 bereitgestellten Tags in den älteren Versionen von Internet Explorer nicht unterstützt. JavaScript wird seit langem zur Formularvalidierung verwendet.

Bei der JavaScript-Formularvalidierung definieren wir grundsätzlich Funktionen, um die Daten zu validieren, bevor sie an den Server übermittelt werden. Wir können jede Logik implementieren, die zum Erreichen der Validierungsregeln erforderlich ist. JavaScript ist auf diese Weise flexibler, da es keine Einschränkungen bei der Definition von Regeln gibt. Im Vergleich zur Formularvalidierung mithilfe integrierter Tags sind jedoch JavaScript-Kenntnisse erforderlich, um dies zu implementieren.

Sehen wir uns das Beispiel der Formularvalidierung mit JavaScript an. Wir werden das gleiche Beispiel des Formulars mit nur einer Eingabe als Namenselement implementieren.

Beispiel

<style>
.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;
}
</style>


<div class="formData">
<form name="simpleForm" action="#" onsubmit="return validateForm()">
Name: <input type="text" name="name">
<input type="submit">
</form>
<p class="errorMessage top-arrow"> </p>
</div>
<script>
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;
}
}
</script>

Aus dem vorherigen Beispiel haben wir das erforderliche Tag aus dem Formularelement „name“ entfernt. Stattdessen haben wir im Formularelement ein Tag „onsubmit“ hinzugefügt. Wie bereits erwähnt, werden wir eine Funktion zur Validierung schreiben, für die das <script> Tag wird hinzugefügt.</script>

Wir haben eine Funktion namens „validateForm()“ geschrieben, die die Validierung durchführt. Wir implementieren die gleiche Regel zur Überprüfung, ob die eingegebenen Daten im Namensfeld leer sind oder nicht. Die Logik zur Überprüfung besteht darin, dass bei einem Klick auf die Schaltfläche „Senden“ diese Funktion aufgerufen wird und der eingegebene Wert überprüft wird, 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 null sind, wird dem Benutzer eine Fehlermeldung angezeigt.

Ausgabe:

Wenn wir versuchen, das Formular ohne Eingabe von Daten abzusenden, sollte auf dem Bildschirm eine Fehlermeldung angezeigt werden. Wie aus dem Beispiel hervorgeht, haben wir die Fehlermeldung auf die gleiche Art und Weise wie möglich gestaltet.

Ausgabe mit leeren Daten:

Fazit – HTML-Formularvalidierung

Wir haben also ein sehr einfaches Beispiel für die Formularvalidierung auf Kundenseite gesehen. Grundsätzlich gibt es zwei Möglichkeiten, eine HTML-Formularvalidierung durchzuführen. Die erste besteht darin, die in HTML5 bereitgestellte integrierte Funktionalität zu nutzen, die zweite darin, JavaScript zu verwenden. Mit der ersten Methode müssen wir keinen zusätzlichen Code schreiben.

Das obige ist der detaillierte Inhalt vonHTML-Formularvalidierung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!