NumberComponent
Описание
Компонент, используемый для проверки введённого номера телефона пользователя с возможностью задания маски номера
Содержание
Установка компонента
Компонент можно установить из npm, используя команду:
npm install @droidroot/number_component
Использование компонента
Для использования компонента необходмо выполнить следующие шаги:
- Необходимо импортировать и зарегистрировать его в customElements:
import { NumberComponent } from '@droidroot/number_component
customElements.define('number-component', NumberComponent)
- После этого можно использовать его как HTML элемент:
<number-component mask="маска номера"></number-component>
- Маску можно изменять и после создания компнонента, изменяя поле Mask:
const nc = document.getElementsByTagName('number-component')
nc.Mask = 'маска номера'
- Получить строку, соответствующую заполненному компоненту, используя поле PhoneNumber:
const nc = document.getElementsByTagName('number-component')
nc.PhoneNumber
- Если после проверки номер оказался неверным, можно установить флаг ошибка с помощью поля Error:
const nc = document.getElementsByTagName('number-component')
nc.Error = true
- Проверить правильность маски можно с помощью метода checkMask():
NumberComponent.checkMask('маска номера')
В случае корректности маски вернёт список симовлов, из которых она состоит, иначе -1.
Формат маски
Маска задается как строка, состоящая из следующих элементов:
"I" - одиночный инпут для ввода одной цифры
"X" - серый блок с символом "X"
"*" - серый блок с символом "●"
<цифра> - серый блок с введенной цифрой
<не цифра> - символ отображается "как есть"
Пример маски:
+7(985)0II-XX-**