Создание формы ввода в JavaScript включает в себя написание HTML-кода для отображения самой формы и использование JavaScript для взаимодействия с элементами формы и обработки введённых данных. Вот пример простой формы регистрации с валидацией полей:
HTML-код формы
Создайте файл index.html с следующим содержанием:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Регистрация</title> <style> /* Простое оформление */ body { font-family: Arial, sans-serif; padding: 20px; } form { display: flex; flex-direction: column; width: 300px; margin: auto; } label { margin-bottom: 5px; } input { margin-bottom: 10px; padding: 5px; border-radius: 5px; border: 1px solid #ccc; } button { padding: 10px; background-color: #007bff; color: white; border: none; cursor: pointer; } .error { color: red; margin-top: 5px; } </style> </head> <body> <h1>Регистрация</h1> <form id="registrationForm"> <label for="name">Имя:</label> <input type="text" id="name" name="name" placeholder="Введите ваше имя" required> <label for="email">Электронная почта:</label> <input type="email" id="email" name="email" placeholder="Введите ваш email" required> <label for="password">Пароль:</label> <input type="password" id="password" name="password" placeholder="Введите ваш пароль" required> <button type="submit">Зарегистрироваться</button> </form> <!-- Элементы для отображения ошибок --> <div class="error" id="nameError"></div> <div class="error" id="emailError"></div> <div class="error" id="passwordError"></div> <script src="script.js"></script> </body> </html>
JavaScript-код для обработки формы
Создайте файл script.js с следующим содержанием:
document.addEventListener('DOMContentLoaded', function () { const form = document.getElementById('registrationForm'); const nameInput = document.getElementById('name'); const emailInput = document.getElementById('email'); const passwordInput = document.getElementById('password'); const nameError = document.getElementById('nameError'); const emailError = document.getElementById('emailError'); const passwordError = document.getElementById('passwordError'); form.addEventListener('submit', function (event) { event.preventDefault(); // Предотвращаем стандартное поведение отправки формы // Очистка сообщений об ошибках nameError.textContent = ''; emailError.textContent = ''; passwordError.textContent = ''; // Валидация полей if (nameInput.value.trim().length === 0) { nameError.textContent = 'Поле "Имя" обязательно для заполнения.'; } if (!validateEmail(emailInput.value)) { emailError.textContent = 'Некорректный формат электронной почты.'; } if (passwordInput.value.length < 6) { passwordError.textContent = 'Пароль должен содержать минимум 6 символов.'; } // Проверка на наличие ошибок if (nameError.textContent || emailError.textContent || passwordError.textContent) { return; // Останавливаемся, если есть ошибки } // Отправка данных на сервер (здесь просто консольное логирование) console.log({ name: nameInput.value, email: emailInput.value, password: passwordInput.value }); alert('Данные успешно отправлены!'); }); // Функция для валидации электронной почты function validateEmail(email) { const re = /^(([^<>()[$$\\.,;:\s@"]+(\.[^<>()[$$\\.,;:\s@"]+)*)|(".+"))@(($$[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}$$|[a-zA-Z0-9][a-zA-Z0-9-]*[a-zA-Z0-9]\.[a-zA-Z]{2,}))$/ return re.test(String(email).toLowerCase()); } });
Пояснение
- HTML-код:
- Создано простое оформление формы с тремя полями: имя, электронная почта и пароль.
- Каждый элемент формы имеет свой идентификатор для доступа к нему через JavaScript.
- Добавлен блок для отображения возможных ошибок валидации.
- JavaScript-код:
- После загрузки DOM происходит привязка событий к форме и её элементам.
- При нажатии кнопки «Отправить» срабатывает событие
submit, которое предотвращает стандартное поведение браузера (перезагрузку страницы) и запускается логика валидации. - Валидация проверяет корректность заполнения полей: имя должно быть непустым, электронная почта должна иметь правильный формат, а пароль должен состоять хотя бы из 6 символов.
- Если ошибки отсутствуют, данные отправляются на сервер (в данном примере просто выводятся в консоль).
Заключение
Эта форма демонстрирует базовые принципы создания формы ввода с использованием JavaScript для валидации данных. В реальном проекте вместо консольного логирования можно отправлять данные на сервер с помощью AJAX-запросов или WebSocket-соединений.
Загрузка...