API di convalida JavaScript

validità vincolante metodo DOM

proprietà descrizione
checkValidity() se l'elemento input contiene dati validi, restituisce true.
setCustomValidity() impostare l'attributo validationMessage dell'elemento input.

se il campo di input contiene dati non validi, viene visualizzato un messaggio:

metodo checkValidity()

<input id="id1" type="number" min="100" max="300" required>
<button onclick="myFunction()">OK</button>
<p id="demo"></p>
<script>
funzione myFunction() {
  const inpObj = document.getElementById("id1");
  if (!inpObj.checkValidity()) {
    document.getElementById("demo").innerHTML = inpObj.validationMessage;
  }
}
</script>

Prova da solo

proprietà DOM di convalida delle restrizioni

proprietà descrizione
validity contiene proprietà booleane relative alla validità dell'elemento di input.
validationMessage contiene il messaggio che il browser mostrerà quando la validità è false.
willValidate indica se viene eseguita la convalida dell'elemento input.

proprietà di validità

Le proprietà di validità dell'elemento input contengono molte proprietà relative alla validità dei dati:

proprietà descrizione
customError se è impostata un messaggio di validità personalizzato, impostato su true.
patternMismatch se il valore dell'elemento non corrisponde all'attributo pattern, impostato su true.
rangeOverflow se il valore dell'elemento è maggiore dell'attributo max, impostato su true.
rangeUnderflow se il valore dell'elemento è minore dell'attributo min, impostato su true.
stepMismatch se il valore dell'elemento è non valido per l'attributo step, impostato su true.
tooLong se il valore dell'elemento supera l'attributo maxLength, impostato su true.
typeMismatch se il valore dell'elemento è non valido per l'attributo type, impostato su true.
valueMissing se l'elemento (che ha l'attributo required) non ha un valore, impostato su true.
valid se il valore dell'elemento è valido, impostato su true.

esempio

se il numero inserito nel campo di input è maggiore di 100 (elemento input max Se la proprietà è impostata (proprietà), viene visualizzato un messaggio:

proprietà rangeOverflow

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

Prova da solo

Se il numero inserito nel campo di input è inferiore a 100 (elemento input) min Se la proprietà è impostata (proprietà), viene visualizzato un messaggio:

Proprietà rangeUnderflow

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

Prova da solo