Формы JavaScript

  • Предыдущая страница DOM HTML
  • Следующая страница DOM CSS

Проверка форм 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">
Имя: <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 input для ограничения проверки
  • Пseudo-классы CSS для ограничения проверки
  • Атрибуты и методы DOM для ограничения проверки

Атрибуты HTML input для ограничения проверки

Атрибуты Описание
disabled Определите, что элемент input должен быть отключен.
max Определите максимальное значение элемента input.
min Определите минимальное значение элемента input.
pattern Определите шаблон значения элемента input.
required Определите, что поле input обязательно.
тип Определите тип элемента input.

Для получения полного списка, пожалуйста, посетите Атрибуты HTML Input.

Пseudo-классы CSS для ограничения проверки

Выборщик Описание
:disabled Выберите элемент input с указанным свойством "disabled".
:invalid Выберите элемент input с недействительным значением.
:optional Выберите элемент input без указанного свойства "required".
:required Выберите элемент input с указанным свойством "required".
:valid Выберите элемент input с действительным значением.

Для получения полного списка, пожалуйста, посетите Пseudo-классы CSS.

  • Предыдущая страница DOM HTML
  • Следующая страница DOM CSS