Как сделать инпут, который может принимать телефон или email?

Question

[Андрей]

Привет. Нужно сделать инпут, в который можно вписать или почту или телефон.
Проблема в том, что телефон нужно форматировать с помощью маски и устанавливать тип инпута, как числовой.

Делаю на vue, пробовал vue-the-mask и v-mask. Они не принимают значения null или false, поэтому маска обязательно должна быть, а мне кажется, что маску для email написать невозможно. Пробовал ставить два инпута рядом по условию, что если маска есть, то отобразим инпут с маской, если нет, то отобразим простой инпут, но работает до жути криво и непонятно почему. :(

Answer 1

[Дмитрий Беляев]

Answer 2

[profesor08]

Встречал такие формы, самое удобное решение это два разных инпута, и точка. Автозаполнение работает исправно, появляется правильная клавиатура на мобилках, никаких прочих проблем не возникает, автоматическое форматирование удобно только тем, кому не приходится заполнять такие формы. Пожалей юзеров и сделай щедящую.

Comments

[Александр Крайс]

Вопрос жеж стоял не в том, что по вашему мнению лучше сделать, а как решить конкретную задачу.

Обожаю ответы ради ответов

Answer 3

[Vlad_Murashchenko]

Оставьте текстовым полем, не нужно никаких масок. На onBlur + onSubmit проверяйте что это корректный имейл или телефон, если ни одного ни другое показывайте ошибку. Это самое простое решение и его вам скорее всего будет достаточно.

Можно добавить проверку во время ввода и которая будет проверять 2 случая сразу.
1) введённые данные не подходит ни для одного ни для второго
2) уже понятно, что это имейл, валидируем как имейл (в случае есть какая-то буква или @)

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

Решение которое предложил Дмитрий Беляев будет сложно поддерживать в проекте, хотя оно действительно решает задачу именно так как она была поставлена.

Answer 4

[iordania]

В качестве UI решения предложил бы сделать кнопку смены ввода данных - в таком случае сможите отдельно валидировать email и отдельно телефон

Comments

[Андрей]

Ну, это решение совсем "в лоб". Такая идея была и сразу отпала, в интерфейсе не очень красиво будет)

[Dimonchik]

а если телефон не устанавливать как числовой?