Проверка электронной почты с использованием jQuery - PullRequest
Новая
       332

Проверка электронной почты с использованием jQuery

324 голосов
/ 24 марта 2010

Я новичок в jQuery, и мне было интересно, как использовать его для проверки адресов электронной почты.

Ответы [ 35 ]

658 голосов
/ 24 марта 2010

Вы можете использовать обычный старый JavaScript для этого: 

function isEmail(email) {
  var regex = /^([a-zA-Z0-9_.+-])+\@(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,4})+$/;
  return regex.test(email);
}
155 голосов
/ 31 января 2012

Функция jQuery для проверки электронной почты

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

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

и теперь, чтобы использовать это 

if( !validateEmail(emailaddress)) { /* do stuff here */ }

Ура!

40 голосов
/ 24 марта 2010

Я бы использовал плагин проверки jQuery по нескольким причинам.

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

Кроме того, еще одно огромное преимущество заключается в том, что он размещен на CDN, текущую версию на момент ответа можно найти здесь: http://www.asp.net/ajaxLibrary/CDNjQueryValidate16.ashx Это означает ускорение загрузки клиента.

35 голосов
/ 24 марта 2010

Посмотрите на http: //bassistance.de/jquery-plugins/jquery-plugin-validation/. Это хороший плагин jQuery, который позволяет построить мощную систему проверки форм. Здесь есть несколько полезных образцов . Итак, проверка поля электронной почты в форме будет выглядеть так: 

$("#myform").validate({
  rules: {
    field: {
      required: true,
      email: true
    }
  }
});

См. Документация по методу электронной почты для деталей и образцов.

15 голосов
/ 03 сентября 2013 

<!-- Dont forget to include the jQuery library here -->
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript">

$(document).ready(function() {

    $("#validate").keyup(function(){

        var email = $("#validate").val();

        if(email != 0)
        {
            if(isValidEmailAddress(email))
            {
                $("#validEmail").css({
                    "background-image": "url('validYes.png')"
                });
            } else {
                $("#validEmail").css({
                    "background-image": "url('validNo.png')"
                });
            }
        } else {
            $("#validEmail").css({
                "background-image": "none"
            });         
        }

    });

});

function isValidEmailAddress(emailAddress) {
    var pattern = new RegExp(/^(("[\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);
    return pattern.test(emailAddress);
}

</script>

<style>
    #validEmail
    {
        margin-top: 4px;
        margin-left: 9px;
        position: absolute;
        width: 16px;
        height: 16px;
    }

    .text
    {
        font-family: Arial, Tahoma, Helvetica;
    }
</style>

    <title>Live Email Validation with jQuery Demo</title>
</head>
<body>
    <div class="text"><h1>Reynoldsftw.com - Live Email Validation</h1><h2>Type in an email address in the box below:</h2></div>
    <div><input type="text" id="validate" width="30"><span id="validEmail"></span></div>
    <div class="text"><P>More script and css style

: www.htmldrive.net

Источник: htmldrive.com

14 голосов
/ 31 января 2013 
<script type="text/javascript">
    $(document).ready(function() {
      $('.form_error').hide();
      $('#submit').click(function(){
           var name = $('#name').val();
           var email = $('#email').val();
           var phone = $('#phone').val();
           var message = $('#message').val();
           if(name== ''){
              $('#name').next().show();
              return false;
            }
            if(email== ''){
               $('#email').next().show();
               return false;
            }
            if(IsEmail(email)==false){
                $('#invalid_email').show();
                return false;
            }

            if(phone== ''){
                $('#phone').next().show();
                return false;
            }
            if(message== ''){
                $('#message').next().show();
                return false;
            }
            //ajax call php page
            $.post("send.php", $("#contactform").serialize(),  function(response) {
            $('#contactform').fadeOut('slow',function(){
                $('#success').html(response);
                $('#success').fadeIn('slow');
               });
             });
             return false;
          });
      });
      function IsEmail(email) {
        var regex = /^([a-zA-Z0-9_\.\-\+])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
        if(!regex.test(email)) {
           return false;
        }else{
           return true;
        }
      }
  </script>

<form action="" method="post" id="contactform">
                            <table class="contact-table">
                              <tr>
                                <td><label for="name">Name :</label></td>
                                <td class="name"> <input name="name" id="name" type="text" placeholder="Please enter your name" class="contact-input"><span class="form_error">Please enter your name</span></td>
                              </tr>
                              <tr>
                                <td><label for="email">Email :</label></td>
                                <td class="email"><input name="email" id="email" type="text" placeholder="Please enter your email" class="contact-input"><span class="form_error">Please enter your email</span>
                                  <span class="form_error" id="invalid_email">This email is not valid</span></td>
                              </tr>
                              <tr>
                                <td><label for="phone">Phone :</label></td>
                                <td class="phone"><input name="phone" id="phone" type="text" placeholder="Please enter your phone" class="contact-input"><span class="form_error">Please enter your phone</span></td>
                              </tr>
                              <tr>
                                <td><label for="message">Message :</label></td>
                                <td class="message"><textarea name="message" id="message" class="contact-input"></textarea><span class="form_error">Please enter your message</span></td>
                              </tr>
                              <tr>
                                <td></td>
                                <td>
                                  <input type="submit" class="contactform-buttons" id="submit"value="Send" />
                                  <input type="reset" class="contactform-buttons" id="" value="Clear" />
                                </td>
                              </tr>
                            </table>
     </form>
     <div id="success" style="color:red;"></div>
14 голосов
/ 06 октября 2012

Я бы порекомендовал Verimail.js , также есть плагин JQuery .

Почему? Verimail поддерживает следующее:

  • Проверка синтаксиса (согласно RFC 822)
  • Подтверждение ДВУ IANA
  • Правописание для наиболее распространенных доменов верхнего уровня и доменов электронной почты
  • Запретить временные домены учетной записи электронной почты, такие как mailinator.com

Так что кроме проверки, Verimail.js также дает вам предложения. Поэтому, если вы введете письмо с неправильным TLD или доменом, очень похожим на обычный домен электронной почты (hotmail.com, gmail.com и т. Д.), Оно может обнаружить это и предложить исправление.

Примеры: * 1 021 *

  • test@gnail.con -> Вы имели в виду test@gmail.com?
  • test@hey.nwt -> Вы имели в виду test@hey.net?
  • test@hottmail.com -> Вы имели в виду test@hotmail.com?

И так далее ..

Чтобы использовать его с jQuery, просто включите verimail.jquery.js на свой сайт и запустите следующую функцию: 

$("input#email-address").verimail({
    messageElement: "p#status-message"
});

Элемент сообщения - это элемент, в котором будет показано сообщение. Это может быть что угодно: от «Ваш адрес электронной почты недействителен» до «Вы имели в виду ...?».

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

if($("input#email-address").getVerimailStatus() < 0){
    // Invalid
}else{
    // Valid
}

Эта функция возвращает целочисленный код состояния в соответствии с объектом Comfirm.AlphaMail.Verimail.Status. Но общее правило состоит в том, что любые коды ниже 0 являются кодами, указывающими на ошибки.

14 голосов
/ 09 декабря 2016 

function isValidEmailAddress(emailAddress) {
    var pattern = /^([a-z\d!#$%&'*+\-\/=?^_`{|}~\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]+(\.[a-z\d!#$%&'*+\-\/=?^_`{|}~\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]+)*|"((([ \t]*\r\n)?[ \t]+)?([\x01-\x08\x0b\x0c\x0e-\x1f\x7f\x21\x23-\x5b\x5d-\x7e\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]|\\[\x01-\x09\x0b\x0c\x0d-\x7f\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))*(([ \t]*\r\n)?[ \t]+)?")@(([a-z\d\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]|[a-z\d\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF][a-z\d\-._~\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]*[a-z\d\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])\.)+([a-z\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]|[a-z\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF][a-z\d\-._~\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]*[a-z\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])\.?$/i;
    return pattern.test(emailAddress);
};
if( !isValidEmailAddress( emailaddress ) ) { /* do stuff here (email is invalid) */ }

это предоставил пользователь Luca Filosofi в этом ответе этот ответ

10 голосов
/ 18 сентября 2017

Очень простое решение - использовать проверку html5: 

<form>
  <input type="email" required pattern="[^@]+@[^@]+\.[a-zA-Z]{2,6}">

  <input type="submit">
</form>

http://jsfiddle.net/du676/56/

10 голосов
/ 12 октября 2013

Это выполняет более тщательную проверку, например, проверяет наличие последовательных точек в имени пользователя, таких как john..doe @ example.com 

function isValidEmail(email)
{
    return /^[a-z0-9]+([-._][a-z0-9]+)*@([a-z0-9]+(-[a-z0-9]+)*\.)+[a-z]{2,4}$/.test(email)
        && /^(?=.{1,64}@.{4,64}$)(?=.{6,100}$).*/.test(email);
}

См. подтверждение адреса электронной почты с помощью регулярного выражения в JavaScript .

Страница:
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...