Учимся работать с маской телефона
В справочнике «Информационные карты» хранятся карты покупателей разных видов, в том числе дисконтные карты. Изначально в справочнике нет возможности хранить номер телефона клиента. Такую возможность нужно реализовать. Также нужна возможность удобного поиска по информационным картам по номеру телефона. При этом нужно добавить маску номера 994 (xx) xxx-xx-xx.
Исходные данные:
1. Бухгалтерия предприятия 3.0.71.83
2. Платформа 8.3.16.1224
Решение задачи:
Часть 1. Хранение номера телефона в базе данных и отображение на форме:
Если мы сохраним маску на уровне реквизита справочника, то в базе данных телефон будет храниться с маской:
и нам будет не удобно делать поиск, так как маски могут использоваться разные. Оператор запросто может запутаться, в каком формате вводить номер телефона для поиска.
Для решения данной задачи лучше всего хранить номер телефона без маски, а телефон с маской формировать и отображать непосредственно в форме. Добавим маску телефон на уровне элемента формы справочника:
Разберем саму маску. «\9\9\4» означает, что мы хотим, чтобы маска начиналась с цифр 994. Круглые скобки нужны для удобства восприятия, а цифра «9» в маске означает, что можно ввести произвольный символ цифры.
Для того, чтобы номер телефона в базе данных хранился только в виде цифр, в модуле объекта в процедуре ПередЗаписью() сделаем вызов метода ОставитьВСтрокеТолькоЦифры(), который разместим в модуле менеджера, так как он будет вызываться как из модуля объекта, так и из модуля формы.
Модуль менеджера:
Телефон на форме с маской выглядит так:
В базе данных хранится в виде:
Таким образом первая часть задачи решена.
Часть 2. Вывод телефона с маской на форму:
Что получилось на данный момент:
1. Мы добавили маску для телефона на уровне элемента формы;
2. Мы научились сохранять телефон в базу в виде цифр.
Если мы протестируем работу формы на данном этапе, то обнаружим, что телефон, который вводился пользователем как:
после сохранения информации будет отображаться как:
Почему так происходит?
Дело в том, что на момент написания статьи Платформа, к сожалению, еще не умеет корректно преобразовывать телефон в виде цифр в телефон по маске. Поэтому нам потребуется написать функцию, которая будет преобразовывать телефон, который мы храним в базе данных, в телефон, который будет отображаться на форме, с учетом маски. Функция не претендует на универсальность, она лишь является примером, как можно реализовать подобный функционал для решения текущей задачи:
В функцию ПреобразоватьСтрокуПоМаске() передаем телефон, содержащий только цифры, и маску. В цикле проходим по каждому символу маски:
Если текущий символ маски равен «\», то пропускаем его. Если текущий символ — цифра, выводим цифру из номера телефона по порядку. Для всех остальных символов — выводим символ «как есть».
Далее в модуле формы элемента справочника в процедуре ПриСозданииНаСервере() прописываем код, который преобразует телефон из базы данных в телефон по маске:
Далее чтобы телефон по маске корректно отображался при всех событиях формы в модуле формы элемента справочника прописываем:
Таким образом задача решена. С одной стороны оператору удобно делать поиск карты по номеру телефон без маски:
С другой стороны номер телефона хранится в базе в удобном для поиска виде. При этом на форме номер телефона выводится в виде, удобном для пользователя.
Проверяем телефонные номера со всего мира, используя решение от Google
Всем нам рано или поздно приходится возиться с проверкой телефонных номеров в формах заявок. Обычно причиной является слишком большое количество треша: пользователи от нечего делать шлют рандомные номера в ПП, мы из-за этого видим большое число лидов в Facebook и в трекере, радуемся, а потом всё это падает в треш и GG WP.
Будем бороться с невалидными номерами и для начала рассмотрим, как мы обычно решаем эту задачу.
Убираем пустые номера
Самое первое, что нужно сделать, если этого не сделала за вас ПП – это убрать возможность отсылать форму с пустым номером. Для этого достаточно добавить к полю ввода номера атрибут required .
<input type=»text» name=»phone» required/>
Теперь при попытке нажать на кнопку отправки пользователю будет показано сообщение о необходимости заполнить поле телефона:
Также хорошо было бы изменить тип поля на tel и добавить автозаполнение. Про это прочитаете на моём телеграм-канале.
Маски ввода
Стандартное решение на сегодняшний день. Маска представляет собой шаблон номера для выбранного ГЕО и обычно включает в себя 2 вещи: длина номера и набор доступных цифр. Выглядит примерно так (для RU):
Девятки в данном случае обозначают любую цифру. Поэтому, чтобы второй цифрой номера была именно девятка перед ней стоит слеш. Итого в номере должно быть 11 цифр, из них первая должна быть семёркой, вторая девяткой, а остальные любые.
На страницу подключают какой-нибудь JavaScript-плагин (обычно это InputMask) и пишут примерно такой код:
Плюсы метода: работает, просто подключить
Минусы метода: приходится разбираться, как в том или ином ГЕО выглядят валидные номера телефонов и писать под них маски. Если ошибёшься, то потеряешь лиды. Иногда пользователи начинают писать свой номер с кодом страны, хотя обычно код уже выставлен в маске, что ведёт к неправильным номерам в заявке. Иногда номера в стране могут быть разной длины, написать под такое маску становится тем ещё гемором.
LibPhoneNumber от Google
У корпорации Google существует своё решение для парсинга, форматирования и валидации телефонных номеров. Мы с вами не будем использовать его напрямую, а рассмотрим другую JavaScript-библиотеку International Telephone Input. Она удобнее в использовании и при этом под капотом юзает это же решение от гугла.
Кратко пробежимся по тому, что у нас получится в итоге:
- Наш скрипт будет автоматом определять страну пользователя по его IP-адресу и в поле ввода телефона показывать флаг этой страны
- После ввода каждой цифры скрипт будет проверять валидность номера и не будет давать отправлять форму с некорректным номером
Плюсы метода: работает для всех стран, не нужно выдумывать маски
Минусы метода: не ограничивает пользователя при вводе, но на это пофиг, ибо отправить дичь всё равно не получится!
Подключение и использование
Первым делом открываем пример и смотрим, как подключать библиотеку к своим лендам. Для этого добавляем в тег <head> ссылку на бибилотеку и css-стиль.
После этого добавляем сразу после тега <body> скрипт, который подключит проверку номеров для ваших полей ввода во всех формах на странице.
А теперь смотрите на выделенное красным поле: как вы понимаете, в моём примере поставлена проверка для гео RU, а нам надо бы сделать так, чтобы работало универсально. Рассмотрим 2 варианта.
Делаем скрипт универсальным, используя Кейтаро
Если у вас есть под рукой трекер Кейтаро, то всё проще пареной репы, вместо
Когда пользователь попадёт к вам на ленд, Кейтаро автоматом заменит макрос
Делаем скрипт универсальным, используя JS-код
Идея в следующем: пользователь заходит на страницу, скрипт сам пробивает его IP по геобазе и определяет страну. Для этого нужно выставить страну в ‘auto’ и прописать функцию определения страны.
В данном случае используется JQuery, чтобы отправить запрос и база IpInfo.io. Хотите – используйте любую другую.
Результат
При попытке отправить невалидный номер юзер получает от ворот поворот, что нам и требовалось.
Управление форматами данных пользователей на сайте. Добавление маски для ввода номера телефона
Маска для полей ввода телефонных номеров — своеобразный шаблон или набор правил, по которым пользователь обязан вводить информацию в поля форм. Их используют, если необходимо, чтобы все пользователи присылали свои номера телефонов в одном формате, например: +375 (хх) ххх-хх-хх
Пример использования маски
Такие маски используются, как правило, в полях для ввода телефонных номеров:
- в формах заказа обратной связи;
- в формах оформления заказа на покупку;
- в формах заказа консультаций;
- и т.п.
Примеры использования
Для более чёткого восприятия данные вводятся постепенным нажиманием цифр 1−2-3−4-5-…
Пример 1.
Маска с предварительной подсказкой (плейсхолдером).
Пользователя такой вариант может ввести в лёгкий конфуз. Ведь вряд ли он ожидает, что код страны будет введён автоматически, когда он начнёт вводить свой номер.
Пример 2.
Маска с заранее вставленным кодом страны
Такой вариант более понятен пользователю.
Пример 3.
Маска с выбором страны
Такая маска имеет смысл только для международных компаний.
На первый взгляд использование масок для ввода номеров телефонов может показаться очень хорошим вариантом. Но не спешите с выводами.
Преимущества масок
- Номера телефонов приходят менеджерам в едином формате.
- Наглядное отображение правил ввода.
- Пользователю не нужно вводить код страны.
Недостатки масок
- Иногда логика ввода данных может ввести пользователя в ступор (cм. Пример 1) .
- Количество символов в маске всегда предопределено заранее. Это создаёт проблемы, ведь зачастую количество цифр в мобильных и стационарных номерах различны.
Например:- +375 (29) 123-45-67 — мобильный
- +375 (162) 12-34-56 — стационарный телефон (Брест)
- При опечатке или ошибке в номере, пользователю не удобно вносить изменения в уже написанный номер.
- Даже самая жёстко заданная маска телефона не спасёт от ошибок при вводе в форму номера пользователем. При использовании масок периодически информация менеджеру приходит с пропущенными символами.
Например: +375 (29) 123-_5−67 - Т.к. все эти решения реализуются с помощью языка JavaScript, то иногда возможны сбои, т.к. в браузерах некоторых пользователей JavaScript может быть отключён.
Советы по применению
Если вы решили использовать маски для ввода номеров телефона, стоит подумать о целесообразности данного решения в вашем проекте, тщательно взвесить все «за» и «против».
При обдумывании этого вопроса можете руководствоваться следующими советами:
Не загоняйте пользователя в рамки
Хорошо, если пользователь имеет возможность вписать номер любой страны.
Номера телефонов бывают разной длины
Нужно иметь в виду, что количество символов в номерах разных стран отличается. Даже внутри одной страны может отличаться из-за различий в количестве цифр кода города.
Ввод номера должен быть простым
Не стоит делать громоздкий выбор страны оператора, если компания работает в основном в пределах Республики Беларусь.
Телефон — не обязательно только цифры
Иногда пользователю удобнее написать номер в произвольной форме. Например: 354−56−14 велком. И менеджеру такая запись будет вполне понятна.
Маска — не панацея
Даже самая жёстко заданная маска телефона не спасёт от ошибок при вводе в форму номера пользователем.
Иногда подсказок достаточно
Вместо маски можно использовать дополнительные подсказки (плейсхолдер и пример номера рядом с полем)
Не забывайте про мессенджеры
Если среди клиентов много интернациональных, то хорошим тоном будет иметь возможность к номеру добавлять удобные варианты для связи (например, мессенджеры).
Вы планируете сделать новый сайт и ищите подрядчика? Обращайтесь в Qmedia — мы поможем выбрать лучший вариант сайта под ваш проект и поможем с дальнейшим продвижение!
Хочу консультацию!
Что такое маски ввода и как с ними работать
Маска ввода — это строка символов, указывающая формат допустимых значений, вводимых пользователем в текстовые поля. Маска ввода позволяет не только контролировать ввод данных, но и упрощать процесс ввода. Маску используют в том случае, когда вводимые данные должны содержать определенные символы в некоторых позициях вводимой строки. Самым простым и ярким примером таких данных являются номера телефонов. Маска ввода должна обеспечить возможность вводить только цифры номера, а остальные символы (скобки вокруг кода города, дефис между цифрами номера) будут добавляться автоматически.
Возможность установки маски ввода реализована через указание в атрибутах компонента.
Вариант заполнения, флаг «Всегда отображать маску» не обязателен. Каждая строка маски определяет один символ, вводимый пользователем. Добавление/удаление строк осуществляется с помощью кнопок +/- справа. Текст маски вводить посимвольно:
Например, маска /d/ добавляет для поля ввода ограничение на ввод целочисленных значений. В компоненте может быть использована маска указанная на скрине, которая соответственно устанавливает ограничение на ввод 4 целочисленных значений.
В готовой услуге это может выглядеть так:
Маска не позволит ввести более отличные от чисел символы и в количестве более четырех.
Маска допускает использование разделителей между группами символов, например «-». Количество символов, разделители (такие как тире или точка) визуально отображаются на поле.
В этом случае форма на экране будет выглядеть так:
Вариант с разделителем в виде отступа в один символ. Например, 1 000, т.е число 1000 отображается пользователю как 1 000.
В конструкторе:
Маска может совмещать числовой и буквенный ввод. В этом случае необходимо использовать символы /D/, который ограничивает ввод числовых символов (0-9).
В примере на скрине выше форма будет допускать для ввода только цифры и буквы через разделитель, заложенный в маске. При этом маска поддерживает как латиницу, так и кириллицу.
Свое применение в ВКУ имеют /w/, который позволяет вводить в форму буквенный или цифровой символ или знак подчёркивания. Важно!!! Буквы ограничены латиницей. Количество вводимых символов ограничено количеством строк маски. На примере не более 7.
В конструкторе это выглядит так:
На экране это будет выглядеть так:
А также /W/, который позволяет вводить любой символ, кроме буквенного или цифрового символа или знака подчёркивания.
В конструкторе это выглядит так:
На экране это будет выглядеть так:
Комбинация масок позволяет создавать сложные проверочные конструкции. Например, маска /[а-яА-Я]|d|ё|Ё/ позволяет создать ограничение на ввод символов отличных от кириллицы. В сочетании с числовыми можно добиться следующего.
Вид в конструкторе:
На экране это будет выглядеть так:
Конструктор поддерживает маску времени, то есть создать ограничение, позволяющее вводить три группы чисел, отображающих часы, минуты и секунды. Конструкция /[0-2]/ ограничивает ввод пары чисел, в которых первое должно быть не больше 2. Соответственно /[0-5]/ — первое из пары не больше 5.
Вид в конструкторе: