API проверки JavaScript

ограничение проверки DOM метода

свойство описание
checkValidity() если элемент input содержит допустимые данные, верните true.
setCustomValidity() установите атрибут validationMessage элемента input.

если поле ввода содержит недопустимые данные, покажите сообщение:

метод 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>

Попробуйте сами

DOM свойства проверки ограничений

свойство описание
validity содержит логические атрибуты, связанные с проверкой элемента ввода.
validationMessage содержит сообщение, которое браузер покажет при невалидности.
willValidate указывает, будет ли проверяться элемент input.

свойства проверки

Атрибуты проверки данных input элемента включают множество свойств, связанных с проверкой данных:

свойство описание
customError если установлено пользовательское сообщение об ошибке, то устанавливается в true.
patternMismatch если значение элемента не соответствует его атрибуту pattern, то устанавливается в true.
rangeOverflow если значение элемента больше его атрибута max, то устанавливается в true.
rangeUnderflow если значение элемента меньше его атрибута min, то устанавливается в true.
stepMismatch если значение элемента недопустимо для его атрибута step, то устанавливается в true.
tooLong если значение элемента превышает его атрибут maxLength, то устанавливается в true.
typeMismatch если значение элемента недопустимо для его атрибута type, то устанавливается в true.
valueMissing если у элемента (имеющего атрибут required) нет значения, то устанавливается в true.
valid если значение элемента эффективно, то устанавливается в true.

пример

если значение поля ввода больше 100 (элемента ввода макс Если установлено свойство (атрибут), то отображается сообщение:

свойство rangeOverflow

<input id="id1" type="number" max="100">
<button onclick="myFunction()">OK</button>
<p id="demo"></p>
<script>
function myFunction() {
  let text = "Значение ОК";
  if (document.getElementById("id1").validity.rangeOverflow) {
    text = "Значение слишком велико";
  }
}
</script>

Попробуйте сами

Если число в поле ввода меньше 100 (элемент ввода) min Если установлено свойство (атрибут), то отображается сообщение:

Атрибут rangeUnderflow

<input id="id1" type="number" min="100">
<button onclick="myFunction()">OK</button>
<p id="demo"></p>
<script>
function myFunction() {
  let text = "Значение ОК";
  if (document.getElementById("id1").validity.rangeUnderflow) {
    text = "Значение слишком мало";
  }
}
</script>

Попробуйте сами