RealAdmin.ru

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

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

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

Лучше всего информация воспринимается на примерах, поэтому я создал готовую форму, на которой можно увидеть конечный результат в действии:

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

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

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

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

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

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

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

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

С первого взгляда может показаться непонятным, но сейчас всё подробно рассмотрим:

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

Разобранный пример немного упрощен для лучшего восприятия. У него есть один недостаток — первым знаком в 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
Комментарии — 18
  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 #
                    Огромное спасибо! Единственное внятное описание.
                    © REALADMIN.RU   2016 г.
                    Страница сгенерирована: 0,1579 s | 10 mb.
                    На каком уровне Вы играете в шахматы?
                    О П Р О С
                    Home Question Top