Мгновенная проверка правильности введения Email в форму

В данном уроке я расскажу Вам, как сделать проверку верности написания Email адреса в форме с помощью jQuery.

Код очень прост и совсем не грузит сайт. Более того, при использовании данной технологии внешний вид Ваших форм существенно улучшится.

Начнем с HTML

Создадим простое поле формы:

<div><input type="text" id="validate" width="30"><span id="validEmail"></span></div>

Как Вы видите, это простое текстовое поле для email адресов.

CSS

Стили можно поместить как в тот же документ, так и в отдельный файл.

<style>
#validEmail
{
margin-top: 4px;
margin-left: 9px;
position: absolute;
width: 16px;
height: 16px;
}
</style>

jQuery и Javascript

Далее создаем функцию, которая будет проверять Email на регулярные выражения (например, на обязательное наличие @), и при правильном вводе email будет выводить такую иконку , при неправильном - . Также вначале подключаем фреймворк jQuery. В данном коде необходимо помнить про путь к jQuery и картинкам, которые показывают правильно или неправильно ввел юзер Email.

<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript">

$(document).ready(function() {
$("#validate").keyup(function(){

var email = $("#validate").val();

if(email != 0)
{
if(isValidEmailAddress(email))
{
$("#validEmail").css({
"background-image": "url('validYes.png')"
});
} else {
$("#validEmail").css({
"background-image": "url('validNo.png')"
});
}
} else {
$("#validEmail").css({
"background-image": "none"
});
}

});

});

function isValidEmailAddress(emailAddress) {
var pattern = new RegExp(/^(("[\w-\s]+")|([\w-]+(?:\.[\w-]+)*)|("[\w-\s]+")([\w-]+(?:\.[\w-]+)*))(@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$)|(@\[?((25[0-5]\.|2[0-4][0-9]\.|1[0-9]{2}\.|[0-9]{1,2}\.))((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\.){2}(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\]?$)/i);
return pattern.test(emailAddress);
}

</script>

Данный код, конечно же, необходимо вставить между тегами <head></head>.

Вот и все готово! Всего наилучшего!

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: www.reynoldsftw.com
Перевел: Максим Шкурупий
Урок создан: 16 Апреля 2009
Просмотров: 102975
Правила перепечатки


5 последних уроков рубрики "jQuery"

или авторизуйтесь, чтобы добавлять комментарии, оценивать уроки и сохранять их в личном кабинете
  • 16 Апреля 2009 21:38
    kickerps
    о, при регистрации очень понадобиться =)
  • 16 Апреля 2009 22:11
    Viktor
    Максим спасибо за ваши уроки по jQuery, многие уже использовал на своем сайте, продолжайте в том же духе !!!!
  • 16 Апреля 2009 22:25
    yaЕвген
    Ловкость jquery и накакого мошенничества :) По такому же принципу можно сделать и проверку остальных полей
  • 16 Апреля 2009 22:47
    frol
    Ну картини оно показывает, удобно конечно. Но, допустим при регистрации, оно пропустит и с неправильным Email'ом? Так ведь? Это надо писать еще один код для запрета неправильных Email'ов?
  • 17 Апреля 2009 17:16
    yaЕвген
    frol , что ты имеешь ввиду под словами "неправильный email"?
  • 17 Апреля 2009 17:26
    dima
    oO сайт заработал, пасиба! frol, формат мыла нужно проверять средствами php))
  • 17 Апреля 2009 17:29
    МаксимШкурупий
    формат мыла проверяется и тут на большинство регулярных выражений
  • 17 Апреля 2009 17:47
    dima
    ага вижу isValidEmailAddress(), нехилый шаблон о_О но при выкл. js я как понимаю отправка не произойдёт? зы: охота урок по JsHttpRequest
  • 17 Апреля 2009 22:14
    madjel
    Поддерживаю, нужны уроки по JsHttpRequest.
  • 7 Мая 2009 18:43
    Andrey
    А как таким образом сделать проверку на валидность других полей ?
  • 10 Августа 2009 00:41
    Jorstad
    После того как перенес сайт на удаленный сервер, проверка перестала работать. На локальном работает на удаленном нет. Содержание кода едентично.((
  • 19 Августа 2009 16:53
    pafos
    Такая же проблема была как и у Jorstad, но я её решил. Там в коде и в названиях файлов по одной букве в разных регистрах. Вобщем переименовать нужно файлы: validno.png и validyes.png в: validNo.png и validYes.png, после этого все на серваке будет работать. Почему на локальной машине работает и без этих махинаций не знаю.
  • 26 Августа 2009 15:32
    Sharif
    Спасибо, очень полезный урок :)
  • 22 Октября 2009 18:58
    sicret
    мне тоже понравился, но он работает на keyup при автозаполнении operi например с помощью мыши (т.е правой кнопкой)...данный скрипт не сработал... может кто знает как добавить туда такое событие??
  • 28 Декабря 2009 15:42
    Александр
    добавил себе на сайт, все работает вот только с автозаполнением проблемы..
  • 16 Мая 2010 11:56
    Lara
    Спасибо, все работает. Для тех, у кого есть проблемы: назовите картинки одинаково - в файле и скрипте.
  • 18 Мая 2010 07:22
    Deonis
    Не плохой, но требует доработок. Например, заведомо не правильный email, типа --a@u.netttt он спокойно пропусти.
  • 3 Марта 2012 19:42
    melonikey
    А как вместо картинки поставить текст?
    • 20 Июля 2013 15:45
      nikitius
      Спасибо. Только есть вопрос: как сделать, чтобы при появлении картинки "validno.png" и нажатии на "отправить" высвечивало "извините, вы ввели неверный e-mail". А то так смысла нет у этой идеи что так, что так пользователь сможет ввести ложный эмайл, например "111", высветит "validno.png" но отправляться то всеравно будет.
    • 20 Июля 2013 15:52
      nikitius
      Подскажите пожалуйста как разрешить с помощью php проблему, которую я описал выше. За ранее спасибо!
  • 19 Марта 2014 03:10
    Shperung
    Отличный скрипт, будет первым на моем блоге который я делал по видеоурокам автора "Блог на РНР". А РНР скрипт рассылки сообщений пользователям о новых заметках - писал сам используя навыки от отличных уроков, заходите на мой блог http://viktorkrav4uk.uphero.com/ оставляйте комментарии к моим заметкам и вводите почту для рассылки.
^ Наверх ^