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>
Попробуйте сами »
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>
Попробуйте сами »