Валидация email на jQuery


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

источник