Проверка формы в JavaScript

Очень часто перед отправкой формы нужно проверить данные, которые ввёл пользователь. Если он что-то написал неправильно, то нужно запретить отправку формы и сообщить об ошибке. Мы рассмотрим эту функцию на примере формы регистрации. Страница будет такая:

HTML код:

<form action="reg.php">
  <div>Логин: <input name="login"></div>
  <div>Пароль: <input name="pas" type="password"></div>
  <div>Подтвердите пароль: <input name="rpas" type="password"></div>
  <div><input type="submit" value="Отправить"></div>
</form>

Сделаем две проверки: чтобы логин не был меньше 2 символов и чтобы пароль совпадал с подтверждением. Конечно, на практике проверок должно быть больше, но для изучения принципа работы с формой их достаточно. Добавим на страницу такой скрипт:

JavaScript:

let form = document.querySelector('form');
let login = form.login;
let pas = form.pas;
let rpas = form.rpas;

form.onsubmit = function()
{
  if (login.value.length < 2) {
    alert('Логин слишком короткий');
    return false;
  }

  if (pas.value != rpas.value) {
    alert('Пароль не совпадает с подтверждением');
    return false;
  }
};

В строке 15 найдена форма, а затем происходит поиск её элементов. Элементы найдены как свойства объекта формы. Это самый удобный способ. В скрипте к ним можно так и обращаться. Но чтобы код был более понятным, я записал их в переменные. Далее идёт обработчик события Submit. Он срабатывает, когда форма отправляется на сервер. Если пользователь ввёл что-то неправильно, то функция возвращает false, действие браузера отменяется и отправка не происходит. На основе этого примера Вы сможете делать нужные проверки на создаваемых Вами сайтах.

Данные, введённые пользователем часто проверяются ещё до отправки при помощи событий формы. Но если Вы это делаете, то нужно убедится, что функция работает в разных браузерах. Для некоторых событий формы слабо обеспечена кроссбраузерность.

При регистрации пользователя нужно убедиться, что в базе данных нет записи с таким же ником. Довольно часто это делается не при добавлении пользователя в базу данных, а ещё до отправки формы, с использованием технологии AJAX. Это позволяет избежать лишних возвратов на страницу регистрации и делает выбор ника более удобным.