web-dev-qa-db-fra.com

Validation du courrier électronique à l'aide de jQuery

Je suis nouveau sur jQuery et je me demandais comment l'utiliser pour valider les adresses e-mail.

316
DuH

Vous pouvez utiliser le vieux javascript classique pour cela:

function isEmail(email) {
  var regex = /^([a-zA-Z0-9_.+-])+\@(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,4})+$/;
  return regex.test(email);
}
643
Fabian

Fonction jQuery pour valider un email

Je n’aime vraiment pas utiliser les plugins, en particulier lorsque mon formulaire ne contient qu’un champ à valider. J'utilise cette fonction et l'appelle chaque fois que je dois valider un champ de formulaire de courrier électronique.

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

et maintenant utiliser cette 

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

À votre santé!

152
Manish Shrivastava

J'utiliserais le plugin de validation jQuery pour plusieurs raisons.

Vous avez validé, ok super, et maintenant? Vous devez afficher l'erreur, gérer son effacement lorsqu'elle est valide, afficher combien d'erreurs au total peut-être? Il y a beaucoup de choses qu'il peut gérer pour vous, pas besoin de réinventer la roue.

Aussi, un autre avantage énorme est qu’il est hébergé sur un CDN. La version actuelle au moment de cette réponse est disponible ici: http://www.asp.net/ajaxLibrary/CDNjQueryValidate16.ashx This signifie des temps de chargement plus rapides pour le client.

39
Nick Craver

Regardez http: //bassistance.de/jquery-plugins/jquery-plugin-validation/ . Il s’agit du plugin jQuery de Nice, qui permet de construire un système de validation puissant pour les formulaires. Il existe quelques exemples utiles. ici. Ainsi, la validation du champ de courrier électronique dans le formulaire aura l’aspect suivant: 

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

Voir Documentation de la méthode email pour plus de détails et des exemples.

31
Andrew Bashtannik

 

<!-- 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


Source: htmldrive.com

14
SwatiKothari

Je recommanderais Verimail.js , il a aussi un plugin JQuery .

Pourquoi? Verimail prend en charge les éléments suivants:

  • Validation de la syntaxe (selon RFC 822)
  • Validation du TLD IANA
  • Suggestion orthographique pour les TLD et les domaines de messagerie les plus courants
  • Refuser des domaines de compte de messagerie temporaires tels que mailinator.com

Ainsi, outre la validation, Verimail.js vous donne également des suggestions. Donc, si vous tapez un email avec le mauvais TLD ou le mauvais domaine qui est très similaire à un domaine de messagerie commun (hotmail.com, gmail.com, etc.), il peut le détecter et suggérer une correction.

Exemples:

Etc..

Pour l'utiliser avec jQuery, ajoutez simplement verimail.jquery.js sur votre site et exécutez la fonction ci-dessous:

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

L'élément message est un élément dans lequel un message sera affiché. Cela peut être tout, de "Votre email est invalide" à "Voulez-vous dire ...?". 

Si vous avez un formulaire et souhaitez le restreindre afin qu'il ne puisse pas être envoyé si le courrier électronique n'est pas valide, vous pouvez vérifier son statut à l'aide de la fonction getVerimailStatus, comme indiqué ci-dessous:

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

Cette fonction retourne un code de statut entier en fonction de l'objet Comfirm.AlphaMail.Verimail.Status. Mais la règle générale est que tout code inférieur à 0 est un code indiquant une erreur.

13
Robin Orheden

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) */ }

ceci a été fourni par l'utilisateur Luca Filosofi dans cette réponse cette réponse

13
Amila kumara
<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>
13
user1993920

Une solution très simple consiste à utiliser la validation html5:

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

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

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

9
iamse7en

Ceci effectue une validation plus approfondie, par exemple il vérifie par des points successifs dans le nom d'utilisateur tel que john..doe @ exemple.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);
}

Voir valider une adresse email en utilisant une expression régulière en JavaScript .

8
Geek

Si vous avez un formulaire de base, indiquez simplement le type de courrier électronique entré: <input type="email" required>

Cela fonctionnera pour les navigateurs qui utilisent des attributs HTML5 et vous n'avez même pas besoin de JS. Le simple fait d'utiliser la validation par courrier électronique, même avec certains des scripts ci-dessus, ne fera pas grand chose, car:

[email protected] [email protected] [email protected]

etc ... Validera-t-il en tant que "vrais" emails? Il vaudrait donc mieux s’assurer que l’utilisateur doit saisir deux fois son adresse électronique pour s’assurer qu’il y est inscrit le même. Mais il serait très difficile de garantir que l’adresse électronique est réelle. façon. Mais si vous vous assurez simplement qu'il s'agit d'un courrier électronique, restez sur la saisie HTML5.

EXEMPLE DE FIDDLE

Cela fonctionne dans FireFox et Chrome. Cela peut ne pas fonctionner dans Internet Explorer ... Mais Internet Explorer est nul. Alors alors il y a ça ...

7
isaac weathers
function isValidEmail(emailText) {
    var pattern = new RegExp(/^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\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]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([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(emailText);
};

Utilisez comme ceci:

if( !isValidEmail(myEmail) ) { /* do things if myEmail is valid. */ }
6
JayKandari
function validateEmail(emailaddress){  
   var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;  
   if(!emailReg.test(emailaddress)) {  
        alert("Please enter valid email id");
   }       
}
5
JAB
<script type = "text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type = "text/javascript">
    function ValidateEmail(email) {
        var expr = /^([\w-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([\w-]+\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)$/;
        return expr.test(email);
    };
    $("#btnValidate").live("click", function () {
        if (!ValidateEmail($("#txtEmail").val())) {
            alert("Invalid email address.");
        }
        else {
            alert("Valid email address.");
        }
    });
</script>
<input type = "text" id = "txtEmail" />
<input type = "button" id = "btnValidate" value = "Validate" />
4
Pritam

Validation de la messagerie Javascript dans MVC/ASP.NET

Le problème que j'ai rencontré lors de l'utilisation de la réponse de Fabian était son implémentation dans une vue MVC à cause du symbole Razor @. Vous devez inclure un symbole @ supplémentaire pour l’échapper, comme suit: @@

Éviter rasoir en MVC

function isEmail(email) {
  var regex = /^([a-zA-Z0-9_.+-])+\@@(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,4})+$/;
  return regex.test(email);
}

Je ne l'ai pas vu ailleurs sur cette page, alors j'ai pensé que cela pourrait être utile.

MODIFIER

Voici un link de Microsoft décrivant son utilisation. 
Je viens de tester le code ci-dessus et j'ai le js suivant:

function validateEmail(email) {
  var regex = /^([a-zA-Z0-9_.+-])+\@(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,4})+$/; 
  return regex.test(email);
}

Ce qui fait exactement ce qu'il est censé faire.

4
Trevor Nestman

Atterri ici ..... fini ici: https://html.spec.whatwg.org/multipage/forms.html#valid-e-mail-address

... qui fournissait la regex suivante:

/^[a-zA-Z0-9.!#$%&'*+\/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/

... que j'ai trouvé grâce à une note sur le fichier lisez-moi du plugin jQuery Validation: https://github.com/jzaefferer/jquery-validation/blob/master/README.md#reporting-an-issue

Ainsi, la version mise à jour de @Fabian 's answer serait:

function IsEmail(email) {
  var regex = /^[a-zA-Z0-9.!#$%&'*+\/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/;
  return regex.test(email);
}

J'espère que cela pourra aider

4
timborden

Pour ceux qui souhaitent utiliser une meilleure solution maintenable que des correspondances RegEx longues et perturbantes, j'ai écrit quelques lignes de code. Tous ceux qui veulent économiser des octets s’en tiennent à la variante RegEx :)

Cela limite:

  • Non @ dans la chaîne
  • Pas de point dans la chaîne
  • Plus de 2 points après @
  • Mauvais caractères dans le nom d'utilisateur (avant @)
  • Plus de 2 @ en chaîne
  • Mauvais caractères dans le domaine
  • Mauvais caractères dans le sous-domaine
  • Mauvais caractères dans le TLD
  • TLD - adresses

Quoi qu'il en soit, il est toujours possible de fuir, alors assurez-vous de le combiner avec une validation côté serveur + une vérification du lien de messagerie.

Voici leJSFiddle

 //validate email

var emailInput = $("#email").val(),
    emailParts = emailInput.split('@'),
    text = 'Enter a valid e-mail address!';

//at least one @, catches error
if (emailParts[1] == null || emailParts[1] == "" || emailParts[1] == undefined) { 

    yourErrorFunc(text);

} else {

    //split domain, subdomain and tld if existent
    var emailDomainParts = emailParts[1].split('.');

    //at least one . (dot), catches error
    if (emailDomainParts[1] == null || emailDomainParts[1] == "" || emailDomainParts[1] == undefined) { 

        yourErrorFunc(text); 

     } else {

        //more than 2 . (dots) in emailParts[1]
        if (!emailDomainParts[3] == null || !emailDomainParts[3] == "" || !emailDomainParts[3] == undefined) { 

            yourErrorFunc(text); 

        } else {

            //email user
            if (/[^a-z0-9!#$%&'*+-/=?^_`{|}~]/i.test(emailParts[0])) {

               yourErrorFunc(text);

            } else {

                //double @
                if (!emailParts[2] == null || !emailParts[2] == "" || !emailParts[2] == undefined) { 

                        yourErrorFunc(text); 

                } else {

                     //domain
                     if (/[^a-z0-9-]/i.test(emailDomainParts[0])) {

                         yourErrorFunc(text); 

                     } else {

                         //check for subdomain
                         if (emailDomainParts[2] == null || emailDomainParts[2] == "" || emailDomainParts[2] == undefined) { 

                             //TLD
                             if (/[^a-z]/i.test(emailDomainParts[1])) {

                                 yourErrorFunc(text);

                              } else {

                                 yourPassedFunc(); 

                              }

                        } else {

                             //subdomain
                             if (/[^a-z0-9-]/i.test(emailDomainParts[1])) {

                                 yourErrorFunc(text); 

                             } else {

                                  //TLD
                                  if (/[^a-z]/i.test(emailDomainParts[2])) {

                                      yourErrorFunc(text); 

                                  } else {

                                      yourPassedFunc();
}}}}}}}}}
3
SEsterbauer

utilisez ceci 

if ($this.hasClass('tb-email')) {
    var email = $this.val();
    var txt = /^([a-zA-Z0-9_\.\-\+])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
    if (!txt.test(email)) {
        e.preventDefault();
        $this.addClass('error');
    } else {
        $this.removeClass('error');
    }
}
3
Ankit Agrawal

Le bogue est dans le plug-in de validation de validation Jquery Validation uniquement avec @ pour modifier cette 

changer le code pour cela 

email: function( value, element ) {
    // From http://www.whatwg.org/specs/web-apps/current-work/multipage/states-of-the-type-attribute.html#e-mail-state-%28type=email%29
    // Retrieved 2014-01-14
    // If you have a problem with this implementation, report a bug against the above spec
    // Or use custom methods to implement your own email validation
    return this.optional( element ) || /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/.test( value );
}
2
user4974898

vous devriez voir ceci: jquery.validate.js , ajoutez-le à votre projet

en l'utilisant comme ceci:

<input id='email' name='email' class='required email'/>
2
Chuanshi Liu
checkRegexp( email, /^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\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]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([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, "eg. [email protected]" );

Référence: SITE WEB DE JQUERY UI

2
danielad

Une autre option simple et complète:

<input type="text" id="Email"/>
<div id="ClasSpan"></div>   
<input id="ValidMail" type="submit"  value="Valid"/>  


function IsEmail(email) {
    var regex = /^([a-zA-Z0-9_.+-])+\@(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,4})+$/;
    return regex.test(email);
}

$("#ValidMail").click(function () {
    $('span', '#ClasSpan').empty().remove();
    if (IsEmail($("#Email").val())) {
        //aqui mi sentencia        
    }
    else {
        $('#ClasSpan').append('<span>Please enter a valid email</span>');
        $('#Email').keypress(function () {
            $('span', '#itemspan').empty().remove();
        });
    }
});
2
jorcado

Validez le courrier électronique lors de la frappe avec la gestion de l'état des boutons 

$("#email").on("input", function(){
    var email = $("#email").val();
    var filter = /^([\w-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([\w-]+\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)$/;
    if (!filter.test(email)) {
      $(".invalid-email:empty").append("Invalid Email Address");
      $("#submit").attr("disabled", true);
    } else {
      $("#submit").attr("disabled", false);
      $(".invalid-email").empty();
    }
  });
1
Radovan Skendzic

Une version simplifiée que je viens de créer fait ce dont j’ai besoin pour .. Je l’ai limitée aux caractères alphanumériques, point, souligné et @.

<input onKeyUp="testEmailChars(this);"><span id="a"></span>
function testEmailChars(el){
    var email = $(el).val();
    if ( /^[[email protected]]+$/.test(email)==true ){
        $("#a").html("valid");
    } else {
        $("#a").html("not valid");
    }
}

Fabriqué avec l'aide des autres

1
nathan

Vous pouvez créer votre propre fonction 

function emailValidate(email){
    var check = "" + email;
    if((check.search('@')>=0)&&(check.search(/\./)>=0))
        if(check.search('@')<check.split('@')[1].search(/\./)+check.search('@')) return true;
        else return false;
    else return false;
}

alert(emailValidate('[email protected]'));
1
Wahid Masud

Cette expression rationnelle évite les doublons de noms de domaine tels que [email protected]. Elle autorise uniquement le domaine deux fois, comme [email protected]. Il ne permet pas non plus de statuer à partir d'un numéro tel que [email protected] 

 regexp: /^([a-zA-Z])+([a-zA-Z0-9_.+-])+\@(([a-zA-Z])+\.+?(com|co|in|org|net|edu|info|gov|vekomy))\.?(com|co|in|org|net|edu|info|gov)?$/, 

Bonne chance !!!!!

1
Brijeshkumar
if($("input#email-address").getVerimailStatus() < 0) { 

(incorrect code)

}

if($("input#email-address").getVerimailStatus() == 'error') { 

(right code)

}
1
Lorenzo

Vous pouvez utiliser jQuery Validation et, dans une seule ligne HTML, valider le courrier électronique et le message de validation de courrier électronique: type="email" required data-msg-email="Enter a valid email account!"

Vous pouvez utiliser le paramètre data-msg-email pour placer un message personnalisé. Sinon, ne placez pas ce paramètre et le message par défaut s'affichera: "Veuillez entrer une adresse électronique valide."

Exemple complet:

<form class="cmxform" id="commentForm" method="get" action="">
  <fieldset>
    <p>
      <label for="cemail">E-Mail (required)</label>
      <input id="cemail" type="email" name="email" required data-msg-email="Enter a valid email account!">
    </p>
    <p>
      <input class="submit" type="submit" value="Submit">
    </p>
  </fieldset>
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.validate.js"></script>
<script>
$("#commentForm").validate();
</script>
1
J.C. Gras

Cette question est plus difficile à répondre qu’il ne le semble à première vue. Si vous voulez gérer les emails correctement.

Il y avait beaucoup de gens à travers le monde à la recherche de "la regex pour les gouverner tous", mais la vérité est qu'il existe des tonalités de fournisseurs de messagerie.

Quel est le problème? Eh bien, "a_z%@gmail.com ne peut pas exister, mais il peut exister une adresse comme celle-ci via un autre fournisseur" [email protected].

Pourquoi? Selon le RFC: https://en.wikipedia.org/wiki/Email_address#RFC_specification .

Je vais prendre un extrait pour faciliter la conférence:

The local-part of the email address may use any of these ASCII characters:

- uppercase and lowercase Latin letters A to Z and a to z;
- digits 0 to 9;
- special characters !#$%&'*+-/=?^_`{|}~;
- dot ., provided that it is not the first or last character unless quoted, and provided also that it does not appear consecutively unless quoted (e.g. [email protected] is not allowed but "John..Doe"@example.com is allowed);[6]
Note that some mail servers wildcard local parts, typically the characters following a plus and less often the characters following a minus, so fred+bah@domain and fred+foo@domain might end up in the same inbox as fred+@domain or even as fred@domain. This can be useful for tagging emails for sorting, see below, and for spam control. Braces { and } are also used in that fashion, although less often.
- space and "(),:;<>@[\] characters are allowed with restrictions (they are only allowed inside a quoted string, as described in the paragraph below, and in addition, a backslash or double-quote must be preceded by a backslash);
- comments are allowed with parentheses at either end of the local-part; e.g. john.smith(comment)@example.com and (comment)[email protected] are both equivalent to [email protected].

Donc, je peux posséder une adresse email comme celle-ci:

A__z/J0hn.sm{it!}[email protected]

Si vous essayez cette adresse, je parie que cela échouera dans tout ou partie des regex postées sur le net. Mais rappelez-vous que cette adresse suit les règles RFC, elle est donc valide.

Imaginez ma frustration de ne pouvoir m'inscrire où que ce soit cochée avec ces regex !!

Le seul qui puisse réellement valider une adresse email est le fournisseur de l'adresse email.

Comment traiter, alors?

Peu importe si un utilisateur ajoute un courrier électronique non valide dans presque tous les cas. Vous pouvez compter sur HTML 5 input type = "email" qui exécute near selon RFC, il y a peu de chance que vous échouiez . HTML5 input type = "email" info: https: //www.w3. org/TR/2012/WD-html-markup-20121011/input.email.html

Par exemple, il s'agit d'un email RFC valide:

"very.(),:;<>[]\".VERY.\"very@\\ \"very\".unusual"@strange.example.com

Mais la validation html5 vous dira que le texte précédant @ ne doit pas contenir de caractères "ou () par exemple, ce qui est en fait incorrect.

Quoi qu'il en soit, vous devez le faire en acceptant l'adresse électronique et en envoyant un message électronique à cette adresse électronique, avec un code/lien que l'utilisateur doit visiter pour confirmer sa validité.

Pour ce faire, il est conseillé de "saisir à nouveau votre courrier électronique" pour éviter les erreurs de frappe de l'utilisateur. Si cela ne vous suffit pas, ajoutez une fenêtre modale de pré-soumission avec le titre "Est-ce votre courriel actuel?", Puis le courrier saisi par l'utilisateur dans une balise h2, vous savez, pour montrer clairement -mail ils sont entrés, puis un bouton "oui, soumettre".

0
JoelBonetR
$.validator.addMethod("mymail", function(value, element) {
        return this.optional( element ) || /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/.test( value );
}, "Enter valid email!");

This may help! small modification to the answer "user4974898"!
0
SagitSri

Je prends ce code de jqvalidate version 1.11.0 et implémenté dans la version 1.16.0 comme méthode supplémentaire. Ça marche

            jQuery.validator.addMethod("strictemail", function(value, element) {
                    var valid = /^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\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]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([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.test(value);
                    return valid;
                }, "Escribe un correo v\u00e1lido"
            );

Et et dans la règle de l'email

            'correo': {
                required: 'Por favor ingresa tu correo',
                email: 'Escribe un correo v\u00e1lido',
                strictemail:'Escribe un correo v\u00e1lido'
            }
0
roll

si vous utilisez jquery validation

J'ai créé une méthode emailCustomFormat qui utilisait regex pour mon format custm, vous pouvez la changer pour répondre à vos exigences 

jQuery.validator.addMethod("emailCustomFormat", function (value, element) {
        return this.optional(element) || /^([\w-\.]+@@([\w-]+\.)+[\w-]{2,4})?$/.test(value);
    }, abp.localization.localize("FormValidationMessageEmail"));// localized message based on current language

alors vous pouvez l'utiliser comme ça

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

cette regex accepte

[email protected], [email protected] mais pas cela 

abc@abc, [email protected], [email protected]

espérons que cela vous aide

0
Basheer AL-MOMANI

Comme d'autres l'ont mentionné, vous pouvez utiliser un regex pour vérifier si l'adresse e-mail correspond à un modèle. Mais vous pouvez toujours avoir des courriels qui correspondent au modèle mais mes courriels peuvent toujours être renvoyés ou être de faux spams.

vérifier avec une regex

var regex = /^([a-zA-Z0-9_.+-])+\@(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,4})+$/;
return regex.test(email);

vérifier avec une vraie API de validation de courrier électronique

Vous pouvez utiliser une API qui vérifiera si l'adresse email est réelle et actuellement active.

var emailAddress = "[email protected]"
response = $.get("https://isitarealemail.com/api/email/validate?email=" +
    emailAddress,
    function responseHandler(data) {
        if (data.status === 'valid') {
            // the email is valid and the mail box is active
        } else {
            // the email is incorrect or unable to be tested.
        }
    })

Pour plus d'informations, voir https://isitarealemail.com ou article de blog

0
Stephen

Utilisez jquery.validate.js , il contient Microsoft ajax CDN.

$('#form').validate({
    rules:{
        "name":{
            required:true,
            maxlength:40
        },

        "email":{
            required:true,
            email:true, //for validate email
            maxlength:100
        },

        "message":{
            required:true
        }
    }
});
0
NaveenDA

Comme mentionné ci-dessus, celui-ci est assez bon si vous me demandez.

var regex = /^([a-zA-Z0-9_.+-])+\@(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,4})+$/;

Mais si vous ne voulez pas que la fin du domaine (.com, .nu, .net, etc.) contienne des nombres (ce qui est mon choix préféré), la version modifiée sera: 

var regex = /^([a-zA-Z0-9_.+-])+\@(([a-zA-Z0-9-])+\.)+([a-zA-Z]{2,4})+$/;
0
anoraq