JavaScript Проверка формы API
Методы DOM проверки ограничений
| Свойство | Описание |
|---|---|
| checkValidity() | Возвращает true, если входной элемент содержит допустимые данные. |
| setCustomValidity() | Устанавливает свойство validation Message входного элемента. |
Если поле ввода содержит недопустимые данные, отобразите сообщение:
Метод 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, если значение элемента недопустимо для его атрибута типа. |
| 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() {
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>
Попробуйте сами »
