09. Формы и валидация

Что такое формы

Форма — это способ взаимодействия пользователя с сайтом. Она позволяет отправлять данные: имя, email, пароль, сообщение и т.д.

Форма — это мост между пользователем и сервером. JavaScript проверяет данные перед отправкой, чтобы всё было корректно.

Пример формы

```html <form id="myForm"> <input type="text" id="name" placeholder="Ваше имя"> <input type="email" id="email" placeholder="Email"> <button type="submit">Отправить</button> </form> <p id="message"></p> ```

Получение данных из формы

Чтобы получить данные, используем свойства `.value` у элементов формы.

let form = document.querySelector('#myForm');
form.addEventListener('submit', function(event) {
  event.preventDefault(); // отменяем стандартную отправку
let name = document.querySelector('#name').value;
  let email = document.querySelector('#email').value;
console.log('Имя:', name);
  console.log('Email:', email);
});

Проверка данных (валидация)

Перед тем как отправлять данные, важно убедиться, что они корректные.

Пример базовой проверки

form.addEventListener('submit', function(event) {
  event.preventDefault();
let name = document.querySelector('#name').value.trim();
  let email = document.querySelector('#email').value.trim();
  let message = document.querySelector('#message');
if (name === '' || email === '') {
    message.textContent = 'Пожалуйста, заполните все поля';
    message.style.color = 'red';
  } else {
    message.textContent = 'Данные отправлены успешно!';
    message.style.color = 'green';
  }
});

Проверка email

JavaScript позволяет использовать регулярные выражения (RegExp), чтобы проверить формат email.

function validateEmail(email) {
  let pattern = /^[\w.-]+@[\w.-]+\.[a-z]{2,}$/i;
  return pattern.test(email);
}
console.log(validateEmail('test@mail.com')); // true
console.log(validateEmail('invalid@com')); // false

Пример с валидацией email

form.addEventListener('submit', function(event) {
  event.preventDefault();
let email = document.querySelector('#email').value.trim();
  let message = document.querySelector('#message');
if (!validateEmail(email)) {
    message.textContent = 'Введите корректный email';
    message.style.color = 'red';
  } else {
    message.textContent = 'Email верный!';
    message.style.color = 'green';
  }
});

Проверка длины пароля

let password = document.querySelector('#password');
password.addEventListener('input', function() {
  if (password.value.length < 6) {
    password.style.borderColor = 'red';
  } else {
    password.style.borderColor = 'green';
  }
});

Работа с сообщениями об ошибках

Можно создавать динамические подсказки для каждого поля.

function showError(input, message) {
  let error = document.createElement('div');
  error.classList.add('error');
  error.style.color = 'red';
  error.textContent = message;
  input.after(error);
}

Мини-проект: Форма регистрации

Создадим форму с проверкой имени, email и пароля.

```html <form id="regForm"> <input type="text" id="username" placeholder="Имя"> <input type="email" id="userEmail" placeholder="Email"> <input type="password" id="userPass" placeholder="Пароль"> <button type="submit">Регистрация</button> </form> <p id="result"></p> ```

let regForm = document.querySelector('#regForm');
let result = document.querySelector('#result');
regForm.addEventListener('submit', (e) => {
  e.preventDefault();
let name = document.querySelector('#username').value.trim();
  let email = document.querySelector('#userEmail').value.trim();
  let pass = document.querySelector('#userPass').value.trim();
if (name.length < 2) {
    result.textContent = 'Имя должно быть длиннее 2 символов';
    result.style.color = 'red';
    return;
  }
  if (!validateEmail(email)) {
    result.textContent = 'Некорректный email';
    result.style.color = 'red';
    return;
  }
  if (pass.length < 6) {
    result.textContent = 'Пароль должен быть минимум 6 символов';
    result.style.color = 'red';
    return;
  }
result.textContent = 'Регистрация прошла успешно!';
  result.style.color = 'green';
});

Советы новичкам

• Проверяйте поля до отправки формы — это экономит время пользователю.
• Используйте `.trim()` для удаления лишних пробелов.
• Регулярные выражения помогают проверять email, телефоны и пароли.
• Добавляйте визуальную обратную связь: цвет, сообщение, иконку — это улучшает UX.

Итоги урока

Теперь вы знаете:

• Как получать данные из форм.
• Как проверять поля перед отправкой.
• Как использовать регулярные выражения для проверки email.
• Как создавать визуальные подсказки для ошибок.