Vincoli di convalida metodi DOM
| Proprietà | Descrizione |
|---|---|
| checkValidity() | Restituisce true se un elemento di input contiene dati validi. |
| setCustomValidity() | Imposta la proprietà validationMessage di un elemento di input. |
Se un campo di input contiene dati non validi, visualizzare un messaggio:
Il checkValidity () Metodo
<input id="id1" type="number" min="100" max="300">
<button onclick="myFunction()">OK</button>
<p id="demo"></p>
<script>
function myFunction() {
var inpObj =
document.getElementById("id1");
if (inpObj.checkValidity()
== false) {
document.getElementById("demo").innerHTML = inpObj.validationMessage;
}
}
</script> Prova tu stesso " Vincoli di convalida proprietà DOM
| Proprietà | Descrizione |
|---|---|
| validity | Contiene proprietà booleane relative alla validità di un elemento di ingresso. |
| validationMessage | Contiene il messaggio di un browser visualizzerà quando la validità è falsa. |
| willValidate | Indica se un elemento di ingresso viene convalidato. |
Proprietà Validità
La proprietà validità di un elemento input contiene una serie di proprietà relative alla validità dei dati:
| Proprietà | Descrizione |
|---|---|
| customError | Impostata su true, se un messaggio validità personalizzato è impostato. |
| patternMismatch | Impostata su true, se il valore di un elemento non corrisponde il suo attributo modello. |
| rangeOverflow | Impostata su true, se il valore di un elemento è maggiore del suo attributo max. |
| rangeUnderflow | Impostata su true, se il valore di un elemento è inferiore al suo attributo min. |
| stepMismatch | Impostata su true, se il valore di un elemento non è valido per il suo attributo passo. |
| tooLong | Impostata su true, se il valore di un elemento supera il suo attributo maxLength. |
| typeMismatch | Impostata su true, se il valore di un elemento non è valido per il suo attributo tipo. |
| valueMissing | Impostata su true, se un elemento (con un attributo richiesto) non ha alcun valore. |
| valid | Impostata su true, se il valore di un elemento è valido. |
Esempi
Se il numero in un campo di ingresso è maggiore di 100 (attributo max dell'ingresso), visualizza un messaggio:
Il rangeOverflow Proprietà
<input id="id1" type="number" max="100">
<button onclick="myFunction()">OK</button>
<p id="demo"></p>
<script>
function myFunction() {
var txt = "";
if (document.getElementById("id1").validity.rangeOverflow) {
txt = "Value too large";
}
document.getElementById("demo").innerHTML = txt;
}
</script>
Prova tu stesso " Se il numero in un campo di ingresso è inferiore a 100 (attributo min dell'ingresso), visualizza un messaggio:
Il rangeUnderflow Proprietà
<input id="id1" type="number" min="100">
<button onclick="myFunction()">OK</button>
<p id="demo"></p>
<script>
function myFunction() {
var txt = "";
if (document.getElementById("id1").validity.rangeUnderflow) {
txt = "Value too small";
}
document.getElementById("demo").innerHTML = txt;
}
</script>
Prova tu stesso "