Validierung von JavaScript-Formularen


Inhaltsverzeichnis

    Inhaltsverzeichnis anzeigen


Validierung von JavaScript-Formularen

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:

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>

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 kann numerische Eingaben validieren

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> 


Automatische HTML-Formularvalidierung

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:

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>

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.


Datenvalidierung

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.


Validierung von HTML-Einschränkungen

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


Einschränkungsvalidierung von HTML-Eingabeattributen

disabled

Gibt an, dass das Eingabeelement deaktiviert werden soll

max

Gibt den Maximalwert eines Eingabeelements an

min

Gibt den Mindestwert eines Eingabeelements an

pattern

Gibt das Wertemuster eines Eingabeelements an

required

Gibt an, dass das Eingabefeld ein Element erfordert

type 

Gibt den Typ eines Eingabeelements an

Eine vollständige Liste finden Sie unter HTML Eingabeattribute.


CSS-Pseudoselektoren zur Einschränkungsvalidierung

:disabled

Wählt Eingabeelemente mit dem angegebenen Attribut „disabled“ aus

:invalid

Wählt Eingabeelemente mit ungültigen Werten aus

:optional

Wählt Eingabeelemente aus, für die kein „erforderliches“ Attribut angegeben ist

:required

Wählt Eingabeelemente mit dem angegebenen Attribut „erforderlich“ aus

:valid

Wählt Eingabeelemente mit gültigen Werten aus

Eine vollständige Liste finden Sie unter CSS Pseudoklassen.