Проверка формы JavaScript

Оглавление

    Показать оглавление

Методы DOM проверки ограничений

checkValidity()

Возвращает true, если входной элемент содержит допустимые данные.

setCustomValidity()

Устанавливает свойство validationMessage входного элемента.

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

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

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

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Validation</h2>

<p>Enter a number and click OK:</p>

<input id="id1" type="number" min="100" max="300" required>
<button onclick="myFunction()">OK</button>

<p>If the number is less than 100 or greater than 300, an error message will be displayed.</p>

<p id="demo"></p>

<script>
function myFunction() {
  const inpObj = document.getElementById("id1");
  if (!inpObj.checkValidity()) {
    document.getElementById("demo").innerHTML = inpObj.validationMessage;
  } else {
    document.getElementById("demo").innerHTML = "Input OK";
  } 
} 
</script>

</body>
</html>

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

validity

Содержит логические свойства, связанные с допустимостью входного элемента.

validationMessage

Содержит сообщение, которое браузер будет отображать, если действительность ложна.

willValidate

Указывает, будет ли проверен входной элемент.

Свойства достоверности

свойство валидности входного элемента содержит число. свойств, связанных с достоверностью данных:

customError

Установите значение true, если установлено пользовательское сообщение о достоверности.

patternMismatch

Установите значение true, если значение элемента не соответствует его атрибуту шаблона.

rangeOverflow

Установите значение true, если значение элемента больше его максимального атрибута.

rangeUnderflow

Установите значение true, если значение элемента меньше его минимального атрибута.

stepMismatch

Установите значение true, если значение элемента недопустимо для его атрибута шага.

tooLong

Установите значение true, если значение элемента превышает его атрибут maxLength.

typeMismatch

Установите значение true, если значение элемента недопустимо для его атрибута типа.

valueMissing

Установите значение true, если элемент (с обязательным атрибутом) не имеет значения.

valid

Установите значение true, если значение элемента допустимо.

Примеры

Если число в поле ввода больше 100 (max ввода атрибут), отобразить сообщение:

Свойство rangeOverflow

<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>

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

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Validation</h2>

<p>Enter a number and click OK:</p>

<input id="id1" type="number" max="100">
<button onclick="myFunction()">OK</button>

<p>If the number is greater than 100 (the input's max attribute), an error message will be displayed.</p>

<p id="demo"></p>

<script>
function myFunction() {
  let text;
  if (document.getElementById("id1").validity.rangeOverflow) {
    text = "Value too large";
  } else {
    text = "Input OK";
  } 
  document.getElementById("demo").innerHTML = text;
}
</script>

</body>
</html>

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

Свойство rangeUnderflow

<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>

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

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Validation</h2>

<p>Enter a number and click OK:</p>

<input id="id1" type="number" min="100">
<button onclick="myFunction()">OK</button>

<p>If the number is less than 100 (the input's min attribute), an error message will be displayed.</p>

<p id="demo"></p>

<script>
function myFunction() {
  let text;
  if (document.getElementById("id1").validity.rangeUnderflow) {
    text = "Value too small";
  } else {
    text = "Input OK";
  } 
  document.getElementById("demo").innerHTML = text;
}
</script>

</body>
</html>