JavaScript API проверки
Методы проверки зависимостей 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>
Свойства модели проверки зависимостей
| Свойство | Описание |
|---|---|
| validity | Содержит логические свойства, связанные с допустимостью входного элемента. |
| validationMessage | Содержит сообщение, которое будет отображаться обозревателем, если значение false. |
| willValidate | Указывает, будет ли проверяться входной элемент. |
Свойства действия
свойство действия элемента input содержит ряд свойств, связанных с достоверностью данных:
| Свойство | Описание |
|---|---|
| customError | Значение true, если настроено пользовательское сообщение допустимости. |
| patternMismatch | Устанавливается в значение true, если значение элемента не соответствует его атрибуту pattern. |
| rangeOverflow | Устанавливается в значение true, если значение элемента больше, чем его атрибут max. |
| rangeUnderflow | Устанавливается в значение true, если значение элемента меньше его атрибута min. |
| stepMismatch | Устанавливается в значение true, если значение элемента недопустимо в атрибуте Step. |
| tooLong | Устанавливается в значение true, если значение элемента превышает его атрибут MaxLength. |
| typeMismatch | Устанавливается в значение true, если значение элемента недопустимо для атрибута Type. |
| valueMissing | Значение true, если элемент (с обязательным атрибутом) не имеет значения. |
| valid | Устанавливается в значение true, если значение элемента допустимо. |
Примеры
Если число в поле ввода больше, чем 100 (максимальный атрибут input), отобразите сообщение:
Свойство ранжеоверфлов
<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 = "Value too large";
}
document.getElementById("demo").innerHTML = txt;
}
</script>
Если число в поле ввода меньше 100 (атрибут min входного значения), отобразится сообщение:
Свойство ранжеундерфлов
<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 = "Value too small";
}
document.getElementById("demo").innerHTML = txt;
}
</script>
