JavaScript-formularvalidering

Indholdsfortegnelse

Constraint Validation DOM Methods

checkValidity(): Returnerer sand, hvis et inputelement indeholder gyldige data.
setCustomValidity(): Indstiller egenskaben validationMessage for et inputelement.

Hvis et inputfelt indeholder ugyldige data, skal du vise en meddelelse:

CheckValidity()-metoden

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

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

Begrænsningsvalidering DOM-egenskaber

validity: Indeholder booleske egenskaber relateret til gyldigheden af et inputelement.
validationMessage: Indeholder beskeden, som en browser viser, når gyldigheden er falsk.
willValidate: Angiver om et inputelement vil blive valideret.

Gyldighedsegenskaber

Et inputelements gyldighedsegenskab indeholder et tal af egenskaber relateret til gyldigheden af data:

customError: Indstil til sand, hvis en brugerdefineret gyldighedsmeddelelse er angivet.
patternMismatch: Indstil til sand, hvis et elements værdi ikke matcher dets mønsterattribut.
rangeOverflow: Indstil til sand, hvis et elements værdi er større end dets max-attribut.
rangeUnderflow: Indstil til sand, hvis et elements værdi er mindre end dets min-attribut.
stepMismatch: Indstil til sand, hvis et elements værdi er ugyldig i henhold til dets step-attribut.
tooLong: Indstil til sand, hvis et elements værdi overstiger dets maxLength-attribut.
typeMismatch: Indstil til sand, hvis et elements værdi er ugyldig i henhold til dets type-attribut.
valueMissing: Indstil til sand, hvis et element (med en påkrævet attribut) ikke har nogen værdi.
valid: Indstil til sand, hvis et elements værdi er gyldig.

Eksempler

Hvis tallet i et inputfelt er større end 100 (indgangens max attribut), viser en meddelelse:

Egenskaben rangeOverflow

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

Prøv det selv →

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

Hvis tallet i et inputfelt er mindre end 100 (indgangens min-attribut), skal du vise en meddelelse:

Egenskaben rangeUnderflow

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

Prøv det selv →

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