Валидация e-mail на лету с использованием jQuery

валидация email

От автора: в этом уроке мы вновь коснемся такой темы, как юзабилити, которую мы уже затрагивали в ряде предыдущих уроков. Сейчас мы реализуем такую вещь, как проверка электронного адреса, который ввел пользователь (email), «на лету», т.е. без отправки данных на сервер, а непосредственно на стороне клиента. Это будет не только удобно, но еще и придаст странице большей эффектности. Кроме того, таким образом, снимается лишняя нагрузка на сайт — ведь не посылаются лишние запросы на сервер.

Реализовывать поставленную задачу мы будем при помощи 2-х средств:

Языка регулярных выражений, при помощи которого мы как раз и будем проверять то, что вводит пользователь на соответствие шаблону e-mail;

Фреймворка jQuery, который и будет показывать «на лету» результат проверки (валидации) электронного адреса.

автор

Автор: Андрей Кудлай

Зовут меня Андрей Кудлай. Родом я из Украины, живу в Днепропетровске. Веб-программированию учился сам. Неплохо знаю HTML, CSS, PHP. Немного разбираюсь в JavaScript’e — в свободное время как раз занимаюсь его изучением.

Время ролика: 01:05:00.

Сложность: средняя.

План урока:

    1. Формирование задач (8:08).

    2. Составляем регулярное выражение (15:05).

    3. Пишем функционал jQuery (26:04).

    4. Модифицируем регулярное выражение (14:51).

скачать исходникидемоскачать урок


Шаг 1. Формирование задач.

Собственно, такую штуку, я думаю, Вы уже не раз видели на всевозможных сайтах. Есть поле для ввода e-mail, когда Вы вводите адрес почты в это поле и затем переходите к другому полю, рядом с полем e-mail выводится сообщение в каком-либо виде о том, что такой e-mail подходит или не подходит. Иногда такое сообщение появляется совсем уж «на лету», т.е, как только Вы начинаете вводить символы с клавиатуры — эти символы сразу же начинают проверяться на соответствие шаблону. Я покажу, как реализовывается оба варианта, а какой выбрать — решать уж Вам. Итак, приступим.

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

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<style type="text/css">
	.ok{
		border: 1px solid green;
	}
	.error{
		border: 1px solid red;
	}
</style>
<title>Валидация поля E-mail</title>
</head>

<body>

<form>
	<p>E-mail: <input type="text" name="mail" id="mail" /> <span id="valid"></span></p>
	<p><input type="submit" name="submit" id="submit" value="Отправить" /></p>
</form>

</body>
</html>

Давайте немного разберем структуру документа. Прежде всего, мы имеем 2 правила CSS:

<style type="text/css">
	.ok{
		border: 1px solid green;
	}
	.error{
		border: 1px solid red;
	}
</style>

Класс "ok" будет использован для выделения поля в том случае, когда нас устраивает введенный пользователем e-mail — поле будет обведено зеленой рамкой толщиной в 1 пиксель. Класс "error" будет использован для выделения поля в том случае, когда нас не устраивает содержимое поля e-mail — поле будет обведено красной рамкой толщиной в 1 пиксель.

В форме есть собственно поле для ввода e-mail, блок span с идентификатором "valid", в который будет выводиться сообщение с результатами валидации и также имеется кнопка, которую мы сделаем изначально неактивной и будем активировать только в том случае, если введенный e-mail нас устраивает. Для того, чтобы деактивировать кнопку — добавим ей атрибут "disabled":

<p><input type="submit" name="submit" id="submit" value="Отправить" disabled /></p>

Шаг 2. Составляем регулярное выражение.

Теперь немного поговорим о валидации поля e-mail, т.е., проверке того, что нам прислал пользователь, на соответствие с неким шаблоном. Любой почтовый адрес имеет некий формат… к примеру, такой — «name@mail.ru». Т.е., здесь присутствуют 3 части, разделенные между собой знаком собаки — «@» — и точкой — «.». Вот этот вот образец и будет нашим шаблоном, на соответствие с которым мы будем проверять то, что получим от пользователя в качестве почтового адреса. Если полученное будет соответствовать шаблону — пропускаем такой e-mail, если нет, то — нет. Проверить на 100% свой ли e-mail ввел пользователь при помощи шаблона мы, конечно же, не сможем — это не возможно в принципе, поскольку пользователь может ввести строку внешне похожую на формат электронного адреса, например тот же name@mail.ru. Формат соответствует шаблону, но это совсем не значит, что такая почта существует или, если существует, зарегистрирована на пользователя, заполняющего в данный момент форму. Поэтому 100% проверкой является только отправка на введенный e-mail письма с ссылкой для подтверждения введенного почтового адреса. Но для предотвращения случая, когда в поле e-mail вводится просто набор символов, нам понадобится именно сравнение введенного с шаблоном.

Для того чтобы проверить соответствие чего-то с установленным шаблоном, используются регулярные выражения. В принципе, задача регулярных выражений состоит в том, чтобы находить (или не находить) совпадения строки или ее части с установленным шаблоном. Регулярные выражения — это, скажем так, мини-язык, который используется во многих языках программирования (JavaScript, PHP, Perl и др). Если Вы заинтересуетесь регулярными выражениями, то в сети можно найти довольно много статей о них. Если же это не так интересно будет Вам, то также можно найти в сети уже готовые регулярные выражения под конкретные нужды. Я Вам для этих целей могу порекомендовать сайт с уже готовыми регулярками для валидации e-mail, даты, времени, URL и другого (http://regexlib.com/DisplayPatterns.aspx). В дополнительных материалах Вы также найдете своеобразную шпаргалку по регулярным выражениям.

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

Итак, используя шпаргалку из дополнительных материалов, составим наш шаблон (регулярное выражение). В уже открытой конструкции JavaScript пропишем стандартный код jQuery, который «скажет», что весь код, заключенный в нем, будет выполняться после загрузки документа (рекомендую Вам ознакомиться с моими предыдущими уроками, в которых затрагивалась тема работы с фреймворком jQuery, и в которых я рассказывал об основах работы с ним):

$(document).ready(function(){});

Внутри операторных (фигурных) скобок мы и будем писать весь наш код. Создадим переменную pattern, в которой и будет храниться шаблон:

$(document).ready(function(){
	var pattern = //;
});

Регулярное выражение пишется между двумя слешами, которые мы указали в переменной pattern. Теперь необходимо указать, что на соответствие шаблону будет проверяться вся строка от первого до последнего символа (поскольку часто ищут, допустим, символ/группу символов в тексте), т.е., вся введенная строка должна соответствовать формату электронной почты. Символом (или якорем — см. шпаргалку) начала строки есть "^", а конца строки — "$":

$(document).ready(function(){
	var pattern = /^$/;
});

Далее в адресе имеем 3 диапазона ("name", "mail" и "ru"), которые можно задать при помощи квадратных скобок:

$(document).ready(function(){
	var pattern = /^[][][]$/;
});

Первый и второй диапазоны разделены знаком собаки — «@» — второй и третий — точкой. Укажем эти символы:

$(document).ready(function(){
	var pattern = /^[]@[].[]$/;
});

Но в шпаргалке видим, что точка — это один из символов (мета-символы), которые должны быть экранированы, а экранируются символы точно также, как и в PHP, в JavaScript — при помощи обратного слеша:

$(document).ready(function(){
	var pattern = /^[]@[]\.[]$/;
});

Далее, количество символов в первом и втором диапазане должно быть как минимум 1. Максимум мы устанавливать не будем. Вновь заглянем в шпаргалку и видим, что здесь нам на помощь могут прийти кванторы, а именно — знак плюса, который обозначает 1 или больше символов, но не меньше 1:

$(document).ready(function(){
	var pattern = /^[]+@[]+\.[]$/;
});

Знак плюса мы хотим использовать именно как квантор, т.е., как специальный символ, а потому мы его, конечно же, ни в коем разе не экранируем. В третьем диапазоне мы укажем минимум и максимум символов. Минимум — 2 символа, максимум — 6. Делается это опять же при помощи кванторов, которые представлены в виде операторных скобок:

$(document).ready(function(){
	var pattern = /^[]+@[]+\.[]{2,6}$/;
});

Теперь мы должны указать, какие именно символы мы разрешаем использовать в каждом из диапазонов. Конечно же, в каждом будут разрешены все латинские буквы — как большие, так и маленькие. Для того, чтобы не указывать в диапазоне и большие, и маленькие буквы мы при помощи модификатора "i" укажем, что наш шаблон будет регистронезависимым:

$(document).ready(function(){
	var pattern = /^[a-z]+@[a-z]+\.[a-z]{2,6}$/i;
});

Итак, мы указали в каждой из трех частей диапазон [a-z] и указали, что шаблон не будет зависеть от регистра. Теперь давайте разрешим для первой и второй части цифры:

$(document).ready(function(){
	var pattern = /^[a-z0-9]+@[a-z0-9]+\.[a-z]{2,6}$/i;
});

В принципе, наш шаблон уже готов. Добавим в него еще некоторые символы, например тире и нижнее подчеркивание ("-", "_"):

$(document).ready(function(){
	var pattern = /^[a-z0-9_-]+@[a-z0-9-]+\.[a-z]{2,6}$/i;
});

Вот так вот пошагово мы составили простую регулярку, при помощи которой можем проверять действительно ли в поле введено что-то, соответствующее составленному шаблону. Чуть позже мы внесем в нее еще некоторые изменения.

Шаг 3. Пишем функционал jQuery.

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

    1. Отбор элементов и формирование «набора jQuery» (выборки);

    2. Отслеживание событий, которые происходят с отобранными элементами;

    3. Реакция на событие.

Элементами, которые мы будем отбирать, являются поле для ввода e-mail, поле для вывода сообщений с результатами валидации и кнопка «Отправить». Теперь о событии, точнее событиях, которые мы будем отслеживать. Как уже отмечалось, мы будем реализовывать 2 варианта:

проверять введенное после ввода и перехода к следующему элементу страницы, т.е., после того, как пользователь уйдет из поля для ввода e-mail и оно, соответственно, потеряет фокус;

проверять на соответствие после каждого введенного символа.

Начнем с первого варианта. За него отвечает событие «blur», которым мы и воспользуемся — это событие наступает в тот момент, когда элемент теряет фокус, т.е., в нашем случае, когда пользователь уйдет из поля e-mail.

А на третьем этапе мы будем реагировать на событие, связанное с отобранным элементом, а именно, когда произойдет событие blur относительно поля e-mail, мы проверим значение поля (т.е., строка, которую ввел пользователь) на соответствие шаблону и, если все хорошо, то выведем соответствующее сообщение и активируем кнопку, в противном случае — выведем сообщение о том, что такой e-mail нам не подходит и деактивируем кнопку, если она активна. Все просто.

Отберем элемент с идентификатором mail (это и будет нужное нам поле) и поместим его в переменную mail, поскольку мы будем обращаться к этому элементу еще не раз:

$(document).ready(function(){
	var pattern = /^[a-z0-9_-]+@[a-z0-9-]+\.[a-z]{2,6}$/i;
	var mail = $('#mail');
});

Как уже отмечалось в предыдущих уроках, для того, чтобы знать как происходит отбор элементов в jQuery — достаточно знаний CSS. Далее мы отслеживаем событие потери фокуса с относительно отобранного элемента и, когда такое событие наступит — выполним анонимную функцию:

$(document).ready(function(){
	var pattern = /^[a-z0-9_-]+@[a-z0-9-]+\.[a-z]{2,6}$/i;
	var mail = $('#mail');
	
	mail.blur(function(){
	
	});
});

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

$(document).ready(function(){
	var pattern = /^[a-z0-9_-]+@[a-z0-9-]+\.[a-z]{2,6}$/i;
	var mail = $('#mail');
	
	mail.blur(function(){
		if(mail.val() != ''){
				
			}else{
				$('#valid').text('Поле e-mail не должно быть пустым!');
			}
	});
});

В блоке иначе (else) мы отобрали в набор элемент с идентификатором "valid" (помним, что это span, в который выводим сообщения о валидации). Затем при помощи метода text мы добавляем в этот элемент текст "Поле e-mail не должно быть пустым!". Теперь мы можем даже протестировать то, что имеем на данный момент. Сохраним файл, обновим страницу и попробуем стать в поле e-mail (оно получает фокус), а затем просто уйти из него… Выводится нужное сообщение.

Замечательно! Идем дальше.

Мы также планировали добавлять полю класс "error", если что-то не так… это как раз один из таких случаев. Добавить класс элементу можно с помощью метода addClass():

$(document).ready(function(){
	var pattern = /^[a-z0-9_-]+@[a-z0-9-]+\.[a-z]{2,6}$/i;
	var mail = $('#mail');
	
	mail.blur(function(){
		if(mail.val() != ''){
				
			}else{
				$('#valid').text('Поле e-mail не должно быть пустым!');
				mail.addClass('error');
			}
	});
});

Переходим к блоку кода, когда условие выполняется, т.е., значение поля e-mail не является пустым. Здесь мы также должны использовать конструкцию условия. Условие будет таким: если совпадение найдено — добавляем класс "ok", активируем кнопку и выводим соответствующее сообщение… иначе — добавляем класс "error", деактивируем кнопку и выводим соответствующее сообщение. Проверить строку на соответствие шаблону нам поможет метод search(), параметром которого и будет созданная нами регулярка. Метод возвращает числовое значение, которое обозначает позицию первого найденного совпадения с регулярным выражением. Поскольку мы ищем с самого начала строки, т.е., с нулевого элемента, то в случае успеха — метод вернет ноль (т.е., совпадение найдено с начала строки). Если же совпадений нет, то метод вернет значение "-1" (минус единица).

Таким образом, в условии мы просто проверим, вернет ли метод search() ноль, если вернет — ok, иначе — error. Ну а разблокировать уже заблокированную кнопку мы сможем, воспользовавшись методом attr(), при помощи которого мы установим атрибут "disabled" в положение false, т.е., как бы деактивируем сам этот атрибут (в блоке иначе мы наоборот будем активировать этот атрибут, используя значение TRUE):

$(document).ready(function(){
	var pattern = /^[a-z0-9_-]+@[a-z0-9-]+\.[a-z]{2,6}$/i;
	var mail = $('#mail');
	
	mail.blur(function(){
		if(mail.val() != ''){
				if(mail.val().search(pattern) == 0){
					$('#valid').text('Подходит');
					$('#submit').attr('disabled', false);
				}else{
					$('#valid').text('Не подходит');
					$('#submit').attr('disabled', true);
				}
			}else{
				$('#valid').text('Поле e-mail не должно быть пустым!');
				mail.addClass('error');
			}
	});
});

Также добавим класс "error", если e-mail не подходит и класс "ok", если адрес подходит. При этом не забываем удалять класс "error", если e-mail подходит, поскольку такой класс может быть установлен ранее — сделать это может метод removeClass(). Ну и не забудем деактивировать кнопку, если поле осталось пустым:

$(document).ready(function(){
	var pattern = /^[a-z0-9_-]+@[a-z0-9-]+\.[a-z]{2,6}$/i;
	var mail = $('#mail');
	
	mail.blur(function(){
		if(mail.val() != ''){
				if(mail.val().search(pattern) == 0){
					$('#valid').text('Подходит');
					$('#submit').attr('disabled', false);
					mail.removeClass('error').addClass('ok');
				}else{
					$('#valid').text('Не подходит');
					$('#submit').attr('disabled', true);
					mail.addClass('ok');
				}
			}else{
				$('#valid').text('Поле e-mail не должно быть пустым!');
				mail.addClass('error');
				$('#submit').attr('disabled', true);
			}
	});
});

Шаг 4. Модифицируем регулярное выражение.

Последнее, что мы сделаем — это немного изменим шаблон. Зачем, спросите Вы? Дело в том, что данный шаблон не пропустит некоторую, сравнительно небольшую, долю адресов e-mail… это адреса доменов третьего уровня. Например, возьмем условный сайт — site.net.ua. Почта такого сайта, соответственно, может выглядеть так: mail@site.net.ua — такой e-mail наш шаблон не пропустит. Дополним немного шаблон и добавим в него еще 1 необязательную группу символов. Помочь в этом нам сможет квантор «?», который говорит, что символ (или группа символов, как в нашем случае) необязателен, но, если он встретится, то только 1 раз — не более. Так как мы должны учесть, что в группе будут находиться некие символы и точка, то мы должны объединить эти символы с точкой в группу — здесь нам пригодиться диапазон группы — (…).

После небольшого дополнения регулярка примет следующий вид:

var pattern = /^[a-z0-9_-]+@[a-z0-9-]+\.([a-z]{1,6}\.)?[a-z]{2,6}$/i;

Заключение.

Теперь все отлично.

Мы реализовали все те задачи, которые планировали в самом начале. В конце хотелось бы сказать несколько слов о том, что не следует забывать, что написанный код служит исключительно для улучшения юзабилити создаваемого веб-интерфейса и никогда не стоит забывать, что клиентские данные ВСЕГДА нужно проверять на стороне сервера. На этом урок закончен.

Ваши вопросы и отзывы жду в комментариях

С уважением Андрей Кудлай

Автор: Кудлай Андрей

Редакция: Рог Виктор и Андрей Бернацкий. Команда webformyself.

JavaScript&jQuery с нуля до профи

Пройдите пошаговый видеокурс по JavaScript&jQuery

Научиться

Метки:

Комментарии Вконтакте:

Комментарии Facebook:

Комментарии (44)

  1. Дмитрий

    Регулярные выражения очень полезная вещь, спасибо за статью.
    Вопрос: .рф — не поддерживается?
    Домены 3-го уровня может образовать любой домен 2-го уровня, а в примере ([a-z]{1,6}\.)
    не хватает 0-9 и — , да и {1,6} видимо лишнее
    или я неправ?

    • Андрей Кудлай

      По поводу кириллических доменов, то, на мой взгляд, лучше пока что воздержаться от работы с ними — это все пока что еще очень сыро работает. Но регулярку можно подправить для работы с кириллицей, для этого достаточно добавить в нужные группы диапазон «а-я», т.е., к примеру, так: [a-zа-я]
      «…в примере ([a-z]{1,6}\.) не хватает 0-9 и – , да и {1,6} видимо лишнее…»
      в комментарии выше указал, что целью урока не было изучение стандартов RFC, а потому я просто взял типовой e-mail и написал под него регулярку… Вы же можете ее переписать под свои нужды, о чем и говорилось в уроке. По второй части — {1,6} мы указали, что в этой группе может быть от 1 до 6 символов… в принципе, здесь больше нас интересует ограничение максимума… поэтому не думаю, что это лишнее. Вообще, можно убрать этот квантор и посмотреть, что будет :) … правильно, тогда можно будет поставить только 1 литеру, соответственно, понадобится другой соответствующий квантор ;)

  2. Михаил

    Про регулярки хорошо разжевал, спасибо за шпаргалку.

  3. Serg

    Адрес вида m.a.i.l@host.ru не пройдет.

    • Андрей Кудлай

      Это очевидно. Мы ведь не разрешаем точки в первой группе. Мы явно указали то, что мы там разрешаем, если нужно разрешить еще что-либо — пожалуйста, все в руках Ваших… в принципе, я об этом и говорил в видео.
      Вообще, целью урока не являлось изучение стандартов RFC и поиск с дальнейшим составлением регулярки всех возможных почтовых адресов. Цель урока, напомню, показать как можно валидировать e-mail без обращения к серверу. Как вспомогательное средство, была затронута тема регулярных выражений, которые я пытался объяснить максимально доступно. Дальше — дело за Вами.

  4. Alex

    ты крут! давай еще!

  5. Алексей

    В конце шага 3 в коде на строке 14 ошибка: mail.addClass(‘ok’);
    а надо mail.addClass(‘error’);

    Поправьте если я не прав.
    А может вообще лучше так:
    mail.removeClass(‘ok’).addClass(‘error’);

    • Андрей Кудлай

      Да, конечно же, это я видать на автомате вставил и забыл изменить при написании текстовой версии урока (но в исходниках все без ошибок) …в блоке else (если e-mail не подходит) необходимо добавлять класс error. Спасибо за поправку ;)
      По второй части вопроса «А может вообще лучше так: mail.removeClass(‘ok’).addClass(‘error’);»
      Можно и так :)

      • Алексей

        Всегда рад.
        Вам спасибо за урок. Для меня очень полезным оказалось разжевывание регулярных выражений :)

    • Алексей

      Просто ради интереса. Кому же не понравился камент? Вроде по делу всё.

      • Андрей Кудлай

        Не стоит обращать внимания — люди разные бывают… или может кто-то просто тренировался нажимать на красные ручки :)

  6. Татьяна

    Я не могу уменьшить фото для Твиттера. Если можно научите как…

  7. константин

    тихий звук урока, на ноуте слушать не комфортно …

    • Андрей Кудлай

      Не стоит благодарности :)
      По вопросу: у меня все ок со звуком… да и другие, вроде бы, не жалуются.

      • константин

        согласен, вы же уроки для себя пишете, поэтому не стоит перейматься …

        • Виктор Рог

          У меня со звуком также все в порядке.

          • константин

            ну и кому это интересно ? я же не спрашивал у кого в порядке, а у кого не в порядке…, я написал, что у меня урок звучит тихо, а дальше желание автора, записывать уроки в будущем так же или повысить громкость …

    • Виктор Рог

      Мы поняли Вашу мысль. Спасибо.

  8. Александр

    Норм, спасибо за очередной полезный урок. Попробую теперь это реализовать у себя. Спасибо.

  9. Strannikkz

    Спасибо буду пробывать

  10. Игорь

    Классно!
    Уже опробовал этот шаблон. Сделал по аналогии, всё получилось. Хороший урок. Спасибо!

  11. Николай

    Перешел на страницу с демкой , в Opera 11 не работает ! Хотя js в браузере разрешен . Или это span блоки с ошибками не отображаются ,для span class-a valid тоже css нужен ?

    • Андрей Кудлай

      В демо все кроссбраузерно… работает корректно даже в IE6… возможно, забыли после введения e-mail кликнуть вне поля (напоминаю, что в демо валидация происходит только по событию потери фокуса полем для e-mail’a)?
      По поводу: «Или это span блоки с ошибками не отображаются ,для span class-a valid тоже css нужен ?»… не понял вопроса… может, если он четче будет сформулирован — попробую дать ответ.

  12. Константин

    Хорошо,понятно. Спасибо. Очень полезно.

  13. Александр

    нужно опробовать

  14. Татьяна

    Даже при легком прикасании к уроку стало кое-что понятно

  15. Flar

    Некоторое время думал, где подвох, и искал употребление переменной pattern в коде. Потом нашел фразу:

    «Проверить строку на соответствие шаблону нам поможет метод search(), параметром которого и будет созданная нами регулярка.»

    Собственно search() в коде вызывается без параметра, тогда как передаваться туда должен pattern, по идее.

    • Андрей Кудлай

      Нет подвоха, просто при написании текстовой версии урока «сгубил» копипаст, когда копируешь участки кода из описания выше :)
      Конечно же, в search() должен передаваться шаблон регулярки. Спасибо за наблюдательность, поправили ;)
      Собственно, в исходниках к уроку все правильно и работает, ну и в видео также все ок.

  16. Lacmus

    Hi. В первой части регулярки, imho, нужно так
    /^[a-z0-9_-.]+@, то есть добавляем точку. Ибо e-mail бывают и такие vasja.pupkin@pupok.com

    • Андрей Кудлай

      Здравствуйте.
      Уже отмечал, что целью урока не было изучение стандартов RFC, а потому я просто взял типовой e-mail и написал под него регулярку.
      Ну а Вы уже можете модернизировать ее так, как считаете нужным.
      Кстати, вот так вот — /^[a-z0-9_-.]+@ — совсем неверно и работать не будет :)

      • Lacmus

        /^[+a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/i

      • Lacmus

        /^[+a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/i

        Ну и я собственно, просто про точку напомнил =)

        • Андрей Кудлай

          Понял :)
          Так уже будет работать… только немного точнее будет так:
          /^[+a-z0-9_.-]+@[a-z0-9.-]+\.[a-z]{2,6}$/i
          большие буквы лишние, поскольку модификатор регистронезависимости указан.

  17. Дмитрий

    По поводу бага с «автоподставлением» при keyup.
    При просмотре урока, пришла мысль, сразу же скачал исходник и попробовал! Если продублировать в коде скрипта наши функции, «mail.keyup» а после еще раз все тоже самое но уже с «blur», то при подставление емейла, он пройдет валидацию и кнопка активируется после расфокусировки (то есть во всех остальных случаях будет работать c «keyup», а при подставление сработает с «blur»)
    P.S. Причем, если сначала написать с «Blur» а потом с «Keyup», то не сработает =/
    P.P.S. Мне стало интересно, возможно ли начать проходить валидацию только после первого входа, так как в какой то мере не правильно подсвечивать поле красным при первом же клике на него, еще до тех пор как что либо ввел

    • Андрей Кудлай

      Дмитрий, честно говоря, на словах сложно уловить Вашу мысль. Создайте тему на нашем форуме, выложите код и тогда можно будет его обсудить.

      • Дмитрий

        Лень регистрироваться на форуме, да и лучше разместить код под уроком…
        Приблизительно:

        $(document).ready(function(){ var pattern =…; var mail =…;
        mail.keyup(function(){ код проверки });
        mail.blur(function(){ код проверки});
        });

        Тогда баг с «keyup» о котором вы говорили в видео-уроке можно будет обойти

  18. Bogdan R

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

  19. Екатерина

    За идею спасибо, но хочу отметить, что в скрипте допущены ошибки, пришлось допиливать.
    Вот рабочий вариант:

    var pattern = /^[a-z0-9_-]+@[a-z0-9-]+\.[a-z]{2,6}$/i;
    var mail = $(«input[name='email']«);

    mail.blur(function(){
    if(mail.val() != »){
    if(mail.val().search(pattern) == -1){
    $(«input[type='submit']«).attr(‘disabled’, true);
    mail.removeClass(‘ok’).addClass(‘error’);
    }else{
    alert(‘OK’);
    $(«input[type='submit']«).attr(‘disabled’, false);
    mail.removeClass(‘error’).addClass(‘ok’);
    }
    }else{
    mail.addClass(‘error’);
    $(«input[type='submit']«).attr(‘disabled’, true);
    }
    });

    • Андрей Кудлай

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

  20. Defman

    Спасибо за урок,сегодня как раз искал,как сделать регулярные выражения.А у вас нет туториалов по получению определенной части сайта (например ссылку с классом groupAdmin),которая в последствии обрабатывается?

    • Андрей Кудлай

      Пожалуйста.
      Ну и на форуме можете описать конкретнее задачу и постараемся помочь.

  21. Tutanhamon

    Неплохой обзор. Вообще, валидация имеет свои особенности и тонкости. Все очень сильно зависит от задач. Так, например, если формы не используют html тег «form», что особенно характерно для приложений с кучей скриптов, то большинство плагинов попросту не обработают формы на div-ах. Так же все зависит еще от способа валидации. Например, на многих формах просят указать поле Url. С одной стороны, поле не обязательное. С другой стороны, если пользователь его заполняет, то такое поле так же необходимо проверять на валидность. Ведь кривой Url в последующем может привести к ошибкам. Если интересно, то более подробно об этом можно узнать в обзоре Валидация произвольных форм и контейнеров на jQuery (ida-freewares.ru/validatsiya-polej-proizvolnykh-form-i-kontejnerov-na-jquery.html)

  22. Вячеслав

    Ящик типа mail-mail@mail.ru через дефис валидацию не проходит.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree