В данном уроке я расскажу Вам, как сделать проверку верности написания 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>.
Вот и все готово! Всего наилучшего!