JavaScript -Formulare
Validierung von JavaScript-Formularen
Die Validierung von HTML-Formularen kann durch JavaScript erfolgen.
Wenn ein Formularfeld (fname) leer ist, warnt diese Funktion eine Nachricht und gibt false zurück, um zu verhindern, dass das Formular gesendet wird:
JavaScript-Beispiel
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:
Beispiel für ein HTML-Formular
<form name="myForm" action="/action_page.php" onsubmit="return validateForm()"
method="post">
Name: <input type="text" name="fname">
<input type="submit" value="Submit">
</form>
JavaScript kann numerische Eingaben validieren
JavaScript wird oft verwendet, um numerische Eingaben zu validieren:
Bitte geben Sie eine Zahl zwischen 1 und 10 ein
Automatische Validierung von HTML-Formularen
Die HTML-Formularvalidierung kann automatisch vom Browser durchgeführt werden:
Wenn ein Formularfeld (fname) leer ist, verhindert das requiredAttribut, dass dieses Formular gesendet wird:
Beispiel für ein HTML-Formular
<form action="/action_page.php" method="post">
<input type="text" name="fname" required>
<input type="submit" value="Submit">
</form>
Die automatische Validierung von HTML-Formularen funktioniert nicht in Internet Explorer 9 oder früher.
Datenvalidierung
Datenvalidierung ist der Prozess, um sicherzustellen, dass Benutzereingaben sauber, korrekt und nützlich sind.
Typische Validierungsaufgaben sind:
- hat der Benutzer alle Pflichtfelder ausgefüllt?
- hat der Benutzer ein gültiges Datum eingegeben?
- Hat der Benutzer Text in ein numerisches Feld eingegeben?
Meistens besteht der Zweck der Datenvalidierung darin, korrekte Benutzereingaben sicherzustellen.
Die Validierung kann durch viele verschiedene Methoden definiert und auf viele verschiedene Arten eingesetzt werden.
Die serverseitige Validierung wird von einem Webserver durchgeführt, nachdem Eingaben an den Server gesendet wurden.
Die clientseitige Validierung wird von einem Webbrowser durchgeführt, bevor Eingaben an einen Webserver gesendet werden.
HTML-Constraint-Validierung
HTML5 führte ein neues HTML-Validierungskonzept namens Constraint Validation ein .
Die HTML-Einschränkungsvalidierung basiert auf:
- Einschränkungsvalidierung von HTML -Eingabeattributen
- Beschränkungsvalidierung CSS-Pseudoselektoren
- Einschränkungsvalidierung DOM-Eigenschaften und -Methoden
Einschränkungsvalidierung von HTML-Eingabeattributen
| Attribute | Description |
|---|---|
| disabled | Specifies that the input element should be disabled |
| max | Specifies the maximum value of an input element |
| min | Specifies the minimum value of an input element |
| pattern | Specifies the value pattern of an input element |
| required | Specifies that the input field requires an element |
| type | Specifies the type of an input element |
Eine vollständige Liste finden Sie unter HTML-Eingabeattribute .
Einschränkungsvalidierung CSS-Pseudoselektoren
| Selector | Description |
|---|---|
| :disabled | Selects input elements with the "disabled" attribute specified |
| :invalid | Selects input elements with invalid values |
| :optional | Selects input elements with no "required" attribute specified |
| :required | Selects input elements with the "required" attribute specified |
| :valid | Selects input elements with valid values |
Eine vollständige Liste finden Sie unter CSS-Pseudoklassen .