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() {
var 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, если значение элемента больше, чем его атрибут max. |
| rangeUnderflow | Устанавливается в true, если значение элемента меньше его атрибута min. |
| stepMismatch | Устанавливается в true, если значение элемента недопустимо для его атрибута step. |
| tooLong | Устанавливается в true, если значение элемента превышает его атрибут maxLength. |
| typeMismatch | Устанавливается в true, если значение элемента недопустимо для его атрибута type. |
| valueMissing | Устанавливается в true, если элемент (с атрибутом required) не имеет значения. |
| valid | Установливается в true, если значение элемента является валидным (действительным). |
Примеры
Если число в поле ввода больше 100 (атрибут вводаmax), отобразит сообщение:
Свойство rangeOverflow
<input id="id1" type="number" max="100">
<button onclick="myFunction()">OK</button>
<p id="demo"></p>
<script>
function myFunction() {
var txt = "";
if (document.getElementById("id1").validity.rangeOverflow) {
txt = "Значение слишком велико";
}
document.getElementById("demo").innerHTML = txt;
}
</script>
Попробуйте сами »
Если число в поле ввода меньше 100 (атрибут ввода min), отобразит сообщение:
Свойство rangeUnderflow
<input id="id1" type="number" min="100">
<button onclick="myFunction()">OK</button>
<p id="demo"></p>
<script>
function myFunction() {
var txt = "";
if (document.getElementById("id1").validity.rangeUnderflow) {
txt = "Значение слишком маленькое";
}
document.getElementById("demo").innerHTML = txt;
}
</script>
Попробуйте сами »