Метод getRawValue

Метод getRawValue() в библиотеке Cleave.js предназначен для получения «сырого» значения поля ввода, то есть значения без форматирования, масок, разделителей и любых визуальных преобразований, наложенных библиотекой. В отличие от отображаемого значения, которое пользователь видит в input, результат getRawValue() представляет собой чистую, логическую форму данных, пригодную для отправки на сервер, вычислений или дальнейшей обработки.

Понятие сырого значения в Cleave.js

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

1234 5678 9012 3456

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

1234567890123456

Именно это значение и возвращается через getRawValue().

Ключевые характеристики сырого значения:

  • отсутствие разделителей (space, -, /, .)
  • отсутствие префиксов и суффиксов
  • отсутствие масок и блоков отображения
  • нормализованная структура данных

Сигнатура метода

В классической реализации Cleave.js метод вызывается на экземпляре объекта:

const cleave = new Cleave(inputElement, {
    creditCard: true
});

const raw = cleave.getRawValue();

Возвращаемое значение всегда строкового типа, даже если исходные данные числовые.

Поведение в различных режимах форматирования

Числовой режим (numeral)

При использовании numeral: true форматирование может включать:

  • разделители тысяч
  • десятичные знаки
  • префиксы валют

Пример конфигурации:

const cleave = new Cleave(inputElement, {
    numeral: true,
    numeralThousandsGroupStyle: 'thousand'
});

Ввод:

1,234,567.89

Результат getRawValue():

1234567.89

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

Работа с блоками (blocks)

При использовании масок через blocks и delimiter:

const cleave = new Cleave(inputElement, {
    blocks: [4, 4, 4, 4],
    delimiter: '-'
});

Ввод:

1234-5678-9012-3456

Результат:

1234567890123456

Метод полностью игнорирует структуру блоков, возвращая непрерывную строку.

Префиксы (prefix)

При наличии префикса:

const cleave = new Cleave(inputElement, {
    prefix: 'USD ',
    numeral: true
});

Ввод:

USD 12,300

Результат getRawValue():

12300

Префикс удаляется полностью, так как относится к отображению, а не к данным.

Телефонные номера

В режиме телефонных масок:

const cleave = new Cleave(inputElement, {
    phone: true,
    phoneRegionCode: 'US'
});

Ввод:

+1 (202) 555-0123

Результат:

12025550123

Сохраняется только цифровая часть, включая код страны, если он был введён.

Отличие от value и свойства rawValue

Cleave.js поддерживает несколько способов доступа к данным:

  • input.value — визуальное значение с форматированием
  • cleave.getRawValue() — очищенное значение
  • внутреннее свойство cleave.rawValue — синхронизированное состояние

Основное различие заключается в том, что value всегда отражает DOM, тогда как getRawValue() извлекает нормализованные данные независимо от отображения.

Влияние конфигурации на результат

Результат getRawValue() зависит от активных опций Cleave.js.

numeralDecimalMark

numeralDecimalMark: ','

Ввод:

1.234,56

Результат:

1234.56

Символ десятичного разделителя нормализуется к точке.

noImmediatePrefix

При отключении немедленного отображения префикса:

noImmediatePrefix: true

Это влияет только на UI-поведение, не затрагивая результат getRawValue().

delimiterLazyShow

Отложенное отображение разделителей не влияет на сырые данные, так как разделители всегда считаются исключительно представлением.

Применение в обработке данных

Метод используется в сценариях, где требуется стабильное значение без форматирования.

Типовые случаи:

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

Пример отправки:

const payload = {
    cardNumber: cleave.getRawValue()
};

fetch('/api/payment', {
    method: 'POST',
    body: JSON.stringify(payload)
});

Особенности поведения при удалении символов

При интерактивном вводе Cleave.js поддерживает синхронизацию состояния. Даже если пользователь удаляет часть форматированных данных, getRawValue() возвращает актуальное состояние без необходимости ручной очистки строки.

Пример:

Ввод:

12-34-56

Удаление:

12-34

Результат:

1234

Ограничения метода

Несмотря на универсальность, метод имеет ряд особенностей:

  • всегда возвращает строку, даже для числовых значений
  • не выполняет валидацию корректности данных
  • не интерпретирует смысл значения (например, валюту или регион)
  • зависит от текущей конфигурации экземпляра Cleave.js

Поведение при динамическом изменении опций

Если конфигурация Cleave.js изменяется после инициализации, результат getRawValue() может изменяться в зависимости от новых правил форматирования.

Пример:

cleave.setRawValue('123456');

cleave.options.prefix = '$ ';

После изменения форматирования визуальное значение обновляется, однако getRawValue() сохраняет исходную нормализованную строку без символов отображения.

Взаимодействие с setRawValue

Метод часто используется совместно с setRawValue(), который позволяет задать значение без форматирования:

cleave.setRawValue('987654321');
const value = cleave.getRawValue();

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

Типичные ошибки при использовании

Распространённые проблемы связаны с неправильным ожиданием типа данных:

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

В Cleave.js разделение ролей строго фиксировано: отображение и данные существуют независимо.

Роль в архитектуре Cleave.js

Метод getRawValue() является частью внутренней модели синхронизации состояния. Он выступает точкой доступа к нормализованному представлению данных, на котором строятся:

  • валидация
  • сериализация
  • интеграция с backend
  • управление состоянием формы
Оглавление