Шаг 1 - Подготовка. Создаем форму на HTML
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Валидация email на jQuery</title>
<script type="text/javascript" src="js/jquery-1.8.0.min.js"></script>
<script type="text/javascript">
// Здесь будем писать код
</script>
</head>
<body>
<h2>Проверка email</h2>
<form method="post" action="#">
<p>
<input type="text" id="email" />
<span id="valid"></span>
</p>
<p>
<input type="submit" value="Отправить" />
</p>
</form>
</body>
</html>
Шаг 2 - Делаем полную проверку введенного email
$(document).ready(function() {
$('#email').blur(function() {
if($(this).val() != '') {
var pattern = /^([a-z0-9_\.-])+@[a-z0-9-]+\.([a-z]{2,4}\.)?[a-z]{2,4}$/i;
if(pattern.test($(this).val())){
$(this).css({'border' : '1px solid #569b44'});
$('#valid').text('Верно');
} else {
$(this).css({'border' : '1px solid #ff0000'});
$('#valid').text('Не верно');
}
} else {
$(this).css({'border' : '1px solid #ff0000'});
$('#valid').text('Поле email не должно быть пустым');
}
});
});
