JavaScript -формы
Проверка формы JavaScript
Проверка формы HTML может быть выполнена с помощью JavaScript.
Если поле формы (fname) пусто, эта функция выводит сообщение и возвращает false, чтобы предотвратить отправку формы:
Пример JavaScript
function validateForm() {
let
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) пусто, required
атрибут запрещает отправку этой формы:
Пример 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-атрибуты проверки ограничений
Attribute | Description |
---|---|
disabled | Specifies that the input element should be disabled |
max | Specifies the maximum value of an input element |
min | Specifies the minimum value of an input element |
pattern | Specifies the value pattern of an input element |
required | Specifies that the input field requires an element |
type | Specifies the type of an input element |
Полный список см . в разделе Атрибуты ввода HTML .
Псевдоселекторы CSS для проверки ограничений
Selector | Description |
---|---|
:disabled | Selects input elements with the "disabled" attribute specified |
:invalid | Selects input elements with invalid values |
:optional | Selects input elements with no "required" attribute specified |
:required | Selects input elements with the "required" attribute specified |
:valid | Selects input elements with valid values |
Полный список см. в Псевдоклассы CSS .