JavaScript Валидность формы
Проверка HTML-формы может выполняться с помощью JavaScript.
Если поле формы (fname) пусто, эта функция предупреждает сообщение и возвращает false, чтобы форма не была отправлена:
JavaScript Пример
function validateForm() {
var
x = document.forms["myForm"]["fname"].value;
if (x == "") {
alert("Имя должно быть заполнено");
return false;
}
}Функцию можно вызвать при отправке формы:
Пример HTML-формы
<form name="myForm" action="/action_page.php" onsubmit="return validateForm()"
method="post">
Имя: <input type="text" name="fname">
<input type="submit" value="Отправить">
</form>
Попробуйте сами »
JavaScript может проверить числовой ввод
JavaScript часто используется для проверки числового ввода:
Введите число от 1 до 10
Попробуйте сами »Автоматическая проверка HTML-форм
Проверка HTML-формы может выполняться автоматически браузером:
Если поле формы (fname) пустое, атрибут required предотвращает отправку этой формы:
Пример HTML-формы
<form action="/action_page.php" method="post">
<input type="text" name="fname" required>
<input type="submit" value="Отправить">
</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 Псевдоклассы.