Heim > Artikel > Web-Frontend > HTML-Formularvalidierung
HTML-Formularvalidierung
- WBOYOriginal
- 2024-09-04 16:44:321250Durchsuche
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.
<!DOCTYPE html>
<html>
<head>
<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>
</head>
<body>
<div class = "formData" >
<form action = "#" >
Name: <input type = "text" name = "name" required>
<input type = "submit" >
</form>
</div>
</body>
</html>
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
<!DOCTYPE html>
<html>
<head>
<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>
</head>
<body>
<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>
</body>
</html>
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