JavaScript API Перевірки
Методи DOM перевірки обмежень
| Властивість | Опис |
|---|---|
| checkValidity() | Повертає 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 | Містить повідомлення, яке відображатиме браузер, якщо валідність false. |
| willValidate | Вказує, чи буде перевірено вхідний елемент. |
Властивості валідності
Властивість валідності елемента введення містить низку властивостей, пов’язаних із валідністю (дійсністю) даних:
| Властивість | Опис |
|---|---|
| customError | Установіть значення true, якщо встановлено спеціальне повідомлення про валідність. |
| patternMismatch | Установіть значення true, якщо значення елемента не відповідає його атрибуту шаблону. |
| rangeOverflow | Установіть значення true, якщо значення елемента більше, ніж його максимальний атрибут. |
| rangeUnderflow | Установіть значення true, якщо значення елемента менше його атрибута min. |
| stepMismatch | Установіть значення true, якщо значення елемента недійсне для його атрибута step. |
| tooLong | Установіть значення true, якщо значення елемента перевищує його атрибут maxLength. |
| typeMismatch | Установіть значення true, якщо значення елемента недійсне для атрибута type. |
| 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 = "Значення OK";
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 = "Значення OK";
if (document.getElementById("id1").validity.rangeUnderflow) {
text = "Замале значення";
}
}
</script>
Спробуйте самі »
