Ефективна валідація форм на стороні клієнта і сервера з EJS та Express-validator

8 Березня 2024 в 17:28 36

Під час розробки веб-додатків на Node.js з використанням Express та шаблонізатора EJS часто виникає необхідність валідації даних, введених користувачем. Це важливий аспект забезпечення надійності та безпеки додатку, який допомагає попередити помилки та зловмисні атаки. Розглянемо, як здійснюється валідація на стороні сервера з використанням бібліотеки express-validator, а також як ефективно відображати помилки валідації на стороні клієнта за допомогою EJS.

Основи валідації на стороні сервера з express-validator

Express-validator – це набір проміжного програмного забезпечення (middleware), який пропонує зручні утиліти для валідації та санітізації даних у Express-додатках. Використання express-validator починається з його інтеграції у ваш проєкт:

const { body, validationResult } = require('express-validator');

1	const { body, validationResult } = require('express-validator');

Після інтеграції можна визначити правила валідації для різних полів форми. Наприклад, для валідації електронної пошти користувача:

app.post('/user/register',
  body('email').isEmail().withMessage('Введіть коректну електронну адресу'),
  body('password').isLength({ min: 6 }).withMessage('Пароль має бути не менше 6 символів'),
  (req, res) => {
    const errors = validationResult(req);
    if (!errors.isEmpty()) {
      return res.status(400).render('register', { errors: errors.array() });
    }
    // Продовження обробки запиту, якщо дані валідні
  });

app.post('/user/register',

body('email').isEmail().withMessage('Введіть коректну електронну адресу'),

body('password').isLength({ min: 6 }).withMessage('Пароль має бути не менше 6 символів'),

(req, res) => {

const errors = validationResult(req);

if (!errors.isEmpty()) {

return res.status(400).render('register', { errors: errors.array() });

}

// Продовження обробки запиту, якщо дані валідні

});

Тут body('email') та body('password') визначають правила валідації для відповідних полів форми. У разі виявлення помилок валідації, вони зберігаються у масиві, який може бути відправлений назад до клієнта для відображення.

Відображення помилок валідації на стороні клієнта з EJS

Після обробки помилок валідації на стороні сервера, наступним кроком є їх відображення у відповідних місцях на веб-сторінці. Для цього використовуються можливості EJS:

&lt;% if(errors) { %&gt;
  &lt;% errors.forEach(function(error) { %&gt;
    &lt;% if(error.param === 'email') { %&gt;
      &lt;div class="error"&gt;&lt;%= error.msg %&gt;&lt;/div&gt;
    &lt;% } %&gt;
    &lt;% if(error.param === 'password') { %&gt;
      &lt;div class="error"&gt;&lt;%= error.msg %&gt;&lt;/div&gt;
    &lt;% } %&gt;
  &lt;% }) %&gt;
&lt;% } %&gt;

<% if(errors) { %>

<% errors.forEach(function(error) { %>

<% if(error.param === 'email') { %>

<% } %>

<% if(error.param === 'password') { %>

<% } %>

<% }) %>

<% } %>

У цьому фрагменті коду перебираються помилки, передані з сервера, і відображаються повідомлення про помилку відповідно до поля, у якому була виявлена помилка. Такий підхід дозволяє користувачам отримати зрозумілу обратну інформацію про помилки у введених даних.

Покращення взаємодії користувача з формами

Окрім відображення помилок, існує кілька способів покращити досвід користувача при роботі з формами:

Збереження даних форми. У разі виявлення помилок корисно повертати користувачу форму з уже введеними даними, щоб він міг виправити лише ті поля, де були помилки.
Асинхронна валідація. За допомогою AJAX можна валідувати дані без необхідності перезавантаження сторінки, що робить процес більш зручним для користувача.
Клієнтська валідація. Виконання перевірок на стороні клієнта перед відправленням форми допомагає зменшити кількість запитів до сервера і поліпшує реактивність інтерфейсу.

Правильне використання валідації на стороні сервера та ефективне відображення помилок на стороні клієнта є ключовими аспектами створення якісних та надійних веб-форм. Використання express-validator разом з EJS надає потужні інструменти для розробників, дозволяючи легко імплементувати ці процеси в ваші веб-додатки.