JavaScript-formulärvalidering


Innehållsförteckning

    Visa innehållsförteckning


Constraint Validation DOM Methods

checkValidity()

Returnerar sant om ett inmatningselement innehåller giltiga data.

setCustomValidity()

Ställer in egenskapen validationMessage för ett indataelement.


Om ett inmatningsfält innehåller ogiltiga data, visa ett meddelande:

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

Prova själv →

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

Constraint Validation DOM-egenskaper

validity

Innehåller booleska egenskaper relaterade till ett indataelements giltighet.

validationMessage

Innehåller meddelandet som en webbläsare kommer att visa när giltigheten är falsk.

willValidate

Indikerar om ett indataelement kommer att valideras.



Giltighetsegenskaper

validity-egenskapen för ett inmatningselement innehåller ett nummer egenskaper relaterade till datas giltighet:

customError

Ställ in på sant om ett anpassat giltighetsmeddelande är inställt.

patternMismatch

Ställ in på sant om ett elements värde inte matchar dess mönsterattribut.

rangeOverflow

Ställ in på sant om ett elements värde är större än dess max-attribut.

rangeUnderflow

Ställ in på sant om ett elements värde är mindre än dess min-attribut.

stepMismatch

Ställ in på sant om ett elements värde är ogiltigt enligt dess stegattribut.

tooLong

Ställ in på sant om ett elements värde överskrider dess maxLength-attribut.

typeMismatch

Ställ in på true, om ett elements värde är ogiltigt enligt dess typeattribut.

valueMissing

Ställ in på sant om ett element (med ett obligatoriskt attribut) inte har något värde.

valid

Ställ in på sant om ett elements värde är giltigt.


Exempel

Om siffran i ett inmatningsfält är större än 100 (indatas max attribut), visa ett meddelande:

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

Prova själv →

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

Om siffran i ett inmatningsfält är mindre än 100 (inmatningens min-attribut), visar ett meddelande:

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

Prova själv →

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