JavaScript: Обработка форм — Урок 14

Обработка форм в веб-разработке может осуществляться несколькими способами. Один из них – использование JavaScript, возможно, с привлечением сторонних библиотек. Другой вариант – применение языка PHP, который отлично взаимодействует с JavaScript и предпочтительнее для обработки форм на стороне сервера. Это связано с тем, что JavaScript может быть отключен пользователем, что приведёт к игнорированию клиентских проверок и отправке данных на сервер без проверки. PHP, обрабатывая данные на сервере, лишён этого недостатка. Тем не менее, JavaScript полезен для обработки событий в форме.

Создание формы

Создадим простую HTML-форму:

<form action="" method="post" id="form" onsubmit="return valid(this);">
  <label for="name">Имя:</label><br>
  <input type="text" name="name" id="name" placeholder="Имя"><br><br>

  <label for="password">Пароль:</label><br>
  <input type="password" name="password" id="password" placeholder="Пароль"><br><br>

  <label for="password2">Повторите пароль:</label><br>
  <input type="password" name="password2" id="password2" placeholder="Повторите пароль"><br><br>

  <label>Пол:</label><br>
  <label for="male">Мужской</label>
  <input type="radio" name="sex" id="male" value="male">
  <label for="female">Женский</label>
  <input type="radio" name="sex" id="female" value="female"><br><br>

  <button type="button" onclick="valid(document.getElementById('form'))">Готово</button>
</form>

Форма содержит поля для имени, пароля (с подтверждением), выбора пола и кнопку «Готово». Атрибут for в <label> связывает его с соответствующим полем ввода.

Валидация и обработка событий

Функция valid() проверяет данные формы:

function valid(form) {
  let name = form.name.value;
  let password = form.password.value;
  let rpassword = form.password2.value;
  let sex = form.sex.value;
  let fail = false;

  if (name.trim() === "") {
    fail = true;
    alert("Вы не ввели своё имя");
  } else if (password.trim() === "") {
    fail = true;
    alert("Вы не ввели пароль");
  } else if (password !== rpassword) {
    fail = true;
    alert("Пароли не совпадают");
  } else if (typeof sex === 'undefined') {
    fail = true;
    alert("Укажите пол");
  }

  return !fail;
}

Функция проверяет заполненность полей «Имя» и «Пароль», совпадение паролей и указание пола. При ошибке выводится alert, и функция возвращает false, предотвращая отправку формы. trim() удаляет лишние пробелы. Обработчик onclick на кнопке типа button повышает безопасность, предотвращая отправку формы при отключенном JavaScript.

Перенаправление

Для перенаправления после успешной валидации можно использовать:

window.location = "http://google.com"; // Или любой другой URL

Или для перезагрузки страницы:

window.location.reload();

Проверка email с помощью регулярных выражений

Регулярные выражения позволяют проверять соответствие строк шаблону. Пример проверки email:

let emailRegEx = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+.[a-zA-Z]{2,5}$/;
if (!emailRegEx.test(email)) {
    alert("Вы ввели email неправильно");
}

Это простой пример. Более сложные выражения могут быть длиннее. Альтернативный, менее точный метод – проверка наличия символа «@» :

let emailParts = email.split('@');
if (emailParts.length -1 !== 1){
    alert("Вы ввели email неправильно")
}

Рассмотрена обработка форм на JavaScript, включая валидацию данных, перенаправление и использование регулярных выражений для проверки email. Выбор метода валидации зависит от сложности задачи и требований к безопасности. В простых случаях достаточно простых проверок, в сложных – регулярные выражения или другие инструменты.