Интеграция с внешними библиотеками валидации

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

Основные подходы к интеграции

Существует несколько способов интеграции внешних библиотек валидации с Marko:

  1. Использование сторонних библиотек на клиенте — для валидации данных, введенных пользователем в браузере.
  2. Интеграция валидации на сервере — для проверки данных до отправки их в базу данных или на серверный API.

Каждый из этих способов имеет свои особенности, и правильный выбор зависит от специфики проекта.

Интеграция клиентских библиотек валидации

Одним из самых популярных подходов для валидации на клиенте является использование таких библиотек, как Validator.js или Yup. Эти библиотеки позволяют легко настраивать валидацию форм, проверку правильности ввода и т.д.

Пример использования Validator.js

Validator.js — это популярная библиотека для валидации строк и других данных. Она поддерживает множество встроенных проверок, таких как проверка на email, проверка на URL, проверка на числовые значения и т.д.

Для интеграции с Marko можно использовать следующий подход:

  1. Установить библиотеку:

    npm install validator

  2. Подключить библиотеку в компонент Marko:

    import validator from 'validator';

export default class {
    validateEmail(email) {
        return validator.isEmail(email);
    }

    validatePhoneNumber(phone) {
        return validator.isMobilePhone(phone);
    }
}

  3. В шаблоне Marko использовать логику проверки:

    <form>
    <input type="email" name="email" on-input("validateEmail") />
    <div class="error" if="!validateEmail(email)">Неверный email</div>

    <input type="text" name="phone" on-input("validatePhoneNumber") />
    <div class="error" if="!validatePhoneNumber(phone)">Неверный номер телефона</div>
</form>

В этом примере создается компонент, который использует методы библиотеки Validator.js для проверки email и номера телефона. При вводе данных на клиенте валидация выполняется в реальном времени, и пользователю сразу показывается информация о некорректных значениях.

Использование Yup для валидации форм

Yup — это схема валидации, основанная на JavaScript, которая предоставляет более сложную логику валидации данных. Она поддерживает схемы и проверки, такие как обязательность полей, форматы данных и асинхронную валидацию.

Пример интеграции с Marko

  1. Установить библиотеку:

    npm install yup

  2. Использовать библиотеку в компоненте:

    import * as Yup from 'yup';

const schema = Yup.object().shape({
    email: Yup.string().email('Некорректный email').required('Email обязателен'),
    phone: Yup.string().matches(/^[0-9]+$/, 'Номер телефона должен содержать только цифры').length(10, 'Номер должен содержать 10 цифр').required('Телефон обязателен')
});

export default class {
    validate(formData) {
        return schema.validate(formData, { abortEarly: false });
    }
}

  3. Шаблон Marko:

    <form>
    <input type="email" name="email" value="email" />
    <div class="error" if="errors.email">Ошибка: ${errors.email}</div>

    <input type="text" name="phone" value="phone" />
    <div class="error" if="errors.phone">Ошибка: ${errors.phone}</div>

    <button type="submit" on-click("handleSubmit")>Отправить</button>
</form>

  4. Логика обработки формы:

    handleSubmit() {
    const formData = {
        email: this.email,
        phone: this.phone
    };

    this.validate(formData).then(() => {
        // Данные валидны, отправляем на сервер
    }).catch(err => {
        // Отображаем ошибки
        this.errors = err.inner.reduce((acc, curr) => {
            acc[curr.path] = curr.message;
            return acc;
        }, {});
    });
}

В этом примере Yup используется для создания схемы валидации, которая проверяет email и телефон. Если данные не проходят валидацию, ошибки будут переданы в шаблон и отображены пользователю.

Интеграция серверной валидации с Marko

Помимо валидации на клиенте, важным аспектом является проверка данных на сервере. В серверных приложениях, построенных на основе Marko, можно интегрировать любые библиотеки для валидации данных, такие как Joi, Express-validator или Validator.js.

Пример использования Joi на сервере

  1. Установить библиотеку Joi:

    npm install joi

  2. Создать схему валидации на сервере:

    const Joi = require('joi');

const schema = Joi.object({
    email: Joi.string().email().required(),
    phone: Joi.string().pattern(/^[0-9]+$/).length(10).required()
});

app.post('/submit', (req, res) => {
    const { error } = schema.validate(req.body);

    if (error) {
        return res.status(400).json({ message: error.details[0].message });
    }

    res.status(200).send('Данные успешно отправлены');
});

  3. В шаблоне Marko:

    <form action="/submit" method="POST">
    <input type="email" name="email" />
    <input type="text" name="phone" />
    <button type="submit">Отправить</button>
</form>

Здесь используется библиотека Joi для валидации данных, отправленных с формы на сервер. Если данные не проходят валидацию, сервер возвращает ошибку с описанием проблемы.

Асинхронная валидация

Для более сложных сценариев, таких как проверка уникальности email или номера телефона, можно использовать асинхронную валидацию. В таких случаях, библиотеки как Yup или Joi поддерживают асинхронные схемы валидации.

Пример асинхронной валидации с Yup

const schema = Yup.object().shape({
    email: Yup.string().email('Некорректный email').required('Email обязателен')
        .test('unique-email', 'Этот email уже существует', value => {
            return fetch(`/api/check-email?email=${value}`).then(response => response.json())
                .then(data => !data.exists);
        }),
});

В этом примере добавлена асинхронная проверка уникальности email. Если email уже существует, валидация не пройдет.

Вывод

Интеграция внешних библиотек валидации в Marko позволяет значительно повысить качество проверки данных и улучшить пользовательский опыт. Независимо от того, используется ли валидация на клиенте или сервере, Marko предоставляет гибкие возможности для создания надежных и удобных решений, которые могут быть настроены в соответствии с требованиями проекта.

Оглавление