Die Validierung von HTML-Formularen kann mit JavaScript erfolgen.
Wenn ein Formularfeld (fname) leer ist, gibt diese Funktion eine Meldung aus und kehrt zurück false, um zu verhindern, dass das Formular gesendet wird:
function validateForm() {
let x = document.forms["myForm"]["fname"].value;
if (x == "") {
alert("Name must be filled out");
return false;
}
}
Die Funktion kann beim Absenden des Formulars aufgerufen werden:
<form name="myForm" action="/action_page.php" onsubmit="return validateForm()"
method="post">
Name: <input type="text" name="fname">
<input type="submit" value="Submit">
</form>
Probieren Sie es selbst aus →
<!DOCTYPE html>
<html>
<head>
<script>
function validateForm() {
let x = document.forms["myForm"]["fname"].value;
if (x == "") {
alert("Name must be filled out");
return false;
}
}
</script>
</head>
<body>
<h2>JavaScript Validation</h2>
<form name="myForm" action="/action_page.php" onsubmit="return validateForm()" method="post">
Name: <input type="text" name="fname">
<input type="submit" value="Submit">
</form>
</body>
</html>
JavaScript wird häufig zur Validierung numerischer Eingaben verwendet:
Bitte geben Sie eine Zahl zwischen 1 und 10 ein
Probieren Sie es selbst aus →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Validation</h2>
<p>Please input a number between 1 and 10:</p>
<input id="numb">
<button type="button" onclick="myFunction()">Submit</button>
<p id="demo"></p>
<script>
function myFunction() {
// Get the value of the input field with id="numb"
let x = document.getElementById("numb").value;
// If x is Not a Number or less than one or greater than 10
let text;
if (isNaN(x) || x < 1 || x > 10) {
text = "Input not valid";
} else {
text = "Input OK";
}
document.getElementById("demo").innerHTML = text;
}
</script>
</body>
</html>
Die Validierung von HTML-Formularen kann automatisch vom Browser durchgeführt werden:
Wenn ein Formularfeld (fname) leer ist, verhindert das Attribut erforderlich
, dass dieses Formular vorhanden ist eingereicht:
<form action="/action_page.php" method="post">
<input type="text" name="fname" required>
<input type="submit" value="Submit">
</form>
Probieren Sie es selbst aus →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Validation</h2>
<form action="/action_page.php" method="post">
<input type="text" name="fname" required>
<input type="submit" value="Submit">
</form>
<p>If you click submit, without filling out the text field,
your browser will display an error message.</p>
</body>
</html>
Die automatische Validierung von HTML-Formularen funktioniert in Internet Explorer 9 oder früher nicht.
Bei der Datenvalidierung handelt es sich um den Prozess, der sicherstellt, dass Benutzereingaben sauber sind. richtig und nützlich.
Typische Validierungsaufgaben sind:
Hat der Benutzer alle erforderlichen Felder ausgefüllt?
Hat der Benutzer ein gültiges Datum eingegeben?
Hat der Benutzer Text in ein numerisches Feld eingegeben?
In den meisten Fällen besteht der Zweck der Datenvalidierung darin, korrekte Benutzereingaben sicherzustellen.
Die Validierung kann durch viele verschiedene Methoden definiert und auf viele Arten eingesetzt werden verschiedene Wege.
Die serverseitige Validierung wird von einem Webserver durchgeführt, nachdem Eingaben an den gesendet wurden Server.
Die clientseitige Validierung wird von einem Webbrowser durchgeführt, bevor Eingaben an einen Webserver gesendet werden.
HTML5 führte ein neues HTML-Validierungskonzept namens constraint ein Validierung.
Die Validierung von HTML-Einschränkungen basiert auf:
Einschränkungsvalidierung HTML Eingabeattribute
Einschränkungsvalidierung CSS-Pseudoselektoren
Einschränkungsvalidierung DOM-Eigenschaften und -Methoden
Gibt an, dass das Eingabeelement deaktiviert werden soll
Gibt den Maximalwert eines Eingabeelements an
Gibt den Mindestwert eines Eingabeelements an
Gibt das Wertemuster eines Eingabeelements an
Gibt an, dass das Eingabefeld ein Element erfordert
Gibt den Typ eines Eingabeelements an
Eine vollständige Liste finden Sie unter HTML Eingabeattribute.
Wählt Eingabeelemente mit dem angegebenen Attribut „disabled“ aus
Wählt Eingabeelemente mit ungültigen Werten aus
Wählt Eingabeelemente aus, für die kein „erforderliches“ Attribut angegeben ist
Wählt Eingabeelemente mit dem angegebenen Attribut „erforderlich“ aus
Wählt Eingabeelemente mit gültigen Werten aus
Eine vollständige Liste finden Sie unter CSS Pseudoklassen.