Обновление модулей происходит в случаях:
- Найдена критическая ошибка в работе.
- Было собрано от клиентов достаточно пожеланий для новой версии.
- Версия модуля не совместима с последней версией CMS.
Часы работы
Понедельник - Пятница, с 10 до 18
(по Московскому времени)
Контакты
Telegram: https://t.me/devilcode_ru
E-mail: [email protected]
Валидация формы — проверка данных, которые ввёл пользователь. С этой задачей сталкиваются многие начинающие фронтенд-разработчики. В статье мы расскажем о том, как работает валидация и как реализовать её тремя разными способами.
Сегодня сложно представить сайт без формы, куда пользователь вводит личные данные. Подписка на рассылку, регистрация на вебинар, покупка товаров и билетов — во всех случаях важна валидация формы.
Этот процесс проверяет данные от пользователя на корректность и предотвращает потенциальные ошибки — это нужно как для владельца сайта, так и для самого пользователя.
В статье мы рассмотрим три основных способа валидации:
Разберём, как каждый из этих методов работает и какие проблемы решает.
Основная цель валидации — предотвратить ввод некорректных данных пользователем. Например, чтобы человек просто не смог указать дату бронирования отеля в неверном формате — и не испортил себе отпуск.
Валидация на стороне клиента выполняется в браузере — данные проверяются до того, как они будут отправлены на сервер. Это уменьшает количество лишних запросов на сервер и сокращает время их обработки. Так, например, браузер выдаст сообщение с просьбой придумать более сложный пароль.
Следующий этап — валидация на стороне сервера. Она используется для проверки данных, которые могут быть изменены или подделаны на стороне клиента. Сервер может предупредить пользователя об ошибках и выдать сообщение о необходимости исправить данные.
Вариантов использования тут ещё больше: подтверждение данных карты во время оплаты, уникальность имени пользователя, проверка возраста 18+ и многое другое.
Разберём особенности этих вариантов.
CSS задаёт внешний вид элементов на веб-странице и сам по себе не может проверять данные в форме. Тем не менее CSS удобно сочетать с HTML5-атрибутами, чтобы визуально отображать результат валидации для элементов формы.
Разберём на примерах.
Вы можете использовать атрибут HTML «required», чтобы обязать пользователя заполнить конкретное поле в форме. Также вы можете использовать псевдокласс CSS «:invalid», чтобы указать на ошибку при попытке отправки формы без заполнения обязательных полей.
<form>
<input type="text" name="name" required>
<input type="email" name="email" required>
<input type="submit" value="Отправить">
</form>
<style>
input:invalid {
border: 2px solid red;
}
</style>
В этом примере мы используем атрибут «required» для полей «name» и «email». Если пользователь попытается отправить форму без заполнения этих полей, они будут выделены красной рамкой, потому что мы установили CSS-правило, которое применяется к псевдоклассу «:invalid».
Можно использовать атрибут «maxlength» в HTML для ограничения количества символов и применить CSS для стилизации элемента формы при достижении лимита. Также можно использовать CSS-псевдокласс «:valid», чтобы указать на успешную проверку.
Пример:
<form>
<input type="text" name="name" maxlength="10">
<input type="email" name="email">
<input type="submit" value="Отправить">
</form>
<style>
input:valid {
border: 2px solid green;
}
</style>
Например, проверить, является ли введённое значение номером телефона или соответствует ли оно заданному формату. Кроме того, пользователь может легко изменить или удалить вручную CSS-код, чтобы отправить неправильные данные на сервер.
В целом CSS-валидация форм — полезный инструмент для проверки корректности данных на стороне клиента. Но она не может полностью заменить полноценную валидацию на стороне сервера и использование других инструментов — jаvascript или серверных языков программирования.
jаvascript позволяет создавать сложные правила проверки и контролировать поведение формы в режиме реального времени. Разберём на конкретных примерах.
Один из самых простых и популярных способов валидации форм. Это можно сделать с помощью метода value для элементов формы и условной конструкции if-else. Например, чтобы проверить, было ли введено значение в поле ввода, можно использовать следующий код:
let inputField = document.getElementById("myInput");
if (inputField.value === "") {
alert("Поле ввода не должно быть пустым");
}
Мощный инструмент для валидации форм. Регулярные выражения позволяют проверять вводимые данные на соответствие заданному формату.
Например, чтобы проверить, соответствует ли введённый текст формату email, можно использовать следующий код:
let emailField = document.getElementById("myEmail");
let emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
if (!emailPattern.test(emailField.value)) {
alert("Некорректный email-адрес");
}
jаvascript также позволяет создавать пользовательские функции для валидации форм. Это может быть полезно для сложных проверок, которые нельзя выполнить с помощью других инструментов.
Например, чтобы проверить, что введённое число больше 10 и меньше 100, можно создать пользовательскую функцию checkNumber и использовать её следующим образом:
function checkNumber(num) {
// Проверяем, находится ли число в диапазоне от 10 до 100
if (num < 10 || num > 100) {
return false;
}
return true;
}
let numberField = document.getElementById("myNumber");
if (!checkNumber(numberField.value)) {
alert("Число должно быть больше 10 и меньше 100");
}
На стороне сервера валидация форм используется для дополнительной защиты от ошибок ввода, которые могут привести к нежелательным последствиям для пользователей или сайта в целом.
Например, пользователь может попытаться ввести некорректный адрес электронной почты, и если эта ошибка не будет обнаружена, то письмо, отправленное на этот адрес, не будет доставлено.
Реализация валидации на стороне сервера обычно осуществляется с помощью серверных языков программирования, таких как PHP, Python, Ruby, Java и других.
Приведём примеры валидации на PHP.
Для проверки обязательных полей можно использовать следующий код:
<?php
if (empty($_POST['name'])) {
$errors[] = 'Поле "Имя" обязательно для заполнения';
}
if (empty($_POST['email'])) {
$errors[] = 'Поле "Email" обязательно для заполнения';
}
if (empty($_POST['message'])) {
$errors[] = 'Поле "Сообщение" обязательно для заполнения';
}
// Если есть ошибки, выводим их пользователю
if (!empty($errors)) {
foreach ($errors as $error) {
echo '<p>' . $error . '</p>';
}
exit;
}
В этом примере мы проверяем, были ли заполнены обязательные поля формы (поля «Имя», «Email» и «Сообщение»). Если какое-то обязательное поле не заполнено, добавляем ошибку в массив $errors. Затем выводим все ошибки пользователю, если они есть.
Пример:
<?php
if (!filter_var($_POST['email'], FILTER_VALIDATE_EMAIL)) { $errors[] = 'Поле "Email" должно содержать правильный email-адрес'; } // Если есть ошибки, выводим их пользователю if (!empty($errors)) { foreach ($errors as $error) { echo '<p>' . $error . '</p>'; } exit; }
В этом примере мы используем функцию filter_var() с параметром FILTER_VALIDATE_EMAIL, чтобы проверить, соответствует ли введённый email правильному формату. Если email не соответствует формату, добавляем ошибку в массив $errors. Затем выводим все ошибки пользователю, если они есть.
Проверяем, есть ли уже пользователь с таким именем:
<?php
$stmt = $pdo->prepare("SELECT COUNT(*) FROM users WHERE username = ?"); $stmt->execute([$_POST['username']]); if ($stmt->fetchColumn() > 0) { $errors[] = 'Пользователь с таким именем уже существует'; } // Если есть ошибки, выводим их пользователю if (!empty($errors)) { foreach ($errors as $error) { echo '<p>' . $error . '</p>'; } exit; }
В этом примере мы используем SQL-запрос для проверки, есть ли в базе уже пользователь с введённым именем. Для этого используем подготовленное выражение prepare() и метод execute(), чтобы передать параметр (имя пользователя) в запрос.
Затем используем метод fetchColumn() для получения количества строк, которые соответствуют условиям запроса. Если количество строк больше 0, значит, пользователь с таким именем уже есть, и мы добавляем ошибку в массив $errors.
После выводим все ошибки пользователю, если они есть.
Валидация форм на стороне сервера важна, потому что позволяет защитить сайт от злонамеренных действий пользователей, таких как ввод некорректных данных, SQL-инъекций и других атак. Проводить её уместно почти всегда, даже если вы уже проводили валидацию на стороне клиента с помощью jаvascript или CSS.
Использование одного из методов не гарантирует 100% защиту от ошибок, поэтому лучшей практикой считают их совместное использование.
Например, можно использовать валидацию на стороне клиента для улучшения пользовательского интерфейса и быстрой обратной связи с пользователем, а также валидацию на стороне сервера для защиты от злоумышленников и обеспечения безопасности приложения.
Пример комбинирования способов валидации:
// валидация на стороне клиента
function validateForm() {
let name = document.forms["myForm"]["name"].value;
let email = document.forms["myForm"]["email"].value;
if (name === "" || email === "") {
alert("Заполните все поля!");
return false;
}
if (!validateEmail(email)) {
alert("Введите корректный email-адрес!");
return false;
}
// дополнительная проверка на стороне клиента
if (name.length < 3) {
alert("Имя должно содержать не менее 3 символов!");
return false;
}
return true;
}
// валидация на стороне сервера
app.post('/submit', function(req, res) {
let name = req.body.name;
let email = req.body.email;
// проверка на уникальность email-адреса в базе данных
User.findOne({ email: email }, function(err, user) {
if (err) throw err;
if (user) {
res.send("Email-адрес уже занят!");
} else {
let newUser = new User({
name: name,
email: email
});
newUser.save(function(err) {
if (err) throw err;
res.send("Форма успешно отправлена!");
});
}
});
});
В данном примере валидация на стороне клиента проверяет, заполнены ли обязательные поля формы, корректен ли введённый email-адрес, а также проводится дополнительная проверка на длину имени. Валидация на стороне сервера проверяет уникальность email-адреса в базе данных и сохраняет данные пользователя, если все проверки пройдены успешно.
Мы рассмотрели различные способы валидации форм и возможность использования нескольких способов, а также объяснили, когда это необходимо.
Обновление модулей происходит в случаях: