Интеграция с системами валидации

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

Настройка Cleave.js для последующей валидации

Фундаментальным шагом является правильная конфигурация Cleave.js. Для каждого типа данных следует задавать подходящий режим ввода:

const cleaveCard = new Cleave('#card-number', {
    creditCard: true,
    onValueChanged: function(e) {
        validateField('#card-number', e.target.rawValue);
    }
});

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

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

Валидация числовых и денежных полей

Для числовых или денежных данных важно учитывать разделители и десятичные знаки. Cleave.js позволяет работать с ними через numeral и numeralDecimalMark:

const cleaveAmount = new Cleave('#amount', {
    numeral: true,
    numeralThousandsGroupStyle: 'thousand',
    numeralDecimalMark: '.',
    onValueChanged: function(e) {
        const value = parseFloat(e.target.rawValue);
        validateAmount(value);
    }
});

Принципы:

  • Использование parseFloat для корректной работы с форматированными числами.
  • Поддержка тысячных разделителей и пользовательских десятичных знаков позволяет предотвращать ошибки при валидации и последующей обработке.

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

Существует несколько стратегий интеграции Cleave.js с библиотеками валидации, такими как Formik, VeeValidate, jQuery Validation или собственные решения:

  1. Событие onValueChanged — передача rawValue в проверочную функцию.
  2. Динамическая смена состояния формы — обновление состояния ошибок на лету.
  3. Синхронизация с моделью данных — хранение неформатированных значений в объекте формы.

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

function validateField(selector, value) {
    const field = document.querySelector(selector);
    if (!/^\d{16}$/.test(value)) {
        field.classList.add('error');
        field.dataset.error = 'Неверный формат номера карты';
    } else {
        field.classList.remove('error');
        delete field.dataset.error;
    }
}

Работа с масками и пользовательскими шаблонами

Cleave.js поддерживает произвольные шаблоны масок через blocks и delimiter. Для интеграции с валидацией необходимо учитывать:

  • Совпадение длины и шаблона: blocks должны отражать ограничения системы валидации.
  • Контроль символов через numericOnly и пользовательские регулярные выражения.
  • Адаптация сообщений об ошибках под конкретные шаблоны.

Пример для маски телефона:

const cleavePhone = new Cleave('#phone', {
    phone: true,
    phoneRegionCode: 'RU',
    onValueChanged: function(e) {
        const value = e.target.rawValue;
        validatePhone(value);
    }
});

function validatePhone(number) {
    if (!/^\d{10,11}$/.test(number)) {
        document.querySelector('#phone').classList.add('error');
    } else {
        document.querySelector('#phone').classList.remove('error');
    }
}

Асинхронная валидация

Интеграция с внешними системами проверки, такими как API для проверки BIN-кодов карт или проверка уникальности email, требует использования async/await:

cleaveEmail.onValueChan ged = async function(e) {
    const email = e.target.rawValue;
    const isValid = await checkEmailUniqueness(email);
    if (!isValid) {
        e.target.classList.add('error');
    } else {
        e.target.classList.remove('error');
    }
};

Важные детали:

  • Всегда использовать rawValue для отправки данных на сервер.
  • Обрабатывать состояния загрузки и ошибки без задержки пользовательского интерфейса.

Объединение Cleave.js с кастомными правилами валидации

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

  1. Хранить оригинальное значение через rawValue.
  2. Создавать отдельный модуль валидации, который получает данные без форматирования.
  3. Вызывать обновление состояния ошибок после каждого изменения ввода.
function complexValidation(value) {
    if (!/^\d{4}-\d{4}-\d{4}-\d{4}$/.test(value)) return false;
    if (!passesLuhnCheck(value)) return false;
    return true;
}

Поддержка реактивных фреймворков

В Vue.js, React или Svelte Cleave.js можно обернуть в компонент с управлением состоянием:

  • React: использовать useEffect для синхронизации rawValue с состоянием формы.
  • Vue.js: двусторонняя привязка через v-model и @input.
  • Svelte: реактивные переменные и событие on:input.
<Cleave
  options={{ creditCard: true }}
  value={cardNumber}
  onCha nge={(e) => setCardNumber(e.target.rawValue)}
/>

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

  • Ограничивать сложные операции в onValueChanged, чтобы не блокировать интерфейс.
  • Использовать debounce для асинхронной валидации.
  • Поддерживать визуальные подсказки, отличая форматирование от ошибок валидации.

Интеграция Cleave.js с системами валидации позволяет создавать формы с высококачественным UX, минимизируя ошибки ввода и упрощая работу с данными. Она сочетает гибкость форматирования и строгие требования к корректности значений.

Оглавление