Валидация данных

В Slim.js валидация данных тесно связана с компонентной архитектурой и реактивностью. Каждое свойство компонента можно контролировать с помощью геттеров и сеттеров, а также специализированных методов для проверки значений. Это позволяет поддерживать корректность состояния интерфейса и предотвращать некорректные изменения данных.

Атрибуты и свойства компонентов

В Slim.js свойства компонента объявляются через объект props или через реактивные геттеры/сеттеры внутри класса компонента. Для валидации можно использовать следующие подходы:

class UserForm extends Slim {
    email = '';
    age = 0;

    set email(value) {
        if (!this.validateEmail(value)) {
            throw new Error('Некорректный email');
        }
        this._email = value;
        this.update();
    }

    get email() {
        return this._email;
    }

    validateEmail(value) {
        const regex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
        return regex.test(value);
    }
}

Ключевые моменты:

  • Валидация выполняется при присвоении значения.
  • Использование приватного свойства _email предотвращает бесконтрольное изменение данных.
  • Метод UPDATE() обеспечивает реактивное обновление компонента после изменения валидного значения.

Реактивные формы и проверка полей

Slim.js позволяет создавать формы с реактивной валидацией. Каждый ввод можно привязать к свойству компонента с обработкой событий input или change. Валидация может выполняться динамически при каждом изменении значения.

<form>
    <input type="text" onin put="this.component.username = this.value">
    <span id="error"></span>
</form>

class UserForm extends Slim {
    username = '';

    se t username(value) {
        const errorElement = this.$('span#error');
        if (value.length < 3) {
            errorElement.textContent = 'Имя должно быть минимум 3 символа';
        } else {
            errorElement.textContent = '';
            this._username = value;
            this.update();
        }
    }

    get username() {
        return this._username;
    }
}

Особенности:

  • Связь DOM-элементов с компонентом осуществляется через this.$().
  • Реактивная проверка позволяет отображать ошибки мгновенно.
  • Значения обновляются только после успешной проверки.

Композиция валидационных функций

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

class RegistrationForm extends Slim {
    password = '';
    confirmPassword = '';

    set password(value) {
        this._password = value;
        this.validatePasswords();
        this.update();
    }

    set confirmPassword(value) {
        this._confirmPassword = value;
        this.validatePasswords();
        this.update();
    }

    validatePasswords() {
        if (this._password !== this._confirmPassword) {
            this.$('span#error').textContent = 'Пароли не совпадают';
        } else {
            this.$('span#error').textContent = '';
        }
    }
}

Выводы по композиции:

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

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

Slim.js поддерживает создание директив для автоматической валидации. Директива может проверять значение при вводе и изменять отображение DOM без вмешательства в логику компонента.

Slim.directive('validateEmail', (el, email) => {
    const regex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    el.style.borderColor = regex.test(email) ? 'green' : 'red';
});

Применение:

<input type="text" bind="email" validate-email>
  • Директивы отделяют визуальную часть валидации от логики компонента.
  • Обеспечивают чистоту и переиспользуемость кода.
  • Поддерживают реактивное обновление состояния интерфейса.

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

Slim.js позволяет интегрировать асинхронные проверки, например, запрос к серверу для проверки уникальности логина. Асинхронная валидация выполняется через промисы или async/await внутри сеттеров.

class UserForm extends Slim {
    username = '';

    async set username(value) {
        const isAvailable = await this.checkUsername(value);
        if (!isAvailable) {
            this.$('span#error').textContent = 'Логин уже занят';
        } else {
            this._username = value;
            this.$('span#error').textContent = '';
            this.update();
        }
    }

    async checkUsername(username) {
        const response = await fetch(`/api/check-username?username=${username}`);
        const data = await response.json();
        return data.available;
    }
}
  • Асинхронные операции полностью интегрируются с реактивной системой Slim.js.
  • Ошибки можно отображать без блокировки интерфейса.
  • Логика проверки отделена от визуальной части компонента.

Масштабирование валидации

Для больших приложений рекомендуется использовать централизованные валидаторы или вспомогательные библиотеки, интегрируемые с Slim.js. Это позволяет стандартизировать правила проверки и упрощает поддержку кода.

  • Создаются отдельные модули с функциями валидации (validators.js).
  • Компоненты импортируют и применяют их к нужным свойствам.
  • Сеттеры компонентов остаются простыми, а логика проверки централизована.

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

Оглавление