Проверка правильности ввода email в форму

В данном уроке я расскажу как сделать мгновенную проверку на валидность поля Email в форме с помощью jQuery.

Код очень простой в понимании и позволяет улучшить внешний вид ваших форм.

HTML

Для начала создадим  простое поле для нашего E-mail адресса:

<div class="form-item">
    <input type="text" id="validate_email" width="30" />
    <span id="validEmail"></span>
</div>

CSS

Добавим стили к нашему полю

#validEmail{
    margin-top: 4px;
    margin-left: 9px;
    position: absolute;
    width: 16px;
    height: 16px;
}
#validEmail.is_not_valid{
    background: url("../images/is_not_valid.png") no-repeat;
}
#validEmail.is_valid{
    background: url("../images/is_valid.png") no-repeat;
}

jQuery и Javascript

Далее создаем функцию, которая будет проверять поле Email при вводе символов на регулярные выражения (например, на обязательное наличие @, только латинские буквы и наличие точки отделяющую домен), и при правильном или неправильном вводе E-mail'a будет присваивать элементу с id=validEmail нужный класс (is_valid или is_not_valid).

$(document).ready(function(){
    /**
     * При нажатии клавиши идет проверка на правильность E-mail'a
     */
    $("#validate_email").keyup(function(){
        var email = $("#validate_email").val();
 
        if(email != ''){
            if(!check_mail(email)){
                $("#validEmail").removeClass().addClass('is_not_valid'); // E-mail не корректный
            }else{
                $("#validEmail").removeClass().addClass('is_valid'); // E-mail корректный
            }
        }else{
            $("#validEmail").removeClass();  // В поле ничего не ввели
        }
    });
});

/**
 * Прооверка на корректность E-mail адреса
 */
function check_mail(mail){
    mail = (mail != undefined) ? mail : '';
    var reg = /^(("[\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;
    if (!mail.match(reg)) return false;
    
    return true;
}

Также вначале не забудьте подключить фреймворк jQuery.

Скачать рабочий пример