Validation des e-mails à l'aide de jQuery

356

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

DuH
la source
Avant d'essayer de "valider" une adresse e-mail, vous devez lire ceci: hackernoon.com/…
Mikko Rantalainen

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);
}
Fabien
la source
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 protected] 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é!

Manish Shrivastava
la source
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.

Nick Craver
la source
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.

Andrew Bashtannik
la source
1
Le dernier est toujours vivant)
Andrew Bashtannik
6
mais le format accepté est x@x(c'est bizarre) il doit [email protected]Comment 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>
user1993920
la source
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

SwatiKothari
la source
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:

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.

Robin Orheden
la source
.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

Amila kumara
la source
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/

iamse7en
la source
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 .

Geek
la source
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 = "[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, consultez https://isitarealemail.com ou un article de blog

Stephen
la source
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:

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

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

Isaac Weathers
la source
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.

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

timborden
la source
Celui-ci était la meilleure réponse pour moi - il est retourné vrai [email protected]mais 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');
    }
}
Ankit Agrawal
la source
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 );
}
user4974898
la source
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();
}}}}}}}}}
SEsterbauer
la source
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/[email protected]/dist/jquery.validate.js"></script>
<script>
$("#commentForm").validate();
</script>
JC Gras
la source
2
if($("input#email-address").getVerimailStatus() < 0) { 

(incorrect code)

}

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

(right code)

}
Lorenzo
la source
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. [email protected]" );

Référence: JQUERY UI WEBSITE

Daniel Adenew
la source
2

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

l'utiliser comme ceci:

<input id='email' name='email' class='required email'/>
Chuanshi Liu
la source
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();
        });
    }
});
jorcado
la source
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('[email protected]'));
Wahid Masud
la source
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 ( /^[[email protected]]+$/.test(email)==true ){
        $("#a").html("valid");
    } else {
        $("#a").html("not valid");
    }
}

Fabriqué avec l'aide des autres

nathan
la source
1

Cette expression régulière empêche les noms de domaine en double comme [email protected], elle n'autorisera que deux fois le domaine comme [email protected]. Il ne permet pas non plus de statring à partir d'un numéro comme [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 !!!!!

Brijeshkumar
la source
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();
    }
  });
Radovan Skendzic
la source
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

[email protected], [email protected] Mais pas

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

j'espère que cela vous aide

Basheer AL-MOMANI
la source