API de Validação JavaScript

Método de validação de restrições DOM

propriedade descrição
checkValidity() se o elemento input contiver dados válidos, retorna true.
setCustomValidity() configurar a propriedade validationMessage do elemento input.

se o campo de entrada contiver dados inválidos, uma mensagem será exibida:

método 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>

Experimente você mesmo

propriedades DOM de verificação de restrição

propriedade descrição
validity contém propriedades booleanas relacionadas à validação do elemento de entrada.
validationMessage contém a mensagem que o navegador exibirá quando a validação for false.
willValidate indica se a validação do elemento input será executada.

propriedades de validação

As propriedades de validação do elemento input contêm muitas propriedades relacionadas à validação de dados:

propriedade descrição
customError se foi configurada uma mensagem de validação personalizada, é configurado como true.
patternMismatch se o valor do elemento não coincidir com sua propriedade pattern, é configurado como true.
rangeOverflow se o valor do elemento for maior que sua propriedade max, é configurado como true.
rangeUnderflow se o valor do elemento for menor que sua propriedade min, é configurado como true.
stepMismatch se o valor do elemento for inválido para sua propriedade step, é configurado como true.
tooLong se o valor do elemento exceder sua propriedade maxLength, é configurado como true.
typeMismatch se o valor do elemento for inválido para sua propriedade type, é configurado como true.
valueMissing se o elemento (com a propriedade required) não tiver valor, é configurado como true.
valid se o valor do elemento for válido, é configurado como true.

exemplo

se o número digitado no campo de entrada for maior que 100 (do elemento max Se o atributo)

propriedade rangeOverflow

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

Experimente você mesmo

Se o número inserido no campo de entrada for menor que 100 (do elemento min Se o atributo)

Atributo rangeUnderflow

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

Experimente você mesmo