Интеграция с HTML формами

Интеграция с HTML-формами при использовании библиотеки validator.js строится вокруг принципа явной проверки значений полей до отправки данных на сервер. Основная идея заключается в том, что значения из DOM извлекаются, проходят набор правил валидации и только затем допускаются к дальнейшей обработке.

Подключение библиотеки в клиентском приложении может выполняться через npm или CDN:

npm install validator

Либо через модульную систему:

import validator from 'validator';

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

Получение данных из HTML-формы

HTML-форма выступает источником сырых данных, которые требуют нормализации и проверки:

<form id="registrationForm">
  <input type="text" name="email" />
  <input type="password" name="password" />
  <button type="submit">Отправить</button>
</form>

Извлечение значений обычно выполняется через FormData:

const form = document.getElementById('registrationForm');

form.addEventListener('submit', (event) => {
  event.preventDefault();

  const data = new FormData(form);

  const email = data.get('email');
  const password = data.get('password');
});

На этом этапе данные остаются необработанными, включая пробелы, регистр и потенциальные ошибки ввода.

Проверка email и базовых строковых значений

Одним из наиболее распространённых сценариев является проверка email:

import validator from 'validator';

const isEmailValid = validator.isEmail(email);

Функция isEmail проверяет соответствие стандартному формату адреса электронной почты. Важно учитывать, что проверка выполняется только на уровне синтаксиса, без обращения к почтовому серверу.

Дополнительные проверки строк:

validator.isLength(password, { min: 8 });
validator.isAlphanumeric(password);

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

Интеграция с обработчиком submit

HTML-форма обычно блокируется до завершения валидации:

form.addEventListener('submit', (event) => {
  event.preventDefault();

  const data = new FormData(form);

  const email = data.get('email');
  const password = data.get('password');

  const errors = {};

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

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

  if (Object.keys(errors).length === 0) {
    form.submit();
  }
});

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

Реакция интерфейса на ошибки

Связь между Validator.js и DOM реализуется через отображение состояния ошибок:

function showError(fieldName, message) {
  const errorElement = document.querySelector(`.error-${fieldName}`);
  errorElement.textContent = message;
}

Использование структурированной модели ошибок упрощает масштабирование формы:

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

Валидация в реальном времени

Проверка данных может выполняться не только при отправке формы, но и при вводе:

const emailInput = document.querySelector('input[name="email"]');

emailInput.addEventListener('input', (e) => {
  const value = e.target.value;

  if (!validator.isEmail(value)) {
    showError('email', 'Email введён неверно');
  } else {
    showError('email', '');
  }
});

Такой режим снижает количество ошибок на этапе отправки и улучшает интерактивность интерфейса.

Нормализация данных перед валидацией

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

const normalizedEmail = validator.trim(validator.normalizeEmail(email));

Удаление лишних пробелов и приведение к стандартному виду повышает точность проверок.

Кастомные правила поверх Validator.js

Несмотря на широкий набор функций, часто требуется расширение логики:

function isStrongPassword(value) {
  return (
    validator.isLength(value, { min: 10 }) &&
    /[A-Z]/.test(value) &&
    /[0-9]/.test(value)
  );
}

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

Группировка валидации полей формы

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

function validateForm(data) {
  return {
    email: validator.isEmail(data.email) ? null : 'Ошибка email',
    password: validator.isLength(data.password, { min: 8 })
      ? null
      : 'Слабый пароль',
  };
}

Результат представляет собой объект ошибок, который легко сопоставляется с полями DOM.

Обработка состояния формы

Состояние формы часто хранится отдельно от DOM:

const state = {
  email: '',
  password: '',
  errors: {},
};

Обновление состояния происходит при каждом изменении:

state.email = emailInput.value;
state.errors = validateForm(state);

Это позволяет отделить логику валидации от представления.

Взаимодействие с HTML-атрибутами

HTML5-атрибуты могут использоваться совместно с Validator.js:

<input type="email" required minlength="5" />

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

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

Обработка сложных форм с несколькими зависимыми полями

При наличии взаимосвязанных полей (например, подтверждение пароля) логика усложняется:

if (password !== confirmPassword) {
  errors.confirmPassword = 'Пароли не совпадают';
}

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

Оптимизация частоты проверок

При интенсивной валидации применяется debounce:

function debounce(fn, delay) {
  let timer;
  return (...args) => {
    clearTimeout(timer);
    timer = setTimeout(() => fn(...args), delay);
  };
}

И затем:

emailInput.addEventListener('input', debounce(validateEmail, 300));

Это снижает количество вызовов функций валидации при наборе текста.

Обработка форм с динамическими полями

Если поля добавляются динамически, валидация строится через делегирование событий:

form.addEventListener('input', (event) => {
  const { name, value } = event.target;

  if (name === 'email') {
    if (!validator.isEmail(value)) {
      showError('email', 'Ошибка');
    }
  }
});

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

Стандартизация правил валидации

Для крупных приложений правила выносятся в отдельный модуль:

export const rules = {
  email: (value) => validator.isEmail(value),
  password: (value) => validator.isLength(value, { min: 8 }),
};

Это обеспечивает единообразие логики проверки во всех формах приложения.

Оглавление