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


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

^ Наверх ^