Как проверить электронную почту в Jquery? - PullRequest
Новая
       9

Как проверить электронную почту в Jquery?

8 голосов
/ 08 сентября 2010

Я написал следующий скрипт проверки контактной формы.Как я могу проверить поле электронной почты? 

<style type="text/css">
    div.contactForm { width:370px; margin:0 auto; }
    form.contactUs label { display:block; }
    form.contactUs input { margin-bottom:10px; }
    input.submit { margin-top:10px; }
    input.error { background:#FF9B9B; border:1px solid red; }
    div.errorMessage { color:#f00; padding:0 0 20px; }
</style>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

<script type="text/javascript">
    $(document).ready(function() {
        $('.errorMessage').hide();
        $('.submit').click(function() {

            var name = $('input.name').val();
            var email = $('input.email').val();
            var phone = $('input.phone').val();

            if (name == '') {
                $('input.name').addClass('error');
                $('input.name').keypress(function(){
                    $('input.name').removeClass('error');
                });
            }
            if (email == '') {
                $('input.email').addClass('error');
                $('input.email').keypress(function(){
                    $('input.email').removeClass('error');
                });
            }
            if (phone == '') {
                $('input.phone').addClass('error');
                $('input.phone').keypress(function(){
                    $('input.phone').removeClass('error');
                });
            }
            if (name == '' || email == '' || phone == '') {
                $('.errorMessage').fadeIn('medium');
                return false;
            }

        });
    });
</script>

<div class="contactForm">

<h2>Contact Us</h2>

<div class="errorMessage">Please enter all required fields.</div>

<form action="http://google.com" method="post" class="contactUs">

    <label>Name <em>(required)</em></label>
    <input type="text" name="name" class="name" size="30" />

    <label>Email <em>(valid email required)</em></label>
    <input type="text" name="email" class="email" size="30" />

    <label>Phone <em>(required)</em></label>
    <input type="text" name="phone" class="phone" size="30" />

    <label>Message</label>
    <textarea name="message" cols="40" rows="10"></textarea>

    <br />
    <input type="submit" name="submit" value="Submit" class="submit" />

</form>

</div><!--contactForm-->

РЕДАКТИРОВАТЬ

Под проверкой я имею в виду, что введенное значение должно содержать «@» и «.» В нужном месте.1007 * Также я не хочу использовать дополнительные плагины.

Ответы [ 4 ]

34 голосов
/ 08 сентября 2010

Вы можете использовать RegEx, если вы не хотите использовать какие-либо плагины. 

var testEmail = /^[A-Z0-9._%+-]+@([A-Z0-9-]+\.)+[A-Z]{2,4}$/i;
if (testEmail.test(valueToTest))
    // Do whatever if it passes.
else
    // Do whatever if it fails.

Это даст вам большинство писем. Интересное прочтение о проверке писем с помощью RegEx.

Вы можете проверить скрипт здесь: http://jsfiddle.net/EFfCa/

2 голосов
/ 30 января 2013

Если вы действительно не хотите использовать плагин, я нашел этот метод довольно хорошим: 

function validateEmail(email) {
    var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
    if( !emailReg.test( email ) ) {
        return false;
    } else {
        return true;
    }
}

JSFIDDLE

http://thejimgaudet.com/articles/support/web/jquery-e-mail-validation-without-a-plugin/

1 голос
/ 08 сентября 2010

Измените свой блок input.email следующим образом: 

            if (email == '') {
            $('input.email').addClass('error');
            $('input.email').keypress(function(){
                $('input.email').removeClass('error');
            });
            $('input.email').focusout(function(){
                $('input.email').filter(function(){
                    return this.value.match(/your email regex/);
                }).addClass('error');
            });
        }

Объяснение: Добавьте действие фокуса в элемент формы input.email, проверяет строку электронной почты, используя стандарт RFC822.Если он не может пройти, добавьте класс 'error'.

Я не проверял это в своем браузере, но он должен работать для jQuery> 1.4.

EDIT: я удалилregex, поместите туда свой любимый.

1 голос
/ 08 сентября 2010

В настоящее время я использую кетчуп для проверки формы.Есть также плагин для басиста .Проверьте плагин, он сэкономит вам часы написания регулярных выражений.

...