Валидация форм

Валидация форм — важный аспект взаимодействия с пользователем на веб-странице. Она позволяет убедиться в корректности введённых данных до отправки формы на сервер. Petite-Vue предоставляет простое и элегантное решение для валидации форм в рамках минималистичной архитектуры, аналогичной Vue.js, но с меньшими размерами и меньшими требованиями к производительности.

Основные принципы

Валидация форм заключается в проверке данных, введённых пользователем, на соответствие заданным условиям. В случае несоответствия данных нужному формату, система должна предупредить пользователя о возможных ошибках. Petite-Vue позволяет интегрировать эти проверки непосредственно в разметку HTML, минимизируя необходимость в дополнительных скриптах.

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

  1. Создание модели данных Модель данных, которая будет привязана к полям формы, и будет использоваться для валидации, создаётся с помощью x-data. Это объект, в котором хранятся все данные, которые будут использованы в шаблоне для отображения значений полей формы и ошибок.

  2. Привязка данных формы С помощью директивы x-model можно связывать поля формы с данными в модели. Таким образом, изменения в полях автоматически обновляют данные, и наоборот.

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

Пример реализации простой валидации

Допустим, необходимо создать форму для ввода email и пароля, с проверкой правильности введённых данных.

<div x-data="{
    email: '',
    password: '',
    errors: {
        email: '',
        password: ''
    },
    validateEmail() {
        const re = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;
        this.errors.email = re.test(this.email) ? '' : 'Неверный формат email';
    },
    validatePassword() {
        this.errors.password = this.password.length >= 6 ? '' : 'Пароль должен быть минимум 6 символов';
    },
    validateForm() {
        this.validateEmail();
        this.validatePassword();
        return !this.errors.email && !this.errors.password;
    }
}" @submit.prevent="if (validateForm()) { alert('Форма отправлена'); }">
    <form>
        <div>
            <label for="email">Email:</label>
            <input type="email" id="email" x-model="email" @blur="validateEmail">
            <span x-show="errors.email" x-text="errors.email" style="color: red;"></span>
        </div>
        <div>
            <label for="password">Пароль:</label>
            <input type="password" id="password" x-model="password" @blur="validatePassword">
            <span x-show="errors.password" x-text="errors.password" style="color: red;"></span>
        </div>
        <button type="submit">Отправить</button>
    </form>
</div>

В данном примере:

  • Директива x-data создаёт объект с полями email, password и errors.
  • При потере фокуса с поля email и password срабатывают функции validateEmail и validatePassword, которые проверяют введённые значения.
  • Ошибки отображаются в элементах span, если проверки не пройдены.

Динамическая валидация в реальном времени

Одним из сильных аспектов Petite-Vue является возможность проводить валидацию в реальном времени, с момента ввода данных. Это можно легко реализовать, обновляя ошибки сразу после каждого изменения в поле ввода.

<div x-data="{
    email: '',
    password: '',
    errors: { email: '', password: '' },
    validateEmail() {
        const re = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;
        this.errors.email = re.test(this.email) ? '' : 'Неверный формат email';
    },
    validatePassword() {
        this.errors.password = this.password.length >= 6 ? '' : 'Пароль должен быть минимум 6 символов';
    }
}" x-init="$watch('email', validateEmail)" x-init="$watch('password', validatePassword)">
    <form @submit.prevent="alert('Форма отправлена!')">
        <div>
            <label for="email">Email:</label>
            <input type="email" id="email" x-model="email">
            <span x-show="errors.email" x-text="errors.email" style="color: red;"></span>
        </div>
        <div>
            <label for="password">Пароль:</label>
            <input type="password" id="password" x-model="password">
            <span x-show="errors.password" x-text="errors.password" style="color: red;"></span>
        </div>
        <button type="submit" :disabled="errors.email || errors.password">Отправить</button>
    </form>
</div>

Здесь используются два вызова x-init, чтобы автоматически отслеживать изменения в полях email и password и вызывать соответствующие функции валидации. Также добавлен атрибут :disabled для кнопки отправки формы, который блокирует кнопку до тех пор, пока валидация не будет пройдена.

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

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

<div x-data="{
    email: '',
    errors: { email: '' },
    validateEmail() {
        const re = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;
        this.errors.email = re.test(this.email) ? '' : 'Неверный формат email';
    },
    async checkEmailAvailability() {
        const response = await fetch(`/check-email?email=${this.email}`);
        const data = await response.json();
        this.errors.email = data.exists ? 'Этот email уже зарегистрирован' : '';
    },
    async validateForm() {
        await this.checkEmailAvailability();
        this.validateEmail();
        return !this.errors.email;
    }
}" @submit.prevent="if (validateForm()) { alert('Форма отправлена!'); }">
    <form>
        <div>
            <label for="email">Email:</label>
            <input type="email" id="email" x-model="email" @blur="checkEmailAvailability">
            <span x-show="errors.email" x-text="errors.email" style="color: red;"></span>
        </div>
        <button type="submit" :disabled="errors.email">Отправить</button>
    </form>
</div>

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

Подведение итогов

Использование Petite-Vue для валидации форм является простым и удобным решением. Библиотека предоставляет возможности для синхронной и асинхронной валидации, позволяет гибко настраивать обработку ошибок и удобное отображение сообщений для пользователя. Преимущества этого подхода — минимальный размер библиотеки и интеграция в структуру, которая не требует дополнительных зависимостей.

Оглавление