JavaScript validerings API

Begrænsningsoverholdelse DOM-metode

egenskab beskrivelse
checkValidity() hvis input elementet indeholder gyldige data, returneres true.
setCustomValidity() sæt input elementets validationMessage egenskab.

hvis inputfeltet indeholder ugyldige data, vises en besked:

checkValidity() metode

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

Prøv det selv

begrænsningsvalidations DOM egenskaber

egenskab beskrivelse
validity indeholder boolean egenskaber, der er relateret til input elementets gyldighed.
validationMessage indeholder beskeder, der vil blive vist i browseren, når gyldighed er false.
willValidate indikerer om der skal validates input elementet.

gyldighedsegenskaber

input elementets gyldighedsegenskaber indeholder mange egenskaber, der er relateret til data gyldighed:

egenskab beskrivelse
customError sættes til true, hvis der er indstillet en brugerdefineret gyldighedsmelding.
patternMismatch sættes til true, hvis værdien på elementet ikke matcher dens pattern egenskab.
rangeOverflow sættes til true, hvis værdien på elementet er større end dens max egenskab.
rangeUnderflow sættes til true, hvis værdien på elementet er mindre end dens min egenskab.
stepMismatch sættes til true, hvis værdien på elementet ikke er gyldig for dens step egenskab.
tooLong sættes til true, hvis værdien på elementet overstiger dens maxLength egenskab.
typeMismatch sættes til true, hvis værdien på elementet ikke er gyldig for dens type egenskab.
valueMissing sættes til true, hvis elementet (med required egenskab) ikke har en værdi.
valid sættes til true, hvis værdien på elementet er gyldig.

eksempel

hvis tallet i inputfeltet er større end 100 (input elementets max Egenskaben), vises en besked:

rangeOverflow egenskab

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

Prøv det selv

Hvis tallet i inputfeltet er mindre end 100 (input-elementets min Egenskaben), vises en besked:

rangeUnderflow-egenskaben

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

Prøv det selv