@AndrewRusinas

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

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

Делаю на vue, пробовал vue-the-mask и v-mask. Они не принимают значения null или false, поэтому маска обязательно должна быть, а мне кажется, что маску для email написать невозможно. Пробовал ставить два инпута рядом по условию, что если маска есть, то отобразим инпут с маской, если нет, то отобразим простой инпут, но работает до жути криво и непонятно почему. :(
  • Вопрос задан
  • 706 просмотров
Пригласить эксперта
Ответы на вопрос 5
aleksejjjj
@aleksejjjj
Я бы вообще от форматирования отказался. Оставьте текстовое поле. Для юзера всегда будет криво. Вот посмотрите на ответ Дмитрий Беляев Да, на первый взгляд работает НО как насчёт адреса 123@mail.com? Поле теперь ожидает телефон и юзер бесится. Некоторые вообще номер телефона указывают, например 89990000000@mail.ru. Автоматически вы его никак не распознаете.
Ответ написан
profesor08
@profesor08
Встречал такие формы, самое удобное решение это два разных инпута, и точка. Автозаполнение работает исправно, появляется правильная клавиатура на мобилках, никаких прочих проблем не возникает, автоматическое форматирование удобно только тем, кому не приходится заполнять такие формы. Пожалей юзеров и сделай щедящую.
Ответ написан
@Vlad_Murashchenko
Оставьте текстовым полем, не нужно никаких масок. На onBlur + onSubmit проверяйте что это корректный имейл или телефон, если ни одного ни другое показывайте ошибку. Это самое простое решение и его вам скорее всего будет достаточно.

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

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

Решение которое предложил Дмитрий Беляев будет сложно поддерживать в проекте, хотя оно действительно решает задачу именно так как она была поставлена.
Ответ написан
@iordania
В качестве UI решения предложил бы сделать кнопку смены ввода данных - в таком случае сможите отдельно валидировать email и отдельно телефон
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы