JavaScript - DOM Forms: A Beginner's Guide

Привет,野心勃勃的程序设计师们! Сегодня мы окунемся в захватывающий мир JavaScript и форм DOM. Как ваш доброжелательный соседний компьютерный учитель, я здесь, чтобы провести вас через это путешествие шаг за шагом. Так что возьмите любимый напиток, устройтесь поудобнее и отправляйтесь в это приключение вместе со мной!

JavaScript - DOM Forms

Формы DOM

Прежде чем мы перейдем к подробностям JavaScript и форм, давайте на минутку поймем, что такое формы DOM. DOM означает Document Object Model, и это essentially способ для JavaScript взаимодействовать с HTML-элементами на веб-странице.

Представьте DOM как генеалогическое древо вашего веб-сайта. Каждый элемент похож на члена семьи, а JavaScript - это cool cousin, который может общаться со всеми и делать что-то!

Теперь, когда речь идет о формах, они resemble интерактивные опросники мира веба. Они позволяют пользователям вводить данные, делать выборы и отправлять информацию на веб-сайты. Давайте посмотрим на простую HTML-форму:

<form id="myForm">
<label for="name">Имя:</label>
<input type="text" id="name" name="name">
<button type="submit">Отправить</button>
</form>

Эта форма имеет поле ввода для имени и кнопку отправки. Pretty straightforward, right? Now, let's see how we can interact with this form using JavaScript!

Отправка формы JavaScript

Когда пользователь заполняет форму и нажимает кнопку отправки, мы часто хотим что-то сделать с этими данными, прежде чем отправить их на сервер. Вот где JavaScript comes in handy!

Вот пример того, как мы можем обработать отправку формы с помощью JavaScript:

document.getElementById('myForm').addEventListener('submit', function(event) {
event.preventDefault(); // Prevents the form from submitting normally

var name = document.getElementById('name').value;
console.log('Привет, ' + name + '!');
});

Давайте разберем это:

Мы выбираем нашу форму с помощью document.getElementById('myForm').
Мы добавляем обработчик событий для события 'submit'.
event.preventDefault() останавливает стандартную отправку формы (которая обновила бы страницу).
Мы получаем значение поля имени и выводим приветствие в консоль.

Теперь, когда вы отправляете форму, вместо обновления страницы, вы увидите приветствие в консоли. Круто, правда?

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

Валидация формы resembles блюстителя в俱乐部е. Он проверяет, все ли в порядке, прежде чем пропустить данные. Давайте посмотрим, как мы можем validates нашу форму с помощью JavaScript:

document.getElementById('myForm').addEventListener('submit', function(event) {
event.preventDefault();

var name = document.getElementById('name').value;

if (name.trim() === '') {
alert('Пожалуйста, введите ваше имя!');
} else {
console.log('Привет, ' + name + '!');
}
});

В этом примере мы проверяем, пусто ли поле имени (или содержит ли только пробелы). Если да, мы показываем alert, asking the user ввести их имя. Если нет, мы выводим приветствие.

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

Иногда нам нужно validates более сложные данные. Давайте представим, что мы хотим добавить поле электронной почты в нашу форму и убедиться, что это действительный адрес электронной почты:

<form id="myForm">
<label for="name">Имя:</label>
<input type="text" id="name" name="name">
<label for="email">Электронная почта:</label>
<input type="email" id="email" name="email">
<button type="submit">Отправить</button>
</form>

И вот как мы можем validates его:

document.getElementById('myForm').addEventListener('submit', function(event) {
event.preventDefault();

var name = document.getElementById('name').value;
var email = document.getElementById('email').value;

if (name.trim() === '') {
alert('Пожалуйста, введите ваше имя!');
return;
}

if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
alert('Пожалуйста, введите действительный адрес электронной почты!');
return;
}

console.log('Привет, ' + name + '! Мы свяжемся с вами по ' + email);
});

В этом примере мы используем регулярное выражение, чтобы проверить, является ли адрес электронной почты valid. Не волнуйтесь, если это looks like gibberish - регулярные выражения - это тема на другой день!

Валидация формы с использованием ограничений HTML

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

<form id="myForm">
<label for="name">Имя:</label>
<input type="text" id="name" name="name" required>
<label for="email">Электронная почта:</label>
<input type="email" id="email" name="email" required>
<button type="submit">Отправить</button>
</form>

Добавив атрибут required к нашим полям ввода и χρησιμοποιώντας type="email" для поля электронной почты, мы получаем базовую валидацию бесплатно! Browser будет prevent отправку формы и показать сообщения об ошибках, если эти поля пусты или недействительны.

Но мы все еще можем использовать JavaScript для customize этого поведения:

document.getElementById('myForm').addEventListener('submit', function(event) {
if (!this.checkValidity()) {
event.preventDefault();
alert('Пожалуйста, заполните все поля правильно!');
} else {
var name = document.getElementById('name').value;
var email = document.getElementById('email').value;
console.log('Привет, ' + name + '! Мы свяжемся с вами по ' + email);
}
});

Этот код проверяет, является ли форма valid в соответствии с ограничениями HTML. Если нет, мы prevent отправку и показываем alert. Если да, мы продолжаем с нашим приветствием.

Заключение

И вот мы и добрались до этого, друзья! Мы совершили путешествие по земле JavaScript и форм DOM, от базовой отправки до валидации и дальше. Помните, что формы resemble разговоры между вашим веб-сайтом и его пользователями. С помощью JavaScript вы обеспечиваете, чтобы этот разговор шел гладко и все понимали друг друга.

Вот quick reference таблица методов, которые мы использовали:

Метод	Описание
`document.getElementById()`	Выбирает элемент по его ID
`addEventListener()`	Прикрепляет обработчик событий к элементу
`event.preventDefault()`	Останавливает стандартное действие события
`element.value`	Получает или устанавливает значение элемента формы
`alert()`	Показывает всплывающее сообщение пользователю
`console.log()`	Выводит сообщение в консоль
`form.checkValidity()`	Проверяет, соответствует ли форма всем своим ограничениям валидации

Продолжайте практиковаться, продолжайте программировать, и antes de que te das cuenta, вы будете создавать потрясающие интерактивные веб-опыты! Помните, каждый expert когда-то был beginner. Так что не расстраивайтесь, если что-то не срабатывает сразу. Продолжайте, и вы будете удивлены тем, что сможете accomplish!

Credits: Image by storyset

Предыдущий учебник:

JavaScript - Элементы DOM

Следующий учебник:

JavaScript - Изменение HTML