API de Validación de JavaScript

Método de validación de restricciones DOM

propiedad descripción
comprobarValidez() si el elemento input contiene datos válidos, se devuelve true.
setCustomValidity() establecer la propiedad validationMessage del elemento input.

si el campo de entrada contiene datos inválidos, se mostrará un mensaje:

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>

Prueba personalmente

propiedades DOM de validación de restricciones

propiedad descripción
validity contiene propiedades booleanas relacionadas con la validez del elemento de entrada.
validationMessage contiene el mensaje que el navegador mostrará cuando la validación sea false.
willValidate indica si se debe validar el elemento input.

propiedadesDeValidación

Las propiedades de validación del elemento input contienen muchas propiedades relacionadas con la validez de los datos:

propiedad descripción
errorPersonalizado si se ha establecido un mensaje de validación personalizado, se establece en true.
patternMismatch si el valor del elemento no coincide con su propiedad pattern, se establece en true.
rangeOverflow si el valor del elemento es mayor que su propiedad max, se establece en true.
subflujosDeRango si el valor del elemento es menor que su propiedad min, se establece en true.
stepMismatch si el valor del elemento no es válido para su propiedad step, se establece en true.
demasiadoLargo si el valor del elemento excede su propiedad maxLength, se establece en true.
typeMismatch si el valor del elemento no es válido para su propiedad type, se establece en true.
valorFaltante si el elemento (con la propiedad required) no tiene un valor, se establece en true.
válido si el valor del elemento es válido, se establece en true.

ejemplo

si el número en el campo de entrada es mayor que 100 (elemento de entrada máximo Si se especifica este atributo), se muestra un mensaje:

propiedad 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 demasiado grande";
  }
}
</script>

Prueba personalmente

Si el número en el campo de entrada es menor de 100 (elemento de entrada) min Si se especifica este atributo), se muestra un mensaje:

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 demasiado pequeño";
  }
}
</script>

Prueba personalmente