JavaScript - Проверка форм: руководство для начинающих

Здравствуйте, ambitные программисты! Сегодня мы окунемся в захватывающий мир проверки форм на JavaScript. Как кто-то, кто преподавал программирование на протяжении многих лет, я могу告诉你, что это один из самых практичных и важных навыков, которые тыучишься. Итак, начнем!

Что такое проверка форм?

Прежде чем мы перейдем к коду, давайте поймем, что такое проверка форм и почему это важно. Представьте, что вы заполняете форму для заказа пиццы в Интернете. Вы не хотели бы случайно заказать 1000 пицц вместо одной, правда? Вот где и comes в игру проверка форм - она проверяет данные, введенные пользователями, чтобы убедиться, что они правильные и в нужном формате.

Основы проверки форм

1. Проверка пустого поля

Давайте начнем с最基本的 проверки - проверки пустого поля. Вот простой пример:

function validateForm() {
let x = document.forms["myForm"]["fname"].value;
if (x == "") {
alert("Name must be filled out");
return false;
}
}

В этом коде:

• Мы получаем значение поля с именем "fname" из формы с именем "myForm".
• Если значение пусто (пустая строка), мы показываем сообщение и возвращаем false, что предотвращает отправку формы.

2. Проверка числового ввода

Теперь убедимся, что поле содержит только числа:

function validateNumber() {
let x = document.getElementById("myNumber").value;
if (isNaN(x) || x < 1 || x > 100) {
alert("Input not valid");
return false;
}
}

Вот что происходит:

• Мы получаем значение поля с ID "myNumber".
• Мы используем isNaN() для проверки, является ли это число.
• Мы также проверяем, находится ли число в диапазоне от 1 до 100.
• Если одно из этих условий истинно, мы показываем сообщение и возвращаем false.

Проверка формата данных

1. Проверка адреса электронной почты

Одна из самых распространенных проверок - это проверка правильности формата адреса электронной почты. Вот как мы можем это сделать:

function validateEmail() {
let email = document.getElementById("myEmail").value;
let regex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
if (!regex.test(email)) {
alert("Please enter a valid email address");
return false;
}
}

Это может показаться пугающим, но давайте разберем это:

• Мы используем регулярное выражение (regex) для проверки формата электронной почты.
• Регулярное выражение проверяет:
• Some characters that aren't spaces or @ ([^\s@]+)
• Следовательно, символ @
• Следовательно, больше символов, которые не являются пробелами или @
• Следовательно, точку
• Следовательно, еще больше символов, которые не являются пробелами или @

2. Проверка даты

Давайте проверим дату, чтобы убедиться, что она находится в формате MM/DD/YYYY:

function validateDate() {
let date = document.getElementById("myDate").value;
let regex = /^(0[1-9]|1[0-2])\/(0[1-9]|[12][0-9]|3[01])\/\d{4}$/;
if (!regex.test(date)) {
alert("Please enter a valid date in MM/DD/YYYY format");
return false;
}
}

Это регулярное выражение еще сложнее, но вот что оно делает:

• Он проверяет:
• Месяц (01-12)
• Следовательно, /
• День (01-31)
• Еще /
• Четырехзначный год

Помните, что это проверяет формат, но не проверяет, действительно ли дата действительна (например, 30 февраля).

Объединение всего вместе

Теперь, когда мы рассмотрели отдельные проверки, давайте объединим их в одну форму:

<form name="myForm" onsubmit="return validateForm()">
Name: <input type="text" name="fname"><br>
Age: <input type="text" id="myNumber"><br>
Email: <input type="text" id="myEmail"><br>
Date: <input type="text" id="myDate"><br>
<input type="submit" value="Submit">
</form>

<script>
function validateForm() {
if (!validateName() || !validateNumber() || !validateEmail() || !validateDate()) {
return false;
}
return true;
}

function validateName() {
let x = document.forms["myForm"]["fname"].value;
if (x == "") {
alert("Name must be filled out");
return false;
}
return true;
}

function validateNumber() {
let x = document.getElementById("myNumber").value;
if (isNaN(x) || x < 1 || x > 100) {
alert("Age must be a number between 1 and 100");
return false;
}
return true;
}

function validateEmail() {
let email = document.getElementById("myEmail").value;
let regex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
if (!regex.test(email)) {
alert("Please enter a valid email address");
return false;
}
return true;
}

function validateDate() {
let date = document.getElementById("myDate").value;
let regex = /^(0[1-9]|1[0-2])\/(0[1-9]|[12][0-9]|3[01])\/\d{4}$/;
if (!regex.test(date)) {
alert("Please enter a valid date in MM/DD/YYYY format");
return false;
}
return true;
}
</script>

В этом полном примере:

• У нас есть форма с полями для имени, возраста, электронной почты и даты.
• Событие onsubmit формы вызывает функцию validateForm().
• validateForm() вызывает все наши отдельные функции проверки.
• Если какая-либо проверка не удалась, отправка формы предотвращается.

Заключение

Поздравляю! Вы только что узнали основы проверки форм на JavaScript. Помните, что проверка не только предотвращает ошибки - она создает лучший опыт для пользователя. По мере продолжения вашего пути в программировании вы найдете множество способов улучшить ваши формы и сделать их еще более удобными для пользователей.

Вот таблица, резюмирующая методы проверки, которые мы рассмотрели:

Метод	Назначение	Пример
Проверка пустого поля	Убедиться, что необходимые поля заполнены	if (x == "")
Проверка числового ввода	Проверка, является ли ввод числом и находится ли он в диапазоне	if (isNaN(x) || x < 1 || x > 100)
Проверка электронной почты	Проверка формата электронной почты	if (!regex.test(email))
Проверка формата даты	Проверка, находится ли дата в правильном формате	if (!regex.test(date))

Продолжайте практиковаться, и скоро вы станете магом проверки форм! Помните, каждый великий программист начал exactly where you are now. Happy coding!

Credits: Image by storyset