RealAdmin.ru

Проверка адреса email и номера телефона на javascript

JavaScript,SEO
Категория: Кодинг
06 апр. 2014 г. в 10:59

Предоставляя пользователю возможность заполнения полей на сайте, следует проверять введенные данные на валидность. Это позволит предупредить пользователя о случайных ошибках, а так же даст дополнительную защиту от спама. Ярким примером является форма обратной связи, обязательными полями которой часто бывают email и телефон. Займемся их проверкой на правильность заполнения с помощью javascript.

Информация лучше воспринимается на примерах, поэтому посмотрим готовую форму в действии:

Пожалуйста, заполните все поля формы!

E-mail:
Телефон:

Для начала разберем применяемые регулярные выражения, а полный код формы и javascript функций я приведу в конце статьи.

Валидность адреса электронной почты

Рассмотрим адрес электронной почты (test@mail.ru). Вот его обязательные части:

  • Название (test) — один или много символов;
  • Знак собаки (@);
  • Доменное имя почтового сервера (mail) — один или много символов;
  • Точка (.);
  • Доменное имя первого уровня (ru) от двух до пяти букв.

Составим регулярное выражение для наших требований:

/^[\w-\.]+@[\w-]+\.[a-z]{2,4}$/i

Разберём правило по частям:

  1. Регулярное выражение должно открываться и закрываться символами «/». После закрывающегося символа можно указать директиву. В нашем случае такой директивной является «i», которая отключает проверку вводимых букв на регистр. То есть, становится не важно, ввели «test@mail.ru» или «Test@Mail.RU».
  2. Знаки «^» и «$» обозначают начало и конец проверяемой строки. Если их убрать, то правило вернет положительный результат даже если в начале или конце электронного адреса поставить запрещенные знаки. То есть, при вводе «%:&test@mail.ru#6&» функция проверки вернет положительный результат, так как в строке имеется последовательность символов, удовлетворяющая нашему правилу. Для исключения такой возможности указываем, что правило должно применяться ко всей строке, а не к её части.
  3. Блок «[\w-\.]+» отвечает за проверку названия ящика. В квадратных скобках указываем разрешенные символы: «\w» — все латинские буквы, цифры и знак подчеркивания. Так же рекомендую добавлять знак тире и точку «-\.». «+» после квадратных скобок указывает на возможность повторения символов — один или много раз.
  4. Далее идет знак собаки и доменное имя почтового сервера — «@[\w-]+». Здесь практически тоже самое что и в предыдущем блоке. Исключаем только из набора символов точку.
  5. Осталось прописать правило для проверки наличия точки и корректности доменного имени верхнего уровня (ru,com,info). «\.[a-z]{2,4}». Для обозначения знака точки мы указываем её с обратным слешем «\.» Без него она будет восприниматься зарезервированным символом регулярки, который обозначает возможность наличия на её месте любого символа. За точкой должно следовать доменное имя верхнего уровня. Это минимум 2 латинские буквы — «[a-z]{2,4}».

Разобранный пример немного упрощен для лучшего восприятия. У него есть недостаток — первым знаком в email не может быть тире или точка, но приведенное регулярное выражение этого не учитывает. Чтобы это исправить следует его немного поправить:

/^[\w]{1}[\w-\.]*@[\w-]+\.[a-z]{2,4}$/i

Проверка валидности номера телефона в javascript

С номером телефона ситуация сложнее, так как номер можно ввести десятками способов:

8 999 1234567
8 (999) 1234567
8 999 123-45-67
8 (999) 123 45 67

Есть несколько выходов из ситуации:

  • продумать все возможные шаблоны и составлять для них правила;
  • заставить посетителя вводить телефон по определенному шаблону;
  • ограничиться проверкой на случайные ошибки.

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

/^\d[\d\(\)\ -]{4,14}\d$/

В правиле указываем что первый и последний знак должен быть обязательно цифрой — «\d», а в середине разрешаем использовать знаки скобок, пробел и знак дефиса — «[\d\(\)\ -]{4,14}», от 4 до 14 символов. Так как скобки и пробел являются зарезервированными элементами регулярных выражений, перед ними ставим обратный слеш.

Для любителей жестких шаблонов приведу пример проверки номера вида 8 (999) 123-45-64

/^[\d]{1}\ \([\d]{2,3}\)\ [\d]{2,3}-[\d]{2,3}-[\d]{2,3}$/

Исходный код примера: html и javascript

Это полный код тестовой странички, на которой я использовал форму и js скрипты для отладки правил из этой статьи. Можете скопировать его и протестировать у себя на компьютере.

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<script type="text/javascript">
 
function ValidMail() {
    var re = /^[\w-\.]+@[\w-]+\.[a-z]{2,4}$/i;
    var myMail = document.getElementById('email').value;
    var valid = re.test(myMail);
    if (valid) output = 'Адрес эл. почты введен правильно!';
    else output = 'Адрес электронной почты введен неправильно!';
    document.getElementById('message').innerHTML = output;
    return valid;
}
 
function ValidPhone() {
    var re = /^\d[\d\(\)\ -]{4,14}\d$/;
    var myPhone = document.getElementById('phone').value;
    var valid = re.test(myPhone);
    if (valid) output = 'Номер телефона введен правильно!';
    else output = 'Номер телефона введен неправильно!';
    document.getElementById('message').innerHTML = document.getElementById('message').innerHTML+'<br />'+output;
    return valid;
}  
 
</script>

</head>

<body>
<p id="message" >Пожалуйста, заполните все поля формы!</p> 
E-mail: <input id="email" name="email" type="text" size="20" /><br /> 
Телефон: <input id="phone" name="phone" type="text" size="20" /><br /> 
<input name="button" type="submit" value="Проверить" onClick="ValidMail(); ValidPhone();" />
</body>

</html>

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

<form action="/feedback/" method="post" onsubmit="return (ValidMail()&&ValidPhone())">

В этом случае форма отправится только если обе функции вернут значение «true».

Теги:
SEO
Посмотрите похожее — 6
Комментарии —
  1. avatar Валера 25 декабря 2014, 13:38 #
    Не проверяется длина телефонного номера! Можно отправить 123
    1. avatar Simkin Andrew 25 декабря 2014, 19:55(был изменён) #
      Согласен, существенный недостаток. Думаю такой вариант исключит возможность ввода длинных строк в поле телефона:
      re = /^\d[\d\(\)\ -]{4,14}\d$/;
    2. avatar Roman 17 января 2015, 23:23 #
      Для любителей жестких шаблонов приведу пример проверки номера вида 8 (999) 123-45-64

      /^[\d]{1}\ \([\d]{2,3}\)\ [\d]{2,3}-[\d]{2,3}-[\d]{2,3}$/
      У меня не работает. Проверяю (забиваю в консоль):
      var expr3 = new RegExp("/^[\d]{1}\ \([\d]{2,3}\)\ [\d]{2,3}-[\d]{2,3}-[\d]{2,3}$/","g");
      console.log(expr3.test("8 (999) 123-45-64"));
      
      Выдает false
      1. avatar Simkin Andrew 17 января 2015, 23:48 #
        Всё работает если писать через сокращенный вариант, только что проверял:
        var expr3 = /^[\d]{1}\ \([\d]{2,3}\)\ [\d]{2,3}-[\d]{2,3}-[\d]{2,3}$/g;
        console.log(expr3.test("8 (999) 123-45-64"));
        Почему не работает с RegExp сказать не могу, надо разбираться, одна ошибка у тебя в том, что при использовании RegExp не надо указывать слеши в начале и в конце регулярного выражения их используют только при сокращённой записи как у меня в примере.
        1. avatar Roman 18 января 2015, 00:01 #
          Спасибо за ответ
      2. avatar artem 06 апреля 2015, 16:03(был изменён) #
        71111111111 — говорит, что номер верный. это не так. не существует оператора с кодом 111 для страны с кодом 7. Проверка сильно поверхностная.
        1. avatar Simkin Andrew 06 апреля 2015, 16:30 #
          Такие тонкости не учитываются, если это требуется, то следует где-то брать базу всех кодов и сверять с ней.
        2. avatar Александр 12 мая 2015, 23:20 #
          А как быть с проверкой таких адресов?
          name@мойсайт.рф
          А вскоре, как говорят, и имя ящика может быть на кириллице.
          имяящика@мойсайт.рф
          1. avatar Simkin Andrew 13 мая 2015, 09:13 #
            Дописать регулярку добавив туда кирилические символы. Хотя по мне, это плохая практика — использовать в качестве адресов кирилицу что в названиях сайтов, что в эл. адресах.
            var re = /^[\wа-яА-Я]{1}[\w-\.а-яА-Я]*@[\w-а-яА-Я]+\.[a-zа-я]{2,4}$/i;  
            1. avatar Александр 13 мая 2015, 21:47 #
              Спасибо за помощь!
          2. avatar Александр 13 мая 2015, 22:15 #
            Объясните, пожалуйста, эту строку
            var valid = re.test(myMail);
            Не пойму что она делает.
            1. avatar Simkin Andrew 14 мая 2015, 00:00 #
              re — это регулярное выражение, а метод test() позволяет выяснить, подходит или нет myMail под это регулярное выражение. Если подходит, то в valid присываиватеся true, если нет — false.
              1. avatar Александр 14 мая 2015, 20:13 #
                Спасибо!
                Теперь в голове все встало на свои места.
            2. avatar Гарри 24 июля 2015, 11:47 #
              Статья шикарная!!!
              Спасибо!
              1. avatar Pavel 15 октября 2015, 16:34(был изменён) #
                Для email проще пользоваться новым типом поля из HTML5:
                <input type="email">
                1. avatar Simkin Andrew 15 октября 2015, 17:46 #
                  А если требуеться кастомизировать вывод? Все браузеры будут по разному выдавать сообщения. А что если браузер не поддерживает HTML5? И боты будут это обходить на раз.
                2. avatar Егор 05 мая 2016, 08:58 #
                  Спасибо огромное)
                  1. avatar Юрий 25 мая 2016, 15:46 #
                    Огромное спасибо! Единственное внятное описание.
                    1. avatar Filya 17 января 2017, 18:14 #
                      Спасибо, мужик!
                      1. avatar Nikifor 04 марта 2017, 17:08 #
                        Спасибо большое, очень хорошая статья!
                        одно не понял, почему в описании сначала в конце проверки на e-mail:
                        "{2,3}$/i", а потом в коде "{2,4}$/i" — 4-ка
                        что правильнее, не опечатка?
                        лучше объяснения ещё не встречал.
                        1. avatar Simkin Andrew 04 марта 2017, 20:31 #
                          4 скорее правильнее. В подавляющем большинстве домен первого уровня из 2х или 3х символов, типа ru или com, но бывает и из 4х, типа info или aero. Встречаются крайне редко, но всё же бывает.
                          1. avatar Nikifor 07 марта 2017, 14:11 #
                            Спасибо, всего хорошего!
                            1. avatar Александр 27 августа 2018, 09:05 #
                              .dance, .studio и подобные домены встречаются очень часто, ограничение в конце абсурдно
                              1. avatar Simkin Andrew 27 августа 2018, 09:11 #
                                Ну уж не абсурдно, ограничивать надо. Но то что такие домены не учёл это плохо — ты прав.
                                1. avatar Алесандр 27 августа 2018, 09:13 #
                                  Просто они бывают достаточно длинными и постоянно появляются новые
                          2. avatar Дмитрий 31 мая 2017, 17:57 #
                            Огромное СПАСИБО и удачи!!! Добрый человек! Будет шпаргалка.

                            1. avatar Олег 10 ноября 2017, 15:48 #
                              Ну номер не совсем, проверка хорошая, но можно и ввести номер вида 1----6 и все сработает.
                              1. avatar Simkin Andrew 10 ноября 2017, 15:52 #
                                Действительно проходит. Подумаю как не пропускать такие комбинации.
                              2. avatar tutorial 27 мая 2018, 21:49 #
                                что за скримеры на сайте
                                1. avatar Simkin Andrew 27 мая 2018, 22:04 #
                                  ну зачем ты милое привидение называешь скримером
                                2. avatar Виталий 05 июля 2018, 12:29 #
                                  Спасибо, очень помогло!
                                  А у вас тут привидения летают)
                                  1. avatar Nikita 19 июля 2018, 13:14 #
                                    Очень классно обяснили спасибо! Кстати классный котик
                                    1. avatar Кирилл 23 августа 2018, 17:59 #
                                      вот такой фильтр не пропускает майлы вида bk.ru на конце
                                      var filter = /^[a-zA-Z0-9]+[a-zA-Z0-9_.-]+[a-zA-Z0-9_-]+@[a-zA-Z0-9]+[a-zA-Z0-9.-]+[a-zA-Z0-9]+.[a-z]{2,4}$/;

                                      не подскажите как исправить
                                      1. avatar Simkin Andrew 23 августа 2018, 19:08 #
                                        Наверно, потому-что после собаки эта регулярка требует минимум 3 символа до точки.
                                        Возможно, так пройдет:
                                        var filter = /^[a-zA-Z0-9]+[a-zA-Z0-9_.-]+[a-zA-Z0-9_-]+@[a-zA-Z0-9]+[a-zA-Z0-9.-]+.[a-z]{2,4}$/;
                                        1. avatar Кирилл 24 августа 2018, 11:06 #
                                          спасибо заработало
                                      2. avatar Макс 25 ноября 2018, 08:42 #
                                        Статья великолепная. С всех точек зрения. Объясняется исчерпывающе. Код краток и лаконичен. Шрифт, цвет. Демонстрация тут же. Кайф!

                                        Отдельное слово за дизайн сайта. Глаз просто отдыхает. Хотя, Опера и AdBlock чего-то там и заблочили…
                                        1. avatar Simkin Andrew 25 ноября 2018, 11:07 #
                                          Спасибо.
                                        © REALADMIN.RU   2018 г.
                                        Страница сгенерирована: 0,0782 s | 6 mb.
                                        На каком уровне Вы играете в шахматы?
                                        О П Р О С
                                        Home Question Top