Часто одно из неудобств при работе с полями ввода и создании форм для вашего приложения заключается в попытке контролировать, какую информацию пользователь может предоставить вам, и как эта информация выглядит после ее получения.
Самый простой способ обеспечить согласованность данных, с которыми вы имеете дело, — это обрабатывать их у источника: ограничивать свободу пользователя.
К счастью, Cleave.js существует именно для того, чтобы решить нашу проблему.
Cleave — это библиотека JavaScript, которая обрабатывает форматирование входных значений в чистом и легко реализуемом шаблоне, так что вам не о чем беспокоиться. о трате времени или дополнительных строк кода, управляющих этим самостоятельно.
Здесь есть два очевидных преимущества:
- Пользователю предоставляется более качественная информация с их стороны; где текст разделен пробелами или символами, разбит на блоки и просто менее перемешан.
- Информация, которую вы извлекаете из входных данных, с меньшей вероятностью будет иметь проблемы, вызванные ошибкой и ошибкой пользователя, и не может быть большой разницы в способе ее ввода; где ввод может быть ограничен только цифрами или буквами или по умолчанию добавлены символы.
(Пример: пользователи могут вводить номер телефона с кодом города в скобках, разбивать его косой чертой, дефисом или вообще не вводить )
ЧТО ВКЛЮЧЕНО?
Хотя ниже приведены варианты использования, описанные в документации для Cleave.js, существует так много способов, которыми вы можете создать объект параметров, который вы можете предоставить Cleave, что практически все, что вам нужно, можно сделать с помощью этой библиотеки.
Встроенное форматирование:
- Номера кредитных карт
- Телефонные номера
- Даты
- Цифры
ОСНОВЫ
Давайте рассмотрим основы использования Cleave и объясним некоторые термины, с которыми вам необходимо ознакомиться, чтобы начать использовать его в своих проектах.
Разделители
Разделители представляют собой отдельные символы или последовательности символов. Их цель — установить границу между сегментами одного и того же потока данных (-, /, . и т. д.).
Блоки
Блоки в Cleave.js — это то, как вы настраиваете, где будут появляться пробелы (или, если вы настроили их появление, разделители). Если бы вы создавали ввод для телефонного номера, шаблон блока выглядел бы так: [3, 3, 4].
Узоры
Шаблоны существуют как возможное свойство в объекте параметров, поэтому существует отдельный шаблон для каждого типа поля ввода (timePattern, datePattern).
— — — — — — — — — — — — — — — — — — — — — — — — — —
Установка и импорт
Cleave.js можно легко установить через npm, также существует возможность использования CDN (там, где он доступен на jsDelivr или cdnjs.com).
Что касается совместимости фреймворка и библиотек, Cleave.js можно использовать с React.js в качестве компонента в JSX или с директивами Angular.js и включать в модель.
ПОСТРОЕНИЕ ПРИМЕРНОЙ ФОРМЫ
Например, мы будем использовать версию модуля ES6, но Cleave также можно использовать с методом CommonJS. Сама форма будет сделана с помощью React with Hooks.
Когда вы используете библиотеку и создаете экземпляр, обратите внимание, что экземпляр Cleave просто возвращает обычный элемент ввода. Это означает, что его можно стилизовать и манипулировать им так же, как обычно.
Вот пример кода:
А теперь давайте посмотрим, что здесь делается на самом деле.
Поскольку экземпляры Cleave возвращают стандартное поле ввода, нам не нужно делать ничего другого, кроме этого файла (конечно, после настройки index.html, который будет использоваться), чтобы начать видеть форму на странице.
- У вас есть возможность установить заполнитель и указать функцию, которая будет вызываться при изменении значения ввода, как обычно.
- Мы устанавливаем тип поля ввода, создавая объект, который будет задан для параметров, внутри мы устанавливаем желаемый тип в качестве свойства и значение этого свойства в логическое значение (в данном случае явно true).
- Для полей типа времени и даты мы можем предоставить массив шаблонов, также в объекте параметров. Здесь мы определяем формат данных. (Существуют и другие версии шаблонов, и некоторые из них можно увидеть в демоверсии в документации Github.)
- Разделители также будут установлены в объекте параметров. Вы можете указать один разделитель, и он будет использоваться вместо каждого пробела ИЛИ предоставить набор разделителей, которые будут использоваться в том порядке, в котором они появляются в массиве.
Пример этого находится в строке 43 в коде формы выше. Мы передаем не один, а два разделителя, и вместо стандартных специальных символов мы используем аббревиатуры «час» и «мин» для разделения наших числовых значений. Вы увидите результат этого во втором примере изображения ниже. - Важно также объяснить, что Cleave распознает все, что вы установили в качестве значения заполнителя, также как инструкции по форматированию. Отображается в первых двух полях, которые мы здесь создаем, для даты и времени, где мы не передаем никаких разделителей, но по-прежнему видим, что происходит форматирование: 00/00/0000 и 00:00.
Cleave использует стиль заполнителя и применяет его к полю, если вы не указали иное в отправляемом объекте параметров.
ПОСЛЕ ЦЕННОСТЕЙ
Вот как форма будет выглядеть для пользователя, когда он заполняет поля ввода.
Символы и аббревиатуры будут отображаться как вводимые пользователем, форматируя свою информацию в реальном времени, а также разрешая ввод только числовых значений с клавиатуры.
ВЫВОД::
Вот и все, на самом деле. Cleave.js — чрезвычайно простая в использовании библиотека, и, по моему опыту, использование ее более чем в одном приложении того стоит.
Существует гораздо больше вариантов использования, чем те, которые я описал здесь, некоторые из которых связаны с тем, как Cleave может помочь обрабатывать информацию о кредитных картах и платежах (не только с форматированием самих номеров карт, но и с идентификацией типа карты и с управлением другими информация, которая будет предоставлена в кассе или платежной форме (exp, CCV и т.д.)) и номер телефона/данные для связи.
Проверьте это сами и сделайте свою жизнь немного проще.
