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

SkateJS — это современная библиотека для создания веб-компонентов на базе стандартов Custom Elements. Основная единица в SkateJS — компонент, который определяется через функцию skate(). Компонент включает в себя шаблон разметки, свойства (props), методы жизненного цикла и возможности реактивного обновления.

Пример базового компонента:

import { skate } from 'skatejs';

skate('my-component', {
  props: {
    value: { type: String }
  },
  render() {
    return this.value ? `<p>${this.value}</p>` : `<p>Пусто</p>`;
  }
});

Здесь props определяет реактивные свойства компонента. Любое изменение свойства автоматически вызывает перерендер компонента.

Валидация форм через свойства компонентов

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

Определение свойства с валидацией:

props: {
  email: {
    type: String,
    set(el, data) {
      if (!/^[\w-\.]+@([\w-]+\.)+[\w-]{2,4}$/.test(data)) {
        console.warn('Неверный формат email');
        return '';
      }
      return data;
    }
  }
}
  • type указывает тип данных свойства.
  • set перехватывает изменения свойства, что позволяет реализовать проверку и корректировать значение до его сохранения в состоянии компонента.

Таким образом, каждое изменение свойства email автоматически проверяется на корректность формата.

Методы жизненного цикла для валидации

SkateJS предоставляет следующие методы жизненного цикла, полезные для работы с формами:

  • created() — вызывается при создании компонента, можно инициализировать состояние и привязать обработчики событий.
  • updated() — вызывается после любого изменения свойств. Здесь удобно запускать повторную валидацию.
  • connected() — срабатывает при вставке компонента в DOM. Часто используется для привязки событий к элементам формы.

Пример комплексной валидации формы:

skate('login-form', {
  props: {
    username: { type: String },
    password: { type: String }
  },
  connected() {
    this.addEventListener('submit', e => {
      e.preventDefault();
      if (this.validate()) {
        console.log('Форма корректна');
      } else {
        console.log('Ошибка валидации');
      }
    });
  },
  methods: {
    validate() {
      return this.username.length >= 3 && this.password.length >= 6;
    }
  },
  render() {
    return `
      <form>
        <input type="text" value="${this.username}" placeholder="Имя пользователя" />
        <input type="password" value="${this.password}" placeholder="Пароль" />
        <button type="submit">Войти</button>
      </form>
    `;
  }
});

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

  • connected() добавляет обработчик события формы напрямую к компоненту.
  • Метод validate() централизует проверку всех полей.
  • Реактивные свойства позволяют автоматически обновлять значения инпутов.

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

Для сложных сценариев, например, проверки уникальности email через API, SkateJS позволяет использовать асинхронные методы:

methods: {
  async validateEmail() {
    const response = await fetch(`/api/check-email?email=${this.email}`);
    const { available } = await response.json();
    return available;
  }
}

Асинхронная валидация может вызываться в updated() или при событии blur поля ввода:

this.querySelector('input[type="email"]').addEventListener('blur', async () => {
  if (!(await this.validateEmail())) {
    console.warn('Email уже используется');
  }
});

Пользовательские сообщения и визуальная обратная связь

Для улучшения UX рекомендуется интегрировать сообщения об ошибках и визуальные индикаторы состояния валидации:

render() {
  const emailError = this.email && !/^[\w-\.]+@([\w-]+\.)+[\w-]{2,4}$/.test(this.email) 
                     ? '<span class="error">Неверный email</span>' 
                     : '';
  return `
    <form>
      <input type="email" value="${this.email}" placeholder="Email" />
      ${emailError}
      <button type="submit">Отправить</button>
    </form>
  `;
}
  • Отдельный блок ошибки рендерится только при нарушении условия.
  • Использование реактивного свойства email гарантирует динамическое обновление интерфейса.

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

SkateJS-компоненты не мешают встроенной валидации HTML. Можно комбинировать кастомные проверки с required, pattern, minlength и другими атрибутами:

<input type="text" required pattern="[A-Za-z]{3,}" />
  • SkateJS позволяет дополнять стандартную валидацию дополнительными проверками и асинхронными запросами.
  • Реактивность компонентов облегчает синхронизацию состояния формы с внешними данными.

Масштабирование и повторное использование

Компоненты SkateJS можно строить модульно, создавая отдельные валидируемые поля и комбинируя их в сложные формы:

skate('validated-input', {
  props: {
    value: { type: String },
    validator: { type: Function }
  },
  methods: {
    isValid() {
      return this.validator ? this.validator(this.value) : true;
    }
  },
  render() {
    const error = !this.isValid() ? '<span class="error">Ошибка</span>' : '';
    return `<input value="${this.value}" />${error}`;
  }
});
  • Любой validator можно передавать как функцию.
  • Повторное использование таких компонентов позволяет строить большие формы без дублирования логики.

Этот подход делает SkateJS удобным инструментом для построения реактивных и безопасных форм, обеспечивая гибкую и модульную валидацию с полной интеграцией в DOM и современный фронтенд-стек.

Оглавление