Шаг 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 не должно быть пустым'); } }); });