На этом шаге мы рассмотрим реализацию проверки правильности ввода адреса электронной почты.
Существует еще один вид проверки, который можно реализовать в нашей форме ввода контактной информации, - проверка соблюдения форматов ввода. Иногда бывает полезно вывести предупреждение, если поле заполнено с ошибкой (в противоположность случаю, когда поле остается пустым). Основные кандидаты на реализацию проверки подобного вида - это поля ввода адреса электронной почты, номера телефона и номера кредитной карты. В демонстрационных целях для проверки содержимого поля ввода адреса электронной почты мы будем использовать относительно простое регулярное выражение. Прежде чем погружаться в исследование деталей регулярного выражения, рассмотрим полную реализацию проверки адреса электронной почты:
// Начало программного кода
if (this.id == 'email') {
var $listItem = $(this).parents('li:first');
if ($(this).is(':hidden')) {
this.value = '';
}
if (this.value != '' &&
!/.+@.+\.[a-zA-Z]{2,4}$/.test(this.value)) {
var errorMessage = 'Неверный e-mail формат'
+ ' (пример формата: joe@example.com)';
$('<span></span>')
.addClass('error-message')
.text(errorMessage)
.appendTo($listItem);
$listItem.addClass('warning');
}
}
// Продолжение программного кода
Этот программный код выполняет следующие действия:
- Проверяет значение атрибута id поля, если проверка увенчалась успехом:
- Записывает в переменную ссылку на родительский элемент списка.
- Проверяет, скрыто ли поле ввода адреса электронной почты. Если поле скрыто (что возможно, если снят соответствующий флажок), в качестве его значения устанавливается пустая строка. Это позволит программному коду, рассматривавшемуся ранее, корректно удалить класс warning и сообщение об ошибке.
- Проверяет, было ли заполнено поле и не соответствует ли его значение регулярному выражению. Если эти две проверки оканчиваются успехом,
тогда сценарий:
- Создаст сообщение об ошибке.
- Вставит сообщение в элемент <span class="error-message">.
- Добавит элемент <span class="error-message"> со всем его содержимым в родительский элемент списка.
- Добавит класс warning в родительский элемент списка.
Теперь отдельно рассмотрим регулярное выражение:
!/.+@.+\.[a-zA-Z]{2,4}$/.test(this.value)
Несмотря на то, что это регулярное выражение похоже на использовавшееся на 157 шаге, для работы с ним вместо метода .replace() используется метод .test(), поскольку нам необходимо лишь получить значение true или false. Как и прежде, регулярное выражение заключено в символы слеша. Оно проверяет соответствие строки, заключенной в круглые скобки в вызове метода .test() и в данном случае представляющей содержимое поля ввода адреса электронной почты.
С помощью этого регулярного выражения мы проверяем совпадение с группой из одного или более символов, не являющихся символами разрыва строки (.+), за которой следует символ @, за которым в свою очередь следует другая группа из одного или более символов, не являющихся символами разрыва строки. До настоящего момента проверку могла бы пройти любая строка, такая как lucia@example, как и миллионы других возможных перестановок, хотя она не является допустимым адресом электронной почты.
Мы можем сделать проверку более строгой, обеспечив проверку наличия символа ., за которым могут следовать от двух до четырех букв в диапазоне от а до z, завершающих строку. Именно такую проверку реализует оставшаяся часть регулярного выражения. Она сначала проверяет совпадение с символом в диапазоне от а до z или от А до Z - [a-zA-Z]. Затем требует, чтобы проверяемая строка содержала от двух до четырех букв из указанного диапазона - {2,4}. Наконец, она требует, чтобы эти буквы находились в самом конце строки: $. Теперь для такой строки, как lucia@example.com, будет возвращаться значение true, тогда как для строки lucia@example, или lucia@example.2fn, или lucia@example.example, или lucia-example.com будет возвращаться значение false.
Но нам необходимо, чтобы значение true возвращалось (то есть создавалось сообщение об ошибке и выполнялись другие сопутствующие действия), только когда введенная строка не соответствует формату адреса электронной почты. По этой причине мы добавили перед регулярным выражением знак восклицания (оператор not):
!/.+@.+\.[a-zA-Z]{2,4}$/.test(this.value)
Рис.1. Реализация проверки правильности адреса электронной почты
Полный текст этого примера можно взять здесь.На следующем шаге мы рассмотрим заключительную проверку.
