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

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

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

Для начала разберем применяемые регулярные выражения, а полный код формы и 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

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

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

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

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

/^[\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».