PressAff Валидация номера телефона в форме заявки: что это, почему важна и как установить на сайте в HTML-коде самостоятельно

  • Автор темы Smetanablack
  • Дата начала
  • Ответы 0
  • Просмотры 747
  • Теги
    лиды
PressAff
Включить нумерованное содержание?
Да

Содержание

Треш-лиды — это как друзья, которые пришли на вечеринку, но забыли предупредить. Они появляются внезапно и создают хаос, но в глубине души ты знаешь, что они не нарочно. Просто у них свои приколы.

Треш-лиды часто возникают из-за неправильно введенных номеров телефонов. Пользователи могут ошибиться при вводе номера или указать несуществующий. Это влияет на общее качество трафика, и как итог — арбитражник тратит деньги в молоко. Чтобы избежать таких ситуаций, нужно использовать валидацию номеров.


Материал с канала: PressAff.com

Валидация номера телефона: что за зверь
Начнем с базы.

Валидация номера телефона — это проверка правильности номера, который пользователь указал в форме заявки.
Это позволяет убедиться, что номер и вправду существует, его используют, и он соответствует определённым требованиям и стандартам. Например,:

  • есть ли в номере нужное количество цифр;
  • указан ли код страны;
  • есть ли разделители между цифрами (например, дефисы или пробелы);
  • в правильном ли формате заполнена форма.
Как выполнить валидацию номера: основные способы
Существует несколько подходов к проверке номера телефона в HTML-форме. Какой из них использовать, зависит от ваших потребностей и опыта.

HTML-атрибуты в полях ввода. Самый лёгкий метод валидации — использовать HTML-атрибуты в полях ввода. Эти атрибуты позволяют определить тип данных, требуемых для каждого поля, обозначить обязательные поля, ограничить длину строки и установить максимальные и минимальные значения для чисел.

Для примера мы рассмотрим именно этот вариант. Вы убедитесь, что сделать всё самостоятельно быстро и без лишних затрат не составит труда.

Валидация на JavaScript. Можно настроить проверку данных с использованием JavaScript. На этом языке создаются:
  • функции для проверки информации;
  • сообщения для пользователя, если тот неправильно заполнил поле.
Сообщения-подсказки могут появляться во время набора текста или при отправке формы. Конкретной функции для проверки правильности заполнения форм не существует, нужно создать собственную для конкретной задачи.

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

Как валидация номера выглядит и работает: в теории
Чтобы проверить номер телефона в HTML-форме, используйте атрибуты pattern и title в теге <input>. Атрибут pattern задает регулярное выражение для правильного формата номера, а title показывает пользователю ошибку, если данные не соответствуют требованиям.

Вот пример кода HTML для поля ввода номера телефона с проверкой:

[B]<form> <label for=»phone»>[/B]Номер телефона:[B]</label> <input type=»tel» id=»[/B]phone[B]» name=»[/B]phone[B]» pattern=»[0-9]{3}-[0-9]{2}-[0-9]{3}» title=»[/B]Введите номер телефона в формате XXX-XX-XXX[B]» required> <input type=»submit» value=»Отправить»> </form>[/B]

Пока очень интересно, но ничего не понятно!

А вот, почему он выглядит так. Атрибут pattern определяет формат номера телефона: XXX-XX-XXX, где X — любая цифра, а {3} и {2} задают длину групп цифр (3 и 2 цифры соответственно). Разделитель между группами цифр — дефис.

Атрибут title подсказывает пользователю, какой формат номера нужно ввести.

Есть еще атрибут required, который делает поле обязательным для заполнения перед отправкой формы.

Как валидация номера выглядит и работает: на практике
Идем смотреть на живом примере:

[B]value=»[/B]+381[B]» placeholder=»[/B]+381ххххххxххх[B]» pattern=»[/B]\+381\d{8,10}[B]» maxlength=»[/B]14[B]«[/B] [B]title=»[/B]Unesite broj u formatu: +381xxxxxxxxxxxx[B]«[/B]

Расшифровка этой тарабарщины:
  • value="+381": Атрибут value задает начальное значение для поля ввода. В этом случае значение «+381» автоматически помещается в поле при загрузке страницы.
  • placeholder="+381ххххххxххх": Атрибут «placeholder» указывает, какой формат ввода ожидается от пользователя. В этом случае, «+381» — это код страны, а «x» обозначает любую цифру.
  • pattern="\+381\d{8,10}": Атрибут «pattern» устанавливает правило для проверки вводимых данных. В этом случае, регулярное выражение «+381\d{8,10}» означает, что данные должны начинаться с «+381» и содержать от 8 до 10 цифр.
  • maxlength="14": Атрибут «maxlength» ограничивает максимальное количество символов, которые можно ввести в поле. В этом случае, разрешено только 14 символов, включая код страны «+381» и от 8 до 10 цифр.
  • title="Unesite broj u formatu: +381xxxxxxxxxxxx": Атрибут «title» подсказывает пользователю, как правильно заполнить поле ввода. В этом случае, пользователю говорят, что номер должен быть в формате «+381xxxxxxxxxxxx».
Эти переменные отвечают за то, как выглядит и работает поле ввода номера телефона, а также за правильность проверки введенных данных.


Кусочек кода лендинга в трекере с уже прописанным валидатором

Проверяем, правильно ли мы настроили валидацию номера телефона. Заходим на ленд и вводим заведомо некорректные данные.


Форма заявки, когда данные введены неверно

На скрине видно, что заявку не получится отправить, пока мы не введем нужное количество цифр в номере телефона. А значит, все работает! Стата защищена от невалидных лидов из-за невнимательности или намеренного вредительства пользователей.

Статья по исключению дублей лидов: Как исключить дубли лидов в арбитраже? Рабочий метод

Почему важно это знать
Валидаторы — надежные союзники в битве с невалидными лидами. Они помогают арбитражникам сберечь время и средства, минимизировать количество треша в стате.

Возможно, вам покажется, что для работы с ними необходимы глубокие знания или поддержка технического эксперта, но на самом деле нужно лишь потратить немного времени и изучить азы проверки.
 
Назад
Верх
Блог Поиск Обучение Горячее Инструменты Партнёрки