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