JavaScript Validierungs-API

Beschränkung Validierung DOM-Methode

Eigenschaft Beschreibung
checkValidity() wird auf true zurückgegeben, wenn das input-Element gültige Daten enthält.
setCustomValidity() setzt die Eigenschaft validationMessage des input-Elements.

wenn das Eingabefeld ungültige Daten enthält, wird eine Nachricht angezeigt:

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>

Versuchen Sie es selbst

DOM-Eigenschaften der Constraint-Validierung

Eigenschaft Beschreibung
validity enthält die Boolean-Attribute, die mit der Gültigkeit des Eingabe-Elements verbunden sind.
validationMessage enthält die Nachricht, die der Browser anzeigt, wenn die Gültigkeit auf false gesetzt ist.
willValidate zeigt an, ob das Validieren des input-Elements durchgeführt wird.

Gültigkeitsattribute

Die gültigkeitsbezogenen Eigenschaften des input-Elements enthalten viele Attribute, die mit der Datenvalidierung zu tun haben:

Eigenschaft Beschreibung
customError wird auf true gesetzt, wenn eine benutzerdefinierte Fehlermeldung festgelegt ist.
patternMismatch wird auf true gesetzt, wenn der Wert des Elements nicht mit seinem Attribut pattern übereinstimmt.
rangeOverflow wird auf true gesetzt, wenn der Wert des Elements größer als seine Eigenschaft max ist.
rangeUnderflow wird auf true gesetzt, wenn der Wert des Elements kleiner als seine Eigenschaft min ist.
stepMismatch wird auf true gesetzt, wenn der Wert des Elements für sein Attribut step ungültig ist.
tooLong wird auf true gesetzt, wenn der Wert des Elements die Eigenschaft maxLength überschreitet.
typeMismatch wird auf true gesetzt, wenn der Wert des Elements für sein Attribut type ungültig ist.
valueMissing wird auf true gesetzt, wenn das Element (mit der Eigenschaft required) keinen Wert hat.
valid wird auf true gesetzt, wenn der Wert des Elements gültig ist.

Beispiel

wenn die Zahl im Eingabefeld größer als 100 ist (Eingabe-Element max Wenn das Attribut (

rangeOverflow Eigenschaft

<input id="id1" type="number" max="100">
<button onclick="myFunction()">OK</button>
<p id="demo"></p>
<script>
function myFunction() {
  let text = "Wert in Ordnung";
  if (document.getElementById("id1").validity.rangeOverflow) {
    text = "Wert zu groß";
  }
}
</script>

Versuchen Sie es selbst

Wenn die Zahl im Eingabefeld kleiner als 100 (min-Wert des Eingabe-Elements min Wenn das Attribut (

rangeUnderflow-Attribut

<input id="id1" type="number" min="100">
<button onclick="myFunction()">OK</button>
<p id="demo"></p>
<script>
function myFunction() {
  let text = "Wert in Ordnung";
  if (document.getElementById("id1").validity.rangeUnderflow) {
    text = "Wert zu klein";
  }
}
</script>

Versuchen Sie es selbst