Frameworks.suFrameworks.su Шпаргалка вебмастера

  • Главная
  • Framework Kohana
  • PHP
  • Javascript
  • CSS
  • Сервисы
    • Генератор паролей
  • Контакты
Главная / Javascript / Проверка правильности ввода email в форму

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

24.06.2014 1 7835

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

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

Теги:
  • jQuery
  • Валидация
  • Пример

Комментарии

  1. Дмитрий
    Дмитрий
    10.03.2017 21:25

    Ваше пасиба парни. Годный код. Предлагаю раздел Jquery расширить, осовременить, и писать еще годноту :)

    Ответить

Оставить комментарий Отмена

*

*

*

*

Категории

  • PHP
    • Framework Kohana
  • Javascript
  • CSS
  • Администрирование

Теги

Framework Kohana Пример jQuery Уроки CRON Установка и настройка Backup CSS3 Валидация API Bash Cache Captcha i18n Linux

Авторизация

  • Забыли пароль?
  • Регистрация

Популярные статьи

  • Находим расстояние до ближайших станций метро

    Находим расстояние до ближайших станций метро

    17.02.2017 102828
  • Регистрация и авторизация пользователей. Модуль Auth в Kohana 3.3.x

    Регистрация и авторизация пользователей. Модуль Auth в Kohana 3.3.x

    02.07.2014 44444
  • Собственная система лайков на PHP и JQuery

    Собственная система лайков на PHP и JQuery

    06.04.2015 33128
  • Javascript — сумма прописью

    Javascript — сумма прописью

    07.07.2014 22967
  • Cross-domain ajax с помощью jQuery

    Cross-domain ajax с помощью jQuery

    24.04.2015 19840
Copyright © 2014-2025 Frameworks.su. Все права защищены.