Restrição de validação métodos DOM
| Propriedade | Descrição |
|---|---|
| checkValidity() | Retorna true se um elemento de entrada contém dados válidos. |
| setCustomValidity() | Define a propriedade validationMessage de um elemento de entrada. |
Se um campo de entrada contém dados inválidos, exibir uma mensagem:
O checkValidity () Método
<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> Tente você mesmo " Propriedades DOM validação de restrição
| Propriedade | Descrição |
|---|---|
| validity | Contém propriedades boolean relacionadas com a validade de um elemento de entrada. |
| validationMessage | Contém a mensagem de um navegador será exibido quando a validade é falsa. |
| willValidate | Indica se um elemento de entrada será validado. |
Propriedades de validade
A propriedade de um elemento de entrada de validade contém uma série de propriedades relacionadas com a validade dos dados:
| Propriedade | Descrição |
|---|---|
| customError | Definido como verdadeiro, se uma mensagem de validade personalizado está definido. |
| patternMismatch | Definido como verdadeiro, se o valor de um elemento não coincide com o seu atributo padrão. |
| rangeOverflow | Definido como verdadeiro, se o valor de um elemento é maior do que o seu atributo max. |
| rangeUnderflow | Definido como verdadeiro, se o valor de um elemento é menor do que seu atributo min. |
| stepMismatch | Definido como verdadeiro, se o valor de um elemento é inválido por seu atributo etapa. |
| tooLong | Definido como verdadeiro, se o valor de um elemento excede seu atributo maxLength. |
| typeMismatch | Definido como verdadeiro, se o valor de um elemento é inválido por seu atributo tipo. |
| valueMissing | Definido como verdadeiro, se um elemento (com um atributo obrigatório) não tem valor. |
| valid | Definido como verdadeiro, se o valor de um elemento é válido. |
Exemplos
Se o número em um campo de entrada for maior do que 100 (atributo max da entrada), exibir uma mensagem:
A propriedade rangeOverflow
<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>
Tente você mesmo " Se o número em um campo de entrada é menor do que 100 (min atributo da entrada), exibir uma mensagem:
A propriedade rangeUnderflow
<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>
Tente você mesmo "