API Валидации JavaScript

  • Предыдущая страница API Storage
  • Следующая страница API Web

Методы и атрибуты DOM для ограничения проверки

Метод

Метод Описание
checkValidity() Возвращает true, если элемент ввода содержит данные.
setCustomValidity() Устанавливает атрибут validationMessage элемента ввода.

Свойство

Свойство Описание
validity Содержит булево свойство, связанное с эффективностью элемента ввода.
validationMessage Содержит сообщение, которое браузер будет отображать, если проверка не успешна.
willValidate Указывает, будет ли проверяться элемент ввода.

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

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

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

Элемент 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.

Пример

свойство rangeOverflow

Если цифра в поле input больше 100 (input max Если свойство установлено, то отображается сообщение:

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

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

свойство rangeUnderflow

Если цифра в поле input больше 100 (input max Если свойство установлено, то отображается сообщение:

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

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

  • Предыдущая страница API Storage
  • Следующая страница API Web