Регистрационная форма с телефоном

Для работы с телефонными номерами в формах Cleave.js предоставляет встроенный функционал маскировки и форматирования. Основной способ использования заключается в создании нового экземпляра Cleave с указанием селектора поля и конфигурации:

const phoneInput = new Cleave('#phone', {
    phone: true,
    phoneRegionCode: 'RU',
    delimiter: ' ',
    numericOnly: true
});

Ключевые параметры:

  • phone: true — активирует форматирование телефонного номера.
  • phoneRegionCode — задает страновой код для локализации формата.
  • delimiter — символ, используемый для разделения частей номера.
  • numericOnly: true — разрешает ввод только цифр.

Это гарантирует корректное отображение номера при вводе: например, для России формат будет автоматически преобразован в +7 999 999-99-99.

Работа с динамическими масками

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

const multiPhoneInput = new Cleave('#multi-phone', {
    phone: true,
    phoneRegionCode: 'US',
    onValueChanged: function(e) {
        const value = e.target.rawValue;
        if (value.startsWith('7')) {
            multiPhoneInput.setPhoneRegionCode('RU');
        }
    }
});

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

  • onValueChanged позволяет реагировать на изменение ввода и корректировать маску.
  • setPhoneRegionCode() — динамическая смена региона без перезапуска компонента.

Это особенно полезно для форм, принимающих международные номера, где пользователь может вводить номер в любом формате.

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

Для регистрационных форм критически важно, чтобы Cleave.js работал в связке с валидацией. Наиболее распространенный подход — использование событий input и blur для проверки формата и длины номера:

const form = document.querySelector('#registration-form');
const phoneField = document.querySelector('#phone');

phoneField.addEventListener('blur', () => {
    const rawNumber = phoneInput.getRawValue();
    if (rawNumber.length < 10) {
        phoneField.classList.add('error');
    } else {
        phoneField.classList.remove('error');
    }
});

Выделенные моменты:

  • getRawValue() возвращает номер без форматирования.
  • Проверка длины номера позволяет предотвратить отправку некорректных данных.
  • Добавление CSS-классов для ошибок улучшает UX и визуально сигнализирует о проблеме.

Форматирование при вставке данных

Cleave.js автоматически применяет маску при вставке текста, но можно усилить контроль через событие onValueChanged:

const phonePasteInput = new Cleave('#paste-phone', {
    phone: true,
    phoneRegionCode: 'RU',
    onValueChanged: function(e) {
        let value = e.target.rawValue.replace(/\D/g, '');
        if (value.length > 11) {
            value = value.slice(0, 11);
            e.target.value = value;
        }
    }
});

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

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

Интеграция с библиотеками UI

Cleave.js легко сочетается с популярными фреймворками и библиотеками, например, с Bootstrap или Material UI:

<div class="form-group">
    <label for="phone">Телефон</label>
    <input type="text" id="phone" class="form-control">
</div>
new Cleave('#phone', {
    phone: true,
    phoneRegionCode: 'RU',
    delimiter: ' ',
});

Особенности интеграции:

  • Маска работает без изменения стилей библиотеки.
  • Можно использовать динамическое добавление/удаление полей в формах с массивами данных.
  • Cleave.js поддерживает работу с React, Vue и Angular через обертки или нативные хуки событий.

Обработка нестандартных сценариев

Иногда номера содержат дополнительные коды, например, внутренние добавочные номера. Для таких случаев можно использовать кастомные блоки:

const extendedPhone = new Cleave('#ext-phone', {
    blocks: [2, 3, 3, 2, 2], 
    delimiters: ['+', ' ', '-', '-'], 
    numericOnly: true
});

Разбор конфигурации:

  • blocks — массив длин сегментов номера.
  • delimiters — массив символов-разделителей между сегментами.
  • Полный контроль над форматом позволяет создавать корпоративные формы с внутренними номерами или нестандартными масками.

Сочетание с AJAX и автоподстановкой

При регистрации телефон часто проверяется через API для отправки кода подтверждения. Cleave.js позволяет легко получать очищенное значение для отправки на сервер:

const phoneField = document.querySelector('#phone');
const phoneCleave = new Cleave(phoneField, {
    phone: true,
    phoneRegionCode: 'RU',
});

document.querySelector('#send-code').addEventListener('click', () => {
    const rawNumber = phoneCleave.getRawValue();
    fetch('/api/send-sms', {
        method: 'POST',
        headers: {'Content-Type': 'application/json'},
        body: JSON.stringify({phone: rawNumber})
    });
});

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

  • getRawValue() обеспечивает передачу чистого номера без форматирования.
  • Интеграция с сервером не требует дополнительных преобразований.
  • Поддерживает асинхронные проверки и динамическое подтверждение номера.

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

Оглавление