JavaScript validerings-API

Begränsningsverifiering DOM-metod

egenskap beskrivning
kontrolleraGiltighet om input-elementet innehåller giltig data, returneras true.
setCustomValidity() sätt input-elementets validationMessage-attribut.

om inmatningsfältet innehåller ogiltig data, visas ett meddelande:

checkValidity() metod

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

Prova själv

begränsningsvaliderings DOM-attribut

egenskap beskrivning
validity innehåller booleana attribut som är relaterade till validiteten för input-elementet.
validationMessage innehåller meddelanden som webbläsaren kommer att visa när validiteten är false.
willValidate indikerar om validering av input-elementet ska genomföras.

validitetsattribut

input-elementets validitetsattribut innehåller många egenskaper som är relaterade till datavaliditet:

egenskap beskrivning
customError om en anpassad validitetsmeddelande är inställt, sätts till true.
patternMismatch om värdet för elementet inte matchar dess pattern-attribut, sätts till true.
rangeOverflow om värdet för elementet är större än dess max-attribut, sätts till true.
rangeUnderflow om värdet för elementet är mindre än dess min-attribut, sätts till true.
stepMismatch om värdet för elementet inte är giltigt för dess step-attribut, sätts till true.
tooLong om värdet för elementet överskrider dess maxLength-attribut, sätts till true.
typeMismatch om värdet för elementet inte är giltigt för dess type-attribut, sätts till true.
valueMissing om elementet (med required-attribut) inte har ett värde, sätts till true.
valid om värdet för elementet är giltigt, sätts till true.

exempel

om numret i inmatningsfältet är större än 100 (input elementets max Om en attribut är satt, visas ett meddelande:

rangeOverflow egenskap

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

Prova själv

Om numret i inmatningsfältet är mindre än 100 (input-elementet) min Om en attribut är satt, visas ett meddelande:

rangeUnderflow-attribut

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

Prova själv