JavaScript Validatie API

Beperking validatie DOM-methode

Eigenschap Beschrijving
checkValidity() Retourneert true als het invoerelement geldige gegevens bevat.
setCustomValidity() Stel de eigenschap validationMessage van het input-element in.

Als het invoerveld ongeldig gegevens bevat, wordt een bericht weergegeven:

Method checkValidity()

<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>

Probeer het zelf

DOM-eigenschappen voor beperkende validatie

Eigenschap Beschrijving
validity Bevat de booleaanse eigenschappen die betrekking hebben op de geldigheid van het invoerelement.
validationMessage Bevat de melding die de browser weergeeft wanneer de validatie false is.
willValidate Geef aan of de validatie van het input-element wordt uitgevoerd.

Geldigheids-eigenschappen

De geldigheids-eigenschappen van het input-element bevatten veel eigenschappen die betrekking hebben op de data-geldigheid:

Eigenschap Beschrijving
customError Stel in op true als een aangepaste foutmelding is ingesteld.
patternMismatch Stel in op true als de waarde van het element niet overeenkomt met zijn eigenschap pattern.
rangeOverflow Stel in op true als de waarde van het element groter is dan zijn eigenschap max.
rangeUnderflow Stel in op true als de waarde van het element kleiner is dan zijn eigenschap min.
stepMismatch Stel in op true als de waarde van het element niet geldig is voor zijn eigenschap step.
tooLong Stel in op true als de waarde van het element de eigenschap maxLength overschrijdt.
typeMismatch Stel in op true als de waarde van het element niet geldig is voor zijn eigenschap type.
valueMissing Stel in op true als het element (met de eigenschap required) geen waarde heeft.
valid Stel in op true als de waarde van het element geldig is.

Voorbeeld

Als het getal in het invoerveld groter is dan 100 (van het input-element max Als de eigenschap (property) wordt ingesteld, wordt een bericht weergegeven:

Eigenschap rangeOverflow

<input id="id1" type="number" max="100">
<button onclick="myFunction()">OK</button>
<p id="demo"></p>
<script>
function myFunction() {
  let text = "Waarde OK";
  if (document.getElementById("id1").validity.rangeOverflow) {
    text = "Waarde te groot";
  }
}
</script>

Probeer het zelf

Als het getal in het invoerveld kleiner is dan 100 (van het input-element min Als de eigenschap (property) wordt ingesteld, wordt een bericht weergegeven:

rangeUnderflow Eigenschap

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

Probeer het zelf