Что возвращают маски
Что возвращают функции масок и что попадает в поле, в v-model и в данные. Все примеры — настоящий вывод tinyval-mask.
Кратко
| Функция | Возвращает | Пример для phone() |
|---|---|---|
mask(value, m) | Строку для поля | '+7 (999) 123-45-67' |
unmask(value, m) | Строку для данных и базы | '79991234567' |
isComplete(value, m) | true, если все обязательные позиции заполнены | true |
isValid(value, m) | true, если заполнено и правильно по смыслу (дата существует, контрольная сумма сходится) | true |
m.process(value) | Всё сразу — объект MaskResult, см. ниже | |
attach → onChange | { value, raw, complete } при каждом изменении поля | |
v-mask + v-model | В модели — строка с маской | '+7 (999) 123-45-67' |
v-mask.raw + v-model | В модели — значение без маски, как у unmask | '79991234567' |
Все функции возвращают строки: даже числовая маска отдаёт '1234.5', а не 1234.5 — чтобы не терять ведущие нули и точность. Число получают через Number(...) или coerce.number.
Что возвращает unmask
Значение без маски зависит от маски — это то, что удобно хранить:
| Маска | В поле | unmask |
|---|---|---|
Свой шаблон '99-99' | 12-34 | '1234' — введённые символы без литералов |
phone() | +7 (999) 123-45-67 | '79991234567' — все цифры с кодом страны |
card() | 4276 1234 5678 9012 | '4276123456789012' |
numberMask(), money() | 1 234,5 ₽ | '1234.5' — формат JavaScript: точка, без пробелов |
numberMask({ negative: true }) | -42 | '-42' |
carPlate() | А 123 ВС 77 | 'А123ВС77' — кириллицей, даже если вводили латиницей |
kpp(), mac() | 7743AB001 | '7743AB001' — в верхнем регистре |
Если маска заполнена не до конца, unmask вернёт то, что успели ввести: unmask('8999123', phone()) → '7999123'. Проверить заполненность — isComplete.
MaskResult — всё сразу
mask.process(value) возвращает полный результат. Он нужен, если вы пишете свою привязку к полю или компонент:
phone().process('8999123');{
"value": "+7 (999) 123",
"raw": "999123",
"complete": false,
"valid": false,
"slots": [4, 5, 6, 9, 10, 11],
"overflow": false
}| Поле | Описание |
|---|---|
value | Отформатированное значение — то же, что вернёт mask |
raw | Введённые символы на позициях шаблона, без литералов. У телефона здесь нет кода страны: +7 — часть шаблона. Поэтому для данных используйте unmask, а не raw |
complete | Все обязательные позиции заполнены — то же, что isComplete |
valid | Заполнено и правильно по смыслу — то же, что isValid |
slots | Индексы введённых символов в value — по ним ставится курсор |
overflow | Во вводе остались символы, которые не поместились: process('1234567') для '99-99' → true |
Почему raw и unmask различаются: raw — служебное значение маски (по нему считается курсор), а unmask — значение для данных, и каждая маска решает, каким оно должно быть. Для своих шаблонов они совпадают.
В поле, в v-model и в данных
| Где | Значение |
|---|---|
В <input> | +7 (999) 123-45-67 |
В v-model | '+7 (999) 123-45-67' — то же, что в поле; с v-mask.raw — '79991234567' |
В onChange у attach | { value: '+7 (999) 123-45-67', raw: '79991234567', complete: true, valid: true } — здесь raw уже результат unmask |
| В данных для сервера | '79991234567' — после unmask в схеме, см. Маски и валидация |
Модель хранит значение с маской специально: так поле и модель всегда совпадают, а «чистое» значение получается в одном месте — в схеме перед отправкой.
См. также
- mask, unmask, isComplete
- Готовые маски — пример значения без маски для каждой
- Маски и валидация