Validator.js в Svelte

Библиотека validator.js представляет собой набор чистых функций для проверки и санитизации строковых данных. В контексте Svelte она используется как слой бизнес-валидации, отделённый от реактивной логики интерфейса, что позволяет строить предсказуемые и тестируемые формы без привязки к DOM-манипуляциям.

Svelte опирается на реактивные переменные и декларативное обновление состояния. Валидация, построенная поверх этого механизма, становится естественной частью реактивного графа. Validator.js при этом выполняет роль чистого функционального слоя: он не хранит состояние и не взаимодействует с DOM, что делает его удобным для использования внутри $: реактивных выражений.

Ключевая особенность такого подхода заключается в том, что каждая проверка становится детерминированной функцией вида f(input) -> boolean/string, что хорошо согласуется с моделью Svelte.

Установка и подключение

Библиотека устанавливается стандартным способом через npm:

npm install validator

В Svelte-компоненте импортируются необходимые функции:

import isEmail from 'validator/lib/isEmail';
import isLength from 'validator/lib/isLength';
import trim from 'validator/lib/trim';

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

Базовая интеграция в реактивные переменные

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

<script>
  import isEmail from 'validator/lib/isEmail';

  let email = '';
  let emailError = '';

  $: emailError = isEmail(email) ? '' : 'Некорректный email';
</script>

<input bind:value={email} type="text" />
<p>{emailError}</p>

В этом случае каждое изменение email автоматически запускает пересчёт ошибки без дополнительных обработчиков событий.

Очистка и нормализация данных

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

<script>
  import trim from 'validator/lib/trim';
  import isLength from 'validator/lib/isLength';

  let username = '';

  $: normalizedUsername = trim(username);

  $: usernameError =
    isLength(normalizedUsername, { min: 3, max: 20 })
      ? ''
      : 'Имя должно содержать от 3 до 20 символов';
</script>

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

Композиция валидаторов

Одно из сильных свойств Validator.js — возможность композиции проверок на уровне JavaScript-логики.

import isEmail from 'validator/lib/isEmail';
import isLength from 'validator/lib/isLength';
import trim from 'validator/lib/trim';

function validateEmail(value) {
  const v = trim(value);

  if (!isEmail(v)) return 'Некорректный email';
  if (!isLength(v, { max: 50 })) return 'Слишком длинный email';

  return '';
}

В Svelte такая функция удобно используется в реактивных выражениях:

<script>
  let email = '';

  $: emailError = validateEmail(email);
</script>

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

При усложнении интерфейса отдельные поля целесообразно объединять в объект состояния.

<script>
  import isEmail from 'validator/lib/isEmail';
  import isLength from 'validator/lib/isLength';
  import trim from 'validator/lib/trim';

  let form = {
    email: '',
    password: ''
  };

  $: errors = {
    email: isEmail(trim(form.email)) ? '' : 'Email некорректен',
    password: isLength(form.password, { min: 6 }) ? '' : 'Слишком короткий пароль'
  };

  $: isValid = !errors.email && !errors.password;
</script>

<input bind:value={form.email} />
<input bind:value={form.password} type="password" />

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

Обработка событий отправки

Валидация часто выполняется синхронно перед отправкой данных:

<script>
  import isEmail from 'validator/lib/isEmail';
  import trim from 'validator/lib/trim';

  let email = '';
  let error = '';

  function handleSubmit() {
    const value = trim(email);

    if (!isEmail(value)) {
      error = 'Ошибка в email';
      return;
    }

    error = '';
  }
</script>

<form on:submit|preventDefault={handleSubmit}>
  <input bind:value={email} />
  <button type="submit">Отправить</button>
</form>

Здесь Validator.js выступает как финальный слой проверки перед бизнес-операцией.

Дебаунсинг и оптимизация реактивной валидации

При сложных формах повторная проверка на каждый ввод может быть избыточной. В Svelte это решается через таймеры:

<script>
  import isEmail from 'validator/lib/isEmail';

  let email = '';
  let error = '';
  let timeout;

  $: {
    clearTimeout(timeout);

    timeout = setTimeout(() => {
      error = isEmail(email) ? '' : 'Некорректный email';
    }, 300);
  }
</script>

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

Расширение через кастомные валидаторы

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

import isLength from 'validator/lib/isLength';

function isStrongPassword(value) {
  const hasLength = isLength(value, { min: 8 });
  const hasNumber = /\d/.test(value);
  const hasLetter = /[a-zA-Z]/.test(value);

  return hasLength && hasNumber && hasLetter;
}

Интеграция в Svelte остаётся неизменной:

<script>
  let password = '';

  $: passwordError = isStrongPassword(password)
    ? ''
    : 'Пароль слишком слабый';
</script>

Работа с несколькими правилами одновременно

При увеличении количества проверок полезно хранить их в массиве:

import isEmail from 'validator/lib/isEmail';
import trim from 'validator/lib/trim';

const validators = [
  (v) => isEmail(v) || 'Неверный формат email',
  (v) => v.length < 50 || 'Слишком длинное значение'
];

function runValidators(value) {
  const v = trim(value);

  for (const check of validators) {
    const result = check(v);
    if (result !== true) return result;
  }

  return '';
}

Интеграция с реактивной моделью Svelte stores

При масштабировании приложения валидация может быть вынесена в store:

import { writable } from 'svelte/store';
import isEmail from 'validator/lib/isEmail';

function createEmailStore() {
  const { subscribe, set } = writable('');
  const error = writable('');

  function upd ate(value) {
    se t(value);
    error.set(isEmail(value) ? '' : 'Ошибка email');
  }

  return {
    subscribe,
    error,
    update
  };
}

Использование:

<script>
  const email = createEmailStore();
</script>

<input on:input={(e) => email.update(e.target.value)} />

Особенности и ограничения Validator.js в Svelte

Validator.js ориентирован на строковые данные, что определяет его границы применения. Числа, объекты и сложные структуры требуют предварительного приведения к строке или использования дополнительных библиотек.

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

Практика разделения ответственности

В связке Validator.js и Svelte формируется устойчивая архитектурная схема:

  • Svelte отвечает за реактивность и состояние интерфейса
  • Validator.js отвечает за чистую проверку и преобразование данных
  • пользовательская логика объединяет оба слоя в бизнес-правила

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

Оглавление