Курс по программированию на JavaScript

Урок 22: Работа с формами

Работа с формами является важной частью веб-разработки. В этом уроке мы рассмотрим, как обрабатывать формы, валидировать данные и использовать API форм для взаимодействия с ними.

Обработка форм и валидация данных

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

Сбор данных формы

Для сбора данных из формы мы можем использовать событие submit, которое срабатывает при отправке формы. С помощью JavaScript мы можем предотвратить стандартное поведение формы и собрать данные для дальнейшей обработки.

// Пример сбора данных формы
document.getElementById('myForm').addEventListener('submit', function(event) {
 event.preventDefault();
 let formData = new FormData(this);
 for (let [name, value] of formData) {
 console.log(`${name}: ${value}`);
 }
});

// Вводимые данные будут выведены в консоль

В этом примере мы используем FormData для сбора данных из формы и выводим их в консоль.

Валидация данных формы

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

// Пример валидации данных формы
document.getElementById('myForm').addEventListener('submit', function(event) {
 event.preventDefault();
 let email = document.getElementById('email').value;
 let password = document.getElementById('password').value;

 if (!validateEmail(email)) {
 alert('Введите корректный адрес электронной почты');
 return;
 }

 if (password.length < 6) {
 alert('Пароль должен содержать не менее 6 символов');
 return;
 }

 alert('Форма успешно отправлена');
});

function validateEmail(email) {
 let regex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
 return regex.test(email);
}

// Сообщение об ошибке будет выведено при некорректных данных

В этом примере мы валидируем адрес электронной почты и пароль перед отправкой формы. Если данные некорректны, выводится сообщение об ошибке.

Использование API форм

API форм предоставляет методы и свойства для работы с элементами формы. С помощью этих методов можно получить доступ к значениям полей формы, изменять их и выполнять другие действия.

Пример использования API форм

Рассмотрим пример использования API форм для управления значениями полей формы и их атрибутами.

// Пример использования API форм
let form = document.getElementById('myForm');
let emailField = form.elements['email'];
let passwordField = form.elements['password'];

emailField.value = 'example@mail.com';
passwordField.setAttribute('placeholder', 'Введите пароль');

form.addEventListener('submit', function(event) {
 event.preventDefault();
 console.log('Email:', emailField.value);
 console.log('Password:', passwordField.value);
});

// Значения полей будут выведены в консоль

В этом примере мы используем API форм для управления значениями полей формы и их атрибутами.

Упражнения

// HTML


// JavaScript
document.getElementById('registrationForm').addEventListener('submit', function(event) {
 event.preventDefault();
 let username = document.getElementById('username').value;
 let email = document.getElementById('email').value;
 let password = document.getElementById('password').value;

 if (username === '') {
 alert('Введите имя пользователя');
 return;
 }

 if (!validateEmail(email)) {
 alert('Введите корректный адрес электронной почты');
 return;
 }

 if (password.length < 8) {
 alert('Пароль должен содержать не менее 8 символов');
 return;
 }

 alert('Регистрация прошла успешно');
});

function validateEmail(email) {
 let regex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
 return regex.test(email);
}

// Сообщения об ошибке будут выведены при некорректных данных

// HTML


// JavaScript
document.getElementById('feedbackForm').addEventListener('submit', function(event) {
 event.preventDefault();
 let name = document.getElementById('name').value;
 let email = document.getElementById('email').value;
 let message = document.getElementById('message').value;

 if (name === '') {
 alert('Введите имя');
 return;
 }

 if (!validateEmail(email)) {
 alert('Введите корректный адрес электронной почты');
 return;
 }

 if (message === '') {
 alert('Введите сообщение');
 return;
 }

 console.log('Имя:', name);
 console.log('Email:', email);
 console.log('Сообщение:', message);
});

function validateEmail(email) {
 let regex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
 return regex.test(email);
}

// Данные формы будут выведены в консоль при корректных данных