Мгновенная проверка правильности введения 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
Просмотров: 104891
Правила перепечатки

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

^ Наверх ^