Validierung von JavaScript-Formularen


Inhaltsverzeichnis

    Inhaltsverzeichnis anzeigen


DOM-Methoden zur Einschränkungsvalidierung

checkValidity()

Gibt true zurück, wenn ein Eingabeelement gültige Daten enthält.

setCustomValidity()

Legt die validationMessage-Eigenschaft eines Eingabeelements fest.


Wenn ein Eingabefeld ungültige Daten enthält, wird eine Meldung angezeigt:

Die checkValidity()-Methode

<input id="id1" type="number" min="100" max="300" 
    required>
<button onclick="myFunction()">OK</button>
<p id="demo"></p>
<script>
 function myFunction() {
  const inpObj = document.getElementById("id1");
  if (!inpObj.checkValidity()) {
    document.getElementById("demo").innerHTML = inpObj.validationMessage;
    }
}
</script>

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Validation</h2>

<p>Enter a number and click OK:</p>

<input id="id1" type="number" min="100" max="300" required>
<button onclick="myFunction()">OK</button>

<p>If the number is less than 100 or greater than 300, an error message will be displayed.</p>

<p id="demo"></p>

<script>
function myFunction() {
  const inpObj = document.getElementById("id1");
  if (!inpObj.checkValidity()) {
    document.getElementById("demo").innerHTML = inpObj.validationMessage;
  } else {
    document.getElementById("demo").innerHTML = "Input OK";
  } 
} 
</script>

</body>
</html>

DOM-Eigenschaften für die Einschränkungsvalidierung

validity

Enthält boolesche Eigenschaften im Zusammenhang mit der Gültigkeit eines Eingabeelements.

validationMessage

Enthält die Meldung, die ein Browser anzeigt, wenn die Gültigkeit falsch ist.

willValidate

Gibt an, ob ein Eingabeelement validiert wird.



Gültigkeitseigenschaften

Die Gültigkeitseigenschaft eines Eingabeelements enthält eine Zahl von Eigenschaften im Zusammenhang mit der Gültigkeit von Daten:

customError

Wird auf „true“ gesetzt, wenn eine benutzerdefinierte Gültigkeitsmeldung festgelegt ist.

patternMismatch

Wird auf „true“ gesetzt, wenn der Wert eines Elements nicht mit seinem Musterattribut übereinstimmt.

rangeOverflow

Wird auf „true“ gesetzt, wenn der Wert eines Elements größer als sein max-Attribut ist.

rangeUnderflow

Wird auf „true“ gesetzt, wenn der Wert eines Elements kleiner als sein Min-Attribut ist.

stepMismatch

Wird auf „true“ gesetzt, wenn der Wert eines Elements gemäß seinem Schrittattribut ungültig ist.

tooLong

Wird auf „true“ gesetzt, wenn der Wert eines Elements sein maxLength-Attribut überschreitet.

typeMismatch

Wird auf „true“ gesetzt, wenn der Wert eines Elements gemäß seinem Typattribut ungültig ist.

valueMissing

Wird auf „true“ gesetzt, wenn ein Element (mit einem erforderlichen Attribut) keinen Wert hat.

valid

Wird auf „true“ gesetzt, wenn der Wert eines Elements gültig ist.


Beispiele

Wenn die Zahl in einem Eingabefeld größer als 100 ist (der max der Eingabe). Attribut), eine Meldung anzeigen:

Die rangeOverflow-Eigenschaft

<input id="id1" type="number" max="100">
<button onclick="myFunction()">OK</button>

<p id="demo"></p>

<script>
function myFunction() {
  let text = "Value OK";
    if (document.getElementById("id1").validity.rangeOverflow) {
      text = "Value too large";
    }
}
</script>

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Validation</h2>

<p>Enter a number and click OK:</p>

<input id="id1" type="number" max="100">
<button onclick="myFunction()">OK</button>

<p>If the number is greater than 100 (the input's max attribute), an error message will be displayed.</p>

<p id="demo"></p>

<script>
function myFunction() {
  let text;
  if (document.getElementById("id1").validity.rangeOverflow) {
    text = "Value too large";
  } else {
    text = "Input OK";
  } 
  document.getElementById("demo").innerHTML = text;
}
</script>

</body>
</html>

Wenn die Zahl in einem Eingabefeld kleiner als 100 ist (das Attribut min der Eingabe), wird eine Meldung angezeigt:

Die rangeUnderflow-Eigenschaft

<input id="id1" type="number" min="100">
<button onclick="myFunction()">OK</button>

<p id="demo"></p>
<script>
function myFunction() {
  let text = "Value OK";
    if (document.getElementById("id1").validity.rangeUnderflow) {
      text = "Value too small";
    }
}
</script>
 

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Validation</h2>

<p>Enter a number and click OK:</p>

<input id="id1" type="number" min="100">
<button onclick="myFunction()">OK</button>

<p>If the number is less than 100 (the input's min attribute), an error message will be displayed.</p>

<p id="demo"></p>

<script>
function myFunction() {
  let text;
  if (document.getElementById("id1").validity.rangeUnderflow) {
    text = "Value too small";
  } else {
    text = "Input OK";
  } 
  document.getElementById("demo").innerHTML = text;
}
</script>

</body>
</html>