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

Библиотека Validator.js используется для валидации строковых данных на клиентской стороне и в среде Node.js. В React она применяется как вспомогательный слой для проверки пользовательского ввода в формах, обеспечивая строгий контроль форматов email, URL, паролей, числовых значений и других текстовых полей.

Основная особенность использования Validator.js в React заключается в том, что библиотека не управляет состоянием и не привязана к жизненному циклу компонентов. Она работает как набор чистых функций, что делает её удобной для интеграции с любыми подходами: от простых форм на useState до сложных систем управления состоянием.

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

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

npm install validator

В React-компонентах импортируется следующим образом:

import validator from 'validator';

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

Основные принципы работы в React

В React валидация обычно выполняется в трёх сценариях:

  • при изменении значения поля (onChange)
  • при потере фокуса (onBlur)
  • при отправке формы (onSubmit)

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

Пример базовой структуры:

const [email, setEmail] = useState('');
const [error, setError] = useState('');

Валидация email в React

Наиболее частый кейс — проверка email:

import validator from 'validator';
import { useState } from 'react';

function EmailForm() {
  const [email, setEmail] = useState('');
  const [error, setError] = useState('');

  const handleChange = (value) => {
    setEmail(value);

    if (!validator.isEmail(value)) {
      setError('Некорректный email');
    } else {
      setError('');
    }
  };

  return (
    <div>
      <input
        value={email}
        onCha nge={(e) => handleChange(e.target.value)}
        placeholder="Email"
      />
      {error && <span>{error}</span>}
    </div>
  );
}

Функция isEmail выполняет строгую проверку RFC-формата и учитывает большинство реальных сценариев ввода.

Проверка длины и обязательных полей

Validator.js предоставляет функции для проверки строковой длины и пустоты:

  • isLength(str, options)
  • isEmpty(str)

Пример комбинированной проверки:

const validateUsername = (value) => {
  if (validator.isEmpty(value)) {
    return 'Поле обязательно для заполнения';
  }

  if (!validator.isLength(value, { min: 3, max: 20 })) {
    return 'Имя должно содержать от 3 до 20 символов';
  }

  return '';
};

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

const [username, setUsername] = useState('');
const [error, setError] = useState('');

const handleChange = (value) => {
  setUsername(value);
  setError(validateUsername(value));
};

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

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

const validatePassword = (value) => {
  if (!validator.isLength(value, { min: 8 })) {
    return 'Пароль должен содержать минимум 8 символов';
  }

  if (!validator.matches(value, /[A-Z]/)) {
    return 'Пароль должен содержать хотя бы одну заглавную букву';
  }

  if (!validator.matches(value, /[0-9]/)) {
    return 'Пароль должен содержать хотя бы одну цифру';
  }

  return '';
};

React-компонент:

const [password, setPassword] = useState('');
const [error, setError] = useState('');

Работа с URL и телефонами

Validator.js содержит специализированные функции для форматов:

  • isURL
  • isMobilePhone

Пример проверки ссылки:

if (!validator.isURL(value, { require_protocol: true })) {
  setError('Введите корректный URL с протоколом');
}

Проверка телефона:

validator.isMobilePhone(value, 'ru-RU')

Это позволяет учитывать локальные форматы номеров.

Централизованная система валидации в React

При усложнении формы целесообразно вынести логику валидации в отдельный слой:

const validators = {
  email: (value) =>
    validator.isEmail(value) ? '' : 'Некорректный email',

  password: (value) =>
    validator.isLength(value, { min: 8 })
      ? ''
      : 'Пароль слишком короткий',
};

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

const validateField = (name, value) => {
  const validate = validators[name];
  return validate ? validate(value) : '';
};

Кастомный хук для валидации

В React часто используется инкапсуляция логики через хуки:

function useValidation(initialState, rules) {
  const [values, setValues] = useState(initialState);
  const [errors, setErrors] = useState({});

  const validate = (name, value) => {
    const rule = rules[name];
    return rule ? rule(value) : '';
  };

  const handleChange = (name, value) => {
    setValues({ ...values, [name]: value });

    setErrors({
      ...errors,
      [name]: validate(name, value),
    });
  };

  return { values, errors, handleChange };
}

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

const { values, errors, handleChange } = useValidation(
  { email: '', password: '' },
  {
    email: validator.isEmail,
    password: (v) => validator.isLength(v, { min: 8 }),
  }
);

Контроль частоты валидации

В React важно избегать избыточных проверок на каждый символ. Часто применяется задержка:

useEffect(() => {
  const timeout = setTimeout(() => {
    setError(validateEmail(email));
  }, 300);

  return () => clearTimeout(timeout);
}, [email]);

Это снижает нагрузку при сложных формах.

Разделение валидации и санитизации

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

  • trim
  • escape

Пример:

const safeValue = validator.trim(input);
const escaped = validator.escape(safeValue);

Важно разделять:

  • валидация — проверка корректности
  • санитизация — очистка или преобразование данных

Работа с несколькими полями формы

При больших формах используется объектная модель ошибок:

const [form, setForm] = useState({
  email: '',
  username: '',
});

const [errors, setErrors] = useState({
  email: '',
  username: '',
});

Обобщённая проверка:

const validateForm = (data) => {
  const newErrors = {};

  if (!validator.isEmail(data.email)) {
    newErrors.email = 'Ошибка email';
  }

  if (!validator.isLength(data.username, { min: 3 })) {
    newErrors.username = 'Слишком короткое имя';
  }

  return newErrors;
};

Использование в условиях сложной логики интерфейса

Validator.js хорошо комбинируется с условным рендерингом:

const isFormValid = Object.values(errors).every((e) => e === '');

Кнопка отправки:

<button disabled={!isFormValid}>
  Отправить
</button>

Особенности архитектуры в React-приложениях

При интеграции Validator.js в крупные проекты важно учитывать:

  • отсутствие побочных эффектов у функций
  • возможность мемоизации результатов валидации
  • разделение UI и бизнес-логики
  • использование единых правил валидации на уровне приложения

Validator.js выступает как слой чистой логики, который легко тестируется и переиспользуется в различных компонентах без привязки к React API.

Композиция проверок

Функции библиотеки легко комбинируются:

const isValidField = (value) =>
  validator.isLength(value, { min: 5 }) &&
  !validator.contains(value, ' ');

Такая композиция позволяет строить сложные правила без внешних зависимостей.

Обработка ошибок и UX-логика

В React важно отделять момент появления ошибки:

  • при вводе
  • при уходе из поля
  • при сабмите

Пример стратегии:

const [touched, setTouched] = useState(false);
{touched && error && <span>{error}</span>}

Это позволяет избежать раннего отображения ошибок.

Итеративная проверка форм

При динамических формах Validator.js применяется внутри циклов:

Object.keys(values).forEach((key) => {
  const error = validateField(key, values[key]);
  newErrors[key] = error;
});

Такой подход масштабируется на формы с десятками полей.

Поведение в реальных проектах React

В продакшн-приложениях Validator.js обычно используется вместе с:

  • кастомными хуками
  • контекстом (Context API)
  • библиотеками управления формами

При этом сама библиотека остаётся изолированным слоем, отвечающим исключительно за проверку строковых значений без влияния на архитектуру UI.

Оглавление