Валидация полей

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

Свойства компонентов и типизация

В Atomico все свойства компонента определяются через функцию props. Каждый проп можно типизировать и задать значение по умолчанию, а также определить пользовательскую функцию проверки.

import { c, props } from "atomico";

const MyComponent = c(() => {
    return <div>{}</div>;
}, {
    props: {
        username: String,
        age: Number,
        email: {
            type: String,
            default: "",
            validate: value => /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value)
        }
    }
});

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

  • type задает ожидаемый тип значения (String, Number, Boolean, Array, Object и т.д.).
  • default определяет значение, которое будет использовано, если проп не передан.
  • validate — функция проверки, возвращающая true для корректного значения и false для некорректного.

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

Для сложной логики проверки можно использовать кастомные функции:

email: {
    type: String,
    validate: value => {
        if (value.length < 5) return false;
        return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value);
    }
}

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

Реактивные вычисления и валидация

Atomico поддерживает реактивные вычисления через хук useMemo и useState. Проверка значений может выполняться динамически при изменении пропов:

import { c, useMemo, useState } from "atomico";

const FormInput = c(({ value }) => {
    const [error, setError] = useState("");

    const isValid = useMemo(() => {
        if (!value) return "Поле не должно быть пустым";
        if (!/^[a-zA-Z]+$/.test(value)) return "Только латинские буквы";
        return "";
    }, [value]);

    setError(isValid);

    return <input value={value} aria-invalid={!!error} />;
});

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

  • useMemo позволяет пересчитывать валидность только при изменении зависимостей, что снижает нагрузку на компонент.
  • aria-invalid используется для семантической индикации ошибки в DOM.

Встроенные типы и ограничение диапазонов

Atomico поддерживает автоматическую проверку типов, но для числовых и строковых значений можно добавлять ограничения диапазона:

const NumberInput = c(() => {}, {
    props: {
        value: {
            type: Number,
            default: 0,
            validate: v => v >= 0 && v <= 100
        }
    }
});

В данном примере число автоматически проверяется на соответствие диапазону от 0 до 100, что предотвращает некорректное поведение компонента без дополнительных условий в шаблоне.

Обработка ошибок и пользовательская обратная связь

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

import { useState } from "atomico";

const formErrors = useState({ username: "", email: "" });

function validateField(name, value) {
    switch (name) {
        case "username":
            formErrors[name] = value.length < 3 ? "Слишком короткое имя" : "";
            break;
        case "email":
            formErrors[name] = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value) ? "" : "Некорректный email";
            break;
    }
}

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

Валидация через события

Atomico позволяет создавать события компонентов для передачи информации о состоянии полей:

const InputWithEvent = c(({ value }, { emit }) => {
    const handleChange = (e) => {
        const val = e.target.value;
        const valid = val.length >= 3;
        emit("validate", { value: val, valid });
    };

    return <input value={value} onIn put={handleChange} />;
});

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

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

Atomico-компоненты легко включаются в сторонние решения для управления формами, например с использованием реактивных хранилищ (redux, zustand) или нативных HTML-форм. Главное — обеспечить корректную проверку через validate и события, что гарантирует синхронность состояния полей и UI.

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

Оглавление