Validation des e-mails à l'aide de jQuery


Réponses:


703

Vous pouvez utiliser l'ancien javascript standard 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);
}

66
Oui, jQuery est toujours javascript :)
Fabian

36
Même si cette expression rationnelle considère que la plupart des adresses du monde réel sont valides, elle contient encore beaucoup de faux positifs et de faux négatifs. Par exemple, consultez des exemples d'adresses e-mail valides et invalides sur Wikipédia.
Arseny

1
@Umingo email@127.0.0.1 est toujours un e-mail valide, cependant, il pourrait toujours être écrit de meilleure façon. Aucune partie du domaine ne peut commencer par un autre caractère que [a-z0-9] (insensible à la casse). De plus, les e-mails (et domaines) valides ont une limite de len, qui n'est pas non plus testée.
Tomis

10
Avec de nouveaux domaines de premier niveau de devenir cette regex plus commune peut avoir besoin de modifier .systems et .poker etc sont tous valides TLDs maintenant , mais échoueraient le contrôle regex
Liath

3
Selon le commentaire de Theo sur une autre réponse, vous devriez changer var regex = /^([a-zA-Z0-9_.+-])+\@(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,4})+$/;pour var regex = /^([a-zA-Z0-9_.+-])+\@(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,6})+$/;prendre en charge les nouveaux TLD comme .museum, etc.
Ira Herman

165

Fonction jQuery pour valider l'e-mail

Je n'aime vraiment pas utiliser de plugins, surtout lorsque mon formulaire n'a qu'un seul champ à valider. J'utilise cette fonction et l'appelle chaque fois que j'ai besoin de 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 cela

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

À votre santé!


16
Vous devriez juste reveniremailReg.test($email);
nffdiogosilva

7
Juste pour info, cela renvoie vrai pour une adresse e-mail vide. par exemple emailReg.text("") true. Je ferais simplement la fonction jusqu'à la déclaration de la variable emailReg puis ceci:return ( $email.length > 0 && emailReg.test($email))
Diziet

14
Le regex pour vérifier la validité de l'adresse e-mail est obsolète car nous avons maintenant des extensions de nom de domaine avec 6 caractères comme .museum, vous devriez donc passer var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;àvar emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,6})?$/;
Theo

3
vous avez raison @ h.coates! Je suis venu sur ce sujet en espérant trouver que jQuery avait en fait une validation de messagerie intégrée. Avancez, ce ne sont pas les droïdes que vous recherchez ...
iGanja

3
@ Le point de Theo est vital, mais la longueur réelle du TLD devrait être supérieure à 6, la limite supérieure théorique pour l'extension est de 63 caractères. actuellement le plus long est supérieur à 20 voir data.iana.org/TLD/tlds-alpha-by-domain.txt
Jeroenv3

41

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

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

En outre, un autre avantage énorme est qu'il est hébergé sur un CDN, la version actuelle au moment de cette réponse peut être trouvée ici: http://www.asp.net/ajaxLibrary/CDNjQueryValidate16.ashx Cela signifie des temps de chargement plus rapides pour le client.


6
Ok ... pas besoin de réinventer la roue. Mais pourquoi dois-je installer des dizaines de Koctets de Javascript pour valider un champ. C'est comme construire une usine automobile si tout ce dont vous avez besoin est une nouvelle roue :)
kraftb

3
@kraftb Comme indiqué dans ma réponse, c'est la gestion et l'affichage autour de la validation, pas seulement la validation du texte lui-même.
Nick Craver

5
Merci pour ce @NickCraver: Cela semble vraiment être une approche de «meilleure pratique» pour le problème de la gestion de la validation d'un e-mail. Ce n'est certainement pas comme construire une usine (écrire les bibliothèques pour faire tout le travail) pour obtenir une roue. C'est comme suivre les instructions de l'usine pour installer la roue sur un véhicule moderne (soulever la voiture, placer la roue - mettre les écrous de roue) au lieu d'essayer de comprendre comment obtenir une roue de wagon sur votre voiture. Ce plugin est super simple à utiliser. Pour effectuer la validation du formulaire, il s'agit littéralement d'une inclusion, de quelques annotations et d'un seul appel de méthode.
jfgrissom

3
Vous réinventez maintenant la métaphore «réinventer la roue»!
Dom Vinyard

Pour les personnes bloquées travaillant sur des applications de formulaires
Web

38

Regardez http: //bassistance.de/jquery-plugins/jquery-plugin-validation/ . C'est un joli plugin jQuery, qui permet de construire un système de validation puissant pour les formulaires. Il y a quelques exemples utiles ici . Ainsi, la validation du champ e-mail dans le formulaire ressemblera à ceci:

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

Voir la documentation de la méthode de messagerie pour plus de détails et des exemples.


1
Le dernier est toujours vivant)
Andrew Bashtannik

6
mais le format accepté est x@x(c'est bizarre) il doit x@x.xComment puis-je résoudre ce problème?
Basheer AL-MOMANI

2
@ BasheerAL-MOMANI [ jqueryvalidation.org/jQuery.validator.methods/] $.validator.methods.email = function( value, element ) { return this.optional( element ) || //^.+@.+\..+$/.test( value ); }
Bill Gillingham

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

15

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

Je recommanderais Verimail.js , il a également un plugin JQuery .

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

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

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

Exemples:

  • test@gnail.con -> Voulez-vous dire test @ gmail.com ?
  • test@hey.nwt -> Voulez-vous dire test @ hey. net ?
  • test@hottmail.com -> Voulez-vous dire test @ hotmail.com ?

Etc..

Pour l'utiliser avec jQuery, incluez 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é. Il peut s'agir de "Votre e-mail n'est pas valide" à "Vouliez-vous dire ...?".

Si vous avez un formulaire et que vous souhaitez le restreindre afin qu'il ne puisse être soumis que si l'e-mail est valide, vous pouvez vérifier l'état à l'aide de la fonction getVerimailStatus comme indiqué ci-dessous:

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

Cette fonction retourne un code d'état entier selon l'objet Comfirm.AlphaMail.Verimail.Status. Mais la règle générale est que tous les codes inférieurs à 0 sont des codes indiquant des erreurs.


.getVerimailStatus()ne renvoie pas de codes d'état numériques, juste une valeur de chaîne de success, errorou éventuellement pending(n'a pas vérifié le dernier).
Niko Nyman

14

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

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


Si vous l'utilisez dans la page ASP.NET MVC Razor, n'oubliez pas d'échapper le @personnage avec un autre @personnage. Comme ça @@, sinon vous obtiendrez une erreur de construction.
Rosdi Kasim

11

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/


10

Cela effectue une validation plus approfondie, par exemple, il vérifie les points successifs dans le nom d'utilisateur tels que 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);
}

Voir valider l'adresse e-mail à l'aide d'une expression régulière en JavaScript .


1
Mais les points successifs sont-ils réellement invalides? Au contraire, je pense que vous excluriez les adresses e-mail valides en faisant cela.
icktoofay

9

Comme d'autres l'ont mentionné, vous pouvez utiliser une expression régulière pour vérifier si l'adresse e-mail correspond à un modèle. Mais vous pouvez toujours avoir des e-mails qui correspondent au modèle, mais je peux toujours rebondir ou être de faux e-mails de spam.

vérification avec une expression régulière

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

vérification avec une véritable API de validation d'email

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

var emailAddress = "foo@bar.com"
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, consultez https://isitarealemail.com ou un article de blog


8

Si vous avez un formulaire de base, indiquez simplement le type d'entrée de l'e-mail: <input type="email" required>

Cela fonctionnera pour les navigateurs qui utilisent des attributs HTML5 et vous n'avez même pas besoin de JS. L'utilisation de la validation par e-mail même avec certains des scripts ci-dessus ne fera pas grand-chose car:

some@email.com so@em.co my@fakemail.net

etc ... Valideront tous comme de "vrais" emails. Il vaudrait donc mieux s’assurer que l’utilisateur doit entrer son adresse e-mail deux fois pour s’assurer qu’il en a bien la même. Mais garantir que l’adresse e-mail est réelle serait très difficile mais très intéressant de voir s’il y avait un façon. Mais si vous vous assurez qu'il s'agit bien d'un e-mail, respectez l'entrée HTML5.

EXEMPLE DE FIDDLE

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


La méthode regexp empêche généralement les e-mails clairement stupides comme un @ bc (que votre exemple JSFiddle lié permet d'utiliser le dernier Chrome), donc la solution HTML5 est clairement une solution inadéquate.
SnowInferno

cool. Alors, que diriez-vous d'utiliser la correspondance de modèle comme HTML5 est "censée" le faire? Pourquoi n'essayez-vous pas cela dans votre Chromebook: jsfiddle.net/du676/8
isaac weathers

8

Validation des e-mails Javascript dans MVC / ASP.NET

Le problème que j'ai rencontré lors de l'utilisation de la réponse de Fabian, est de l'implémenter dans une vue MVC en raison du @symbole Razor . Vous devez inclure un @symbole supplémentaire pour y échapper, comme ceci:@@

Pour éviter le rasoir dans 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, j'ai donc pensé que cela pourrait être utile.

ÉDITER

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

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

Qui fait exactement ce qu'il est censé faire.


@nbrogi Que voulez-vous dire que cela ne fonctionne pas? Je viens de vérifier cela à nouveau et cela produit le js suivant var regex = /^([a-zA-Z0-9_.+-])+\@(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,4})+$/; Qu'arrive-t-il à votre code?
Trevor Nestman

Désolé, je ne suis pas sûr pour le moment, je l'ai complètement changé.
nkkollaw

Faites-le moi savoir quand vous le pourrez. S'il s'agit de mauvaises informations, je les retire. J'essaie de fournir des informations utiles lorsque cela est possible et cela m'a aidé lors de l'écriture d'une expression régulière dans une vue MVC.
Trevor Nestman

Encore une fois, j'aimerais savoir pourquoi cela a été rejeté. Il fait exactement ce que je veux, c'est-à-dire produire le @symbole dans une expression régulière .cshtml. Normalement, il essaierait de tout traiter après le @symbole comme un code de rasoir, mais le double l' @@empêche.
Trevor Nestman

le problème principal que je vois est dans le deuxième bloc de code, votre expression régulière est définie sur une variable nommée regex, mais la deuxième ligne utilise une variable nommée re
phlare

7
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
function validateEmail(emailaddress){  
   var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;  
   if(!emailReg.test(emailaddress)) {  
        alert("Please enter valid email id");
   }       
}

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

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

... qui a fourni l'expression régulière 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 readme du plugin jQuery Validation: https://github.com/jzaefferer/jquery-validation/blob/master/README.md#reporting-an-issue

Ainsi, la version mise à jour de @Fabian de réponse serait la suivante:

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


Celui-ci était la meilleure réponse pour moi - il est retourné vrai john..doe@example.commais aurait aimé que ce soit faux
Adam Knights

3

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

Le bug est dans Jquery Validation Validation Plugin Valide uniquement avec @ pour changer cela

changer le code en ceci

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 );
}

3

Pour ceux qui veulent utiliser un meilleur maintenable solution que les correspondances RegEx perturbatrices de longue durée, j'ai écrit quelques lignes de code. Ceux qui veulent économiser des octets, respectez la variante RegEx :)

Cela restreint:

  • Pas de @ dans la chaîne
  • Aucun 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 passer à travers, alors assurez-vous de combiner cela avec une validation côté serveur + une vérification du lien e-mail.

Voici le JSFiddle

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

Vous pouvez utiliser jQuery Validation et, sur une seule ligne HTML, vous pouvez valider l'e-mail et le message de validation de l'e-mail: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é ou sinon ne pas placer ce paramètre et le message par défaut s'affichera: "Veuillez entrer une adresse e-mail 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/jquery-validation@1.17.0/dist/jquery.validate.js"></script>
<script>
$("#commentForm").validate();
</script>

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

(incorrect code)

}

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

(right code)

}

9
Pouvez-vous élaborer votre réponse ... par exemple, vous devez mentionner que getVerimailStatus est un plugin supplémentaire.
Dave Hogan

2
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. ui@jquery.com" );

Référence: JQUERY UI WEBSITE



2

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();
        });
    }
});

3
Stack Overflow est un site en anglais. Veuillez ne pas publier de contenu dans d'autres langues.
Anders

2

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('your.email@yahoo.com'));

1

Une version simplifiée que je viens de faire fait ce dont j'ai besoin. Je l'ai limité à seulement alphanumérique, point, trait de soulignement et @.

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

Fabriqué avec l'aide des autres


1

Cette expression régulière empêche les noms de domaine en double comme abc@abc.com.com.com.com, elle n'autorisera que deux fois le domaine comme abc@abc.co.in. Il ne permet pas non plus de statring à partir d'un numéro comme 123abc@abc.com

 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

Validez les e-mails 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

si vous utilisez la validation jquery

J'ai créé une méthode emailCustomFormatqui utilisée regexpour 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
    }
  }
});

ce regex accepte

abc@abc.abc, abc@abc.abcd Mais pas

abc@abc, abc@abc.a,abc@abc.abcde

j'espère que cela vous aide

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.