JavaScript Формы
JavaScript Проверка формы
Проверка HTML-формы может выполняться с помощью JavaScript.
Если поле формы (fname) пусто, эта функция сообщает предупреждение и возвращает false, чтобы форма не была отправлена:
JavaScript Пример
function validateForm() {
let x = document.forms["myForm"]["fname"].value;
if (x == "") {
alert("Имя должно быть заполнено");
return false;
}
}
Функция может быть вызвана при отправке формы:
HTML Пример формы
<form name="myForm" action="/action_page.html" onsubmit="return validateForm()"
method="post">
Name: <input type="text" name="fname">
<input type="submit" value="Submit">
</form>
Попробуйте сами »
JavaScript может подтверждать числовой ввод
JavaScript часто используется для проверки числового ввода:
Пожалуйста, введите число от 1 до 10
Попробуйте сами »Автоматическая проверка HTML-форм
Проверка HTML-формы может выполняться браузером автоматически:
Если поле формы (fname) пусто, атрибут required предотвращает отправку этой формы:
HTML Пример формы
<form action="/action_page.html" method="post">
<input type="text" name="fname" required>
<input type="submit" value="Submit">
</form>
Попробуйте сами »
Автоматическая проверка HTML-формы не работает в Internet Explorer 9 или более ранней версии.
Проверка данных
Проверка данных - это процесс обеспечения того, чтобы вводимые пользователем данные были чистыми, правильными и полезными.
Типичные задачи проверки:
- заполнил ли пользователь все обязательные поля?
- ввел ли пользователь действительную дату?
- вводил ли пользователь текст в числовое поле?
Чаще всего цель проверки данных - обеспечить правильный ввод данных пользователем.
Валидация (проверка) может быть определена множеством разных методов и развернута множеством разных способов.
Проверка на стороне сервера выполняется веб-сервером после того, как ввод был отправлен на сервер.
Проверка на стороне клиента выполняется веб-браузером перед отправкой ввода на веб-сервер.
Проверка ограничений HTML
HTML5 представил новую концепцию проверки HTML, которая называется проверка ограничений.
Проверка ограничения HTML основана на:
- Проверка ограничений HTML Входные атрибуты
- Проверка ограничений Псевдоселекторы CSS
- Проверка ограничений Свойства и методы DOM
Атрибуты ввода HTML для проверки ограничений
| Атрибут | Описание |
|---|---|
| disabled | Указывает, что элемент ввода должен быть отключен |
| max | Задает максимальное значение входного элемента |
| min | Задает минимальное значение входного элемента |
| pattern | Задает шаблон значения входного элемента |
| required | Указывает, что для поля ввода требуется элемент |
| type | Определяет тип входного элемента |
Полный список смотрите в главе HTML Атрибуты ввода.
Псевдоселекторы CSS с проверкой ограничений
| Селектор | Описание |
|---|---|
| :disabled | Выбирает элементы ввода с указанным атрибутом "disabled" |
| :invalid | Выбирает элементы ввода с недопустимыми значениями |
| :optional | Выбирает элементы ввода без указания атрибута "required" |
| :required | Выбирает элементы ввода с указанием атрибута "required" |
| :valid | Выбирает элементы ввода с допустимыми значениями |
Полный список смотрите в главе CSS Псевдо классы.
