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

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

Предоставляя пользователю возможность заполнения полей на сайте, следует проверять введенные данные на валидность. Это позволит предупредить пользователя о случайных ошибках, а так же даст дополнительную защиту от спама. Ярким примером является форма обратной связи, обязательными полями которой часто бывают 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
+7 (999) 123 45 67

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

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

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

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

В правиле указываем что первый символ должен быть обязательно цифрой или плюсом «[\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».

Темы:
JavaScriptSEO
Ещё интересное — 6
Комментарии —
  1. Валера
    Валера25 декабря 2014, 13:38#
    Не проверяется длина телефонного номера! Можно отправить 123
    1. Andy Si25 декабря 2014, 19:55(был изменён)#
      Согласен, существенный недостаток. Думаю такой вариант исключит возможность ввода длинных строк в поле телефона:
      re = /^\d[\d\(\)\ -]{4,14}\d$/;
    2. Roman
      Roman17 января 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. Andy Si17 января 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. Roman
          Roman18 января 2015, 00:01#
          Спасибо за ответ
      2. artem
        artem06 апреля 2015, 16:03(был изменён)#
        71111111111 — говорит, что номер верный. это не так. не существует оператора с кодом 111 для страны с кодом 7. Проверка сильно поверхностная.
        1. Andy Si06 апреля 2015, 16:30#
          Такие тонкости не учитываются, если это требуется, то следует где-то брать базу всех кодов и сверять с ней.
        2. Александр
          Александр12 мая 2015, 23:20#
          А как быть с проверкой таких адресов?
          name@мойсайт.рф
          А вскоре, как говорят, и имя ящика может быть на кириллице.
          имяящика@мойсайт.рф
          1. Andy Si13 мая 2015, 09:13#
            Дописать регулярку добавив туда кирилические символы. Хотя по мне, это плохая практика — использовать в качестве адресов кирилицу что в названиях сайтов, что в эл. адресах.
            var re = /^[\wа-яА-Я]{1}[\w-\.а-яА-Я]*@[\w-а-яА-Я]+\.[a-zа-я]{2,4}$/i;  
            1. Александр
              Александр13 мая 2015, 21:47#
              Спасибо за помощь!
          2. Александр
            Александр13 мая 2015, 22:15#
            Объясните, пожалуйста, эту строку
            var valid = re.test(myMail);
            Не пойму что она делает.
            1. Andy Si14 мая 2015, 00:00#
              re — это регулярное выражение, а метод test() позволяет выяснить, подходит или нет myMail под это регулярное выражение. Если подходит, то в valid присываиватеся true, если нет — false.
              1. Александр
                Александр14 мая 2015, 20:13#
                Спасибо!
                Теперь в голове все встало на свои места.
            2. Гарри
              Гарри24 июля 2015, 11:47#
              Статья шикарная!!!
              Спасибо!
              1. Pavel
                Pavel15 октября 2015, 16:34(был изменён)#
                Для email проще пользоваться новым типом поля из HTML5:
                <input type="email">
                1. Andy Si15 октября 2015, 17:46#
                  А если требуеться кастомизировать вывод? Все браузеры будут по разному выдавать сообщения. А что если браузер не поддерживает HTML5? И боты будут это обходить на раз.
                2. Егор
                  Егор05 мая 2016, 08:58#
                  Спасибо огромное)
                  1. Юрий
                    Юрий25 мая 2016, 15:46#
                    Огромное спасибо! Единственное внятное описание.
                    1. Filya
                      Filya17 января 2017, 18:14#
                      Спасибо, мужик!
                      1. Nikifor
                        Nikifor04 марта 2017, 17:08#
                        Спасибо большое, очень хорошая статья!
                        одно не понял, почему в описании сначала в конце проверки на e-mail:
                        "{2,3}$/i", а потом в коде "{2,4}$/i" — 4-ка
                        что правильнее, не опечатка?
                        лучше объяснения ещё не встречал.
                        1. Andy Si04 марта 2017, 20:31#
                          4 скорее правильнее. В подавляющем большинстве домен первого уровня из 2х или 3х символов, типа ru или com, но бывает и из 4х, типа info или aero. Встречаются крайне редко, но всё же бывает.
                          1. Nikifor
                            Nikifor07 марта 2017, 14:11#
                            Спасибо, всего хорошего!
                            1. Александр
                              Александр27 августа 2018, 09:05#
                              .dance, .studio и подобные домены встречаются очень часто, ограничение в конце абсурдно
                              1. Andy Si27 августа 2018, 09:11#
                                Ну уж не абсурдно, ограничивать надо. Но то что такие домены не учёл это плохо — ты прав.
                                1. Алесандр
                                  Алесандр27 августа 2018, 09:13#
                                  Просто они бывают достаточно длинными и постоянно появляются новые
                          2. Дмитрий
                            Дмитрий31 мая 2017, 17:57#
                            Огромное СПАСИБО и удачи!!! Добрый человек! Будет шпаргалка.

                            1. Олег
                              Олег10 ноября 2017, 15:48#
                              Ну номер не совсем, проверка хорошая, но можно и ввести номер вида 1----6 и все сработает.
                              1. Andy Si10 ноября 2017, 15:52#
                                Действительно проходит. Подумаю как не пропускать такие комбинации.
                              2. tutorial
                                tutorial27 мая 2018, 21:49#
                                что за скримеры на сайте
                                1. Andy Si27 мая 2018, 22:04#
                                  ну зачем ты милое привидение называешь скримером
                                2. Виталий
                                  Виталий05 июля 2018, 12:29#
                                  Спасибо, очень помогло!
                                  А у вас тут привидения летают)
                                  1. Nikita
                                    Nikita19 июля 2018, 13:14#
                                    Очень классно обяснили спасибо! Кстати классный котик
                                    1. Кирилл
                                      Кирилл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. Andy Si23 августа 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. Кирилл
                                          Кирилл24 августа 2018, 11:06#
                                          спасибо заработало
                                      2. Макс
                                        Макс25 ноября 2018, 08:42#
                                        Статья великолепная. С всех точек зрения. Объясняется исчерпывающе. Код краток и лаконичен. Шрифт, цвет. Демонстрация тут же. Кайф!

                                        Отдельное слово за дизайн сайта. Глаз просто отдыхает. Хотя, Опера и AdBlock чего-то там и заблочили…
                                        1. Andy Si25 ноября 2018, 11:07#
                                          Спасибо.
                                        2. Maria
                                          Maria04 августа 2021, 02:08#
                                          Спасибо, очень помогло
                                          1. Valerie
                                            Valerie22 ноября 2021, 02:40(был изменён)#
                                            Почему может не выводится сообщение с ошибкой ввода номера телефона? Вроде всё проверила
                                            1. Andy Si22 ноября 2021, 09:13#
                                              Если в точности всё копировали, должно работать. Проверил сейчас.
                                              А так ещё есть предположение, что у вас на странице два элемента с id=«message». Это может мешать выводу ошибок.
                                            2. maxim
                                              maxim27 мая 2022, 17:38(был изменён)#
                                              Спасибо. Статья помогла. Для проверки телефона я бы еще добавил возможность знака "+"
                                              /^[\d\+][\d\(\)\ -]{4,14}\d$/
                                              1. Andy Si28 мая 2022, 09:25#
                                                Прав на все 100. Добавлю в статью.
                                              2. Grandy
                                                Grandy06 июня 2022, 23:45#
                                                Не подскажешь пожалуйста, как бы выглядила форма записи кода для данного задания: Создать в документе форму для ввода анкетных данных (ФИО, год
                                                рождения, адрес, телефон, семейное положение, электронный почтовый
                                                адрес). Реализовать возможность проверки корректности содержимого
                                                всех полей формы при нажатии на специальную кнопку. Поля с
                                                некорректными данными подсветить.
                                                1. Andy Si07 июня 2022, 13:34(был изменён)#
                                                  Тебе подойдёт код из примера, но потребуется аналогично как для почты и телефона добавить другие поля и написать для них функции валидации. Сами функции не подскажу — там много нюансов, это не 5минутное дело.
                                                  1. Grandy
                                                    Grandy07 июня 2022, 15:16#
                                                    А вот еще хотелось бы узнать, как ты реализовал, чтобы цвет текста менялся. Например, вот у неправильного ввода красный, а у правильного зеленый. Потому что в твоём коде этого нету, а вот в самом примере где вводить, то там есть изменение цвета. Не мог бы подсказать как это сделать?
                                                    1. Andy Si07 июня 2022, 16:49#
                                                      В функции валидации обернуть сообщения так:
                                                      if (valid) output = '<span style="color: green;">Адрес эл. почты введен правильно!</span>';
                                                      else output = '<span style="color: red;">Адрес электронной почты введен неправильно!</span>';
                                                      1. Grandy
                                                        Grandy07 июня 2022, 17:22#
                                                        Огромное спасибо!
                                                © REALADMIN.RU   2024 г.
                                                Страница сгенерирована: 0,2069 s | 6 mb.
                                                На каком уровне Вы играете в шахматы?
                                                OPROS