Валидация на стороне клиента

Vex — это библиотека для создания всплывающих окон (модальных окон) в JavaScript. Она не предназначена непосредственно для валидации форм, однако её возможности могут быть использованы для отображения ошибок в процессе валидации. Валидация на стороне клиента играет важную роль в веб-разработке, обеспечивая проверку введённых данных до отправки их на сервер. Это помогает улучшить пользовательский опыт, снизить нагрузку на сервер и предотвратить отправку некорректных данных.

Основные принципы валидации

Валидация на клиентской стороне включает в себя несколько основных шагов:

  1. Проверка формата данных. Например, проверка правильности введённого email, номера телефона или даты.
  2. Проверка обязательных полей. Убедиться, что все обязательные поля заполнены.
  3. Проверка диапазонов значений. Например, проверка, что введённое число находится в пределах допустимого диапазона.

Одним из удобных способов отображения ошибок валидации является использование модальных окон. Vex идеально подходит для этой задачи, так как она позволяет быстро и просто создавать всплывающие окна для информирования пользователя о проблемах с вводом.

Пример использования Vex для отображения ошибок

Для начала необходимо подключить библиотеку Vex к проекту. После этого можно использовать её для создания всплывающих окон, которые будут уведомлять пользователя о возникших ошибках.

<script src="https://cdn.jsdelivr.net/npm/vex-js@4.0.0/dist/js/vex.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/vex-js@4.0.0/dist/css/vex.css" rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/npm/vex-js@4.0.0/dist/css/vex-theme-flat-attack.css" rel="stylesheet" />

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

function showError(message) {
    vex.dialog.alert(message);
}

Для примера, допустим, у нас есть форма с полем email. Мы можем создать функцию, которая будет проверять правильность введённого email и показывать сообщение об ошибке, если адрес некорректен:

<form id="emailForm">
    <input type="email" id="email" name="email" required />
    <button type="submit">Отправить</button>
</form>
document.getElementById('emailForm').addEventListener('submit', function (e) {
    e.preventDefault();

    const emailInput = document.getElementById('email');
    const email = emailInput.value;
    
    // Проверка формата email
    const emailRegex = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/;
    
    if (!emailRegex.test(email)) {
        showError('Пожалуйста, введите корректный email.');
    } else {
        // Данные прошли валидацию, отправляем на сервер
        alert('Форма успешно отправлена!');
    }
});

Использование нескольких типов валидации

Для более сложных форм с множеством полей можно использовать Vex для отображения различных типов ошибок. Например, если требуется проверить не только формат email, но и обязательность ввода имени или возрастной диапазон, то можно создать несколько всплывающих окон с разными сообщениями.

function validateForm() {
    const name = document.getElementById('name').value;
    const age = document.getElementById('age').value;
    const email = document.getElementById('email').value;

    if (!name) {
        showError('Имя обязательно для заполнения.');
        return false;
    }

    if (isNaN(age) || age < 18 || age > 100) {
        showError('Возраст должен быть от 18 до 100 лет.');
        return false;
    }

    const emailRegex = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/;
    if (!emailRegex.test(email)) {
        showError('Пожалуйста, введите корректный email.');
        return false;
    }

    return true;
}

Здесь мы проверяем три поля: имя, возраст и email. В случае, если одно из полей не прошло валидацию, функция showError отобразит соответствующее сообщение.

Валидация с асинхронными запросами

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

function checkEmailUniqueness(email) {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            const isUnique = email !== 'existing@example.com';
            if (isUnique) {
                resolve();
            } else {
                reject('Этот email уже зарегистрирован.');
            }
        }, 1000);
    });
}

document.getElementById('emailForm').addEventListener('submit', async function (e) {
    e.preventDefault();

    const email = document.getElementById('email').value;

    try {
        await checkEmailUniqueness(email);
        alert('Форма успешно отправлена!');
    } catch (error) {
        showError(error);
    }
});

В этом примере выполняется асинхронная проверка email, и в случае если email уже зарегистрирован, будет выведено сообщение с помощью Vex.

Настройка и стилизация всплывающих окон

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

Для изменения стилей окон, можно использовать следующие параметры:

  • buttons: для настройки кнопок в окне.
  • className: для добавления кастомных классов CSS.
  • timeout: для автоматического закрытия окна через заданный промежуток времени.

Пример настройки кнопок и стилей:

vex.dialog.alert({
    message: 'Ошибка: введён некорректный email.',
    className: 'vex-custom-class',
    buttons: [
        $.extend({}, vex.dialog.buttons.YES, {
            text: 'Попробовать снова'
        }),
        $.extend({}, vex.dialog.buttons.NO, {
            text: 'Закрыть'
        })
    ]
});

В данном примере создаётся окно с кастомными кнопками и классом для дальнейшей стилизации.

Заключение

Использование Vex в качестве инструмента для отображения ошибок валидации на стороне клиента позволяет создать гибкую и удобную систему взаимодействия с пользователем. Валидация форм, сопровождаемая уведомлениями о проблемах с введёнными данными, улучшает UX, ускоряет процесс работы с формами и предотвращает отправку некорректных данных на сервер. Важно помнить, что Vex — это не инструмент для выполнения валидации, а средство для вывода сообщений и ошибок, которые могут возникать в процессе её выполнения.

Оглавление