Validation des adresses e-mail à l'aide de jQuery et regex

174

Je ne sais pas trop comment procéder. J'ai besoin de valider les adresses e-mail à l'aide de regex avec quelque chose comme ceci:

[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+(?:[A-Z]{2}|com|org|net|edu|gov|mil|biz|info|mobi|name|aero|asia|jobs|museum)

Ensuite, je dois l'exécuter dans une fonction jQuery comme celle-ci:

$j("#fld_emailaddress").live('change',function() { 
var emailaddress = $j("#fld_emailaddress").val();

// validation here? 

if(emailaddress){}

// end validation

$j.ajax({  
        type: "POST",  
         url: "../ff-admin/ff-register/ff-user-check.php",  
        data: "fld_emailaddress="+ emailaddress,  
        success: function(msg)
        { 
            if(msg == 'OK') { 
            $j("#fld_username").attr('disabled',false); 
            $j("#fld_password").attr('disabled',false); 
            $j("#cmd_register_submit").attr('disabled',false); 
            $j("#fld_emailaddress").removeClass('object_error'); // if necessary
            $j("#fld_emailaddress").addClass("object_ok");
            $j('#email_ac').html('&nbsp;<img src="img/cool.png" align="absmiddle"> <font color="Green"> Your email <strong>'+ emailaddress+'</strong> is OK.</font>  ');
            } else {  
            $j("#fld_username").attr('disabled',true); 
            $j("#fld_password").attr('disabled',true); 
            $j("#cmd_register_submit").attr('disabled',true);  
            $j("#fld_emailaddress").removeClass('object_ok'); // if necessary
            $j("#fld_emailaddress").addClass("object_error");
            $j('#email_ac').html(msg);
            }
        }
     });
});

Où va la validation et quelle est l'expression?

RussP
la source

Réponses:

491

MISES À JOUR


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 */ }
Luca Filosofi
la source
2
merci aSeptik à part "manquant" l'e-mail de l'adresse mail fonctionne bien oui sachez qu'aucune regex n'existe à 100%, mais peut devenir "assez" proche
RussP
1
n'a pas validé cela trop profondément, mais cela m'a déjà donné un faux positif pour [email protected]
gcb
@gcb: salut, si le regex ne répond pas à vos besoins, vous pouvez le changer, de toute façon je l'ai testé et cela fonctionne bien. jsfiddle.net/ADPaM
Luca Filosofi
14
une regex seule côté client, ne sait pas s'il existe un serveur de messagerie ni si le domaine lui-même existe. il vérifie simplement si la syntaxe d'un e-mail est valide ou non. Ce n'est que pour aider l'utilisateur à écrire la bonne adresse. ce n'est pas une validation.
BerggreenDK
Fonctionne parfaitement! Merci mate
28

Voici ma solution:

function isValidEmailAddress(emailAddress) {
    var pattern = new RegExp(/^[+a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/i);
    // alert( pattern.test(emailAddress) );
    return pattern.test(emailAddress);
};

J'ai trouvé que RegExp ici: http://mdskinner.com/code/email-regex-and-validation-jquery

Bjørn Børresen
la source
3
votre point sur le signe plus est valide, mais votre expression régulière est moins meilleure que celle que j'utilise dans mon exemple. ps: j'ai mis à jour mon regex pour prendre en charge le signe plus.
Luca Filosofi
La plupart du temps, vous souhaitez simplement valider que l'utilisateur a saisi l'e-mail dans le bon format. Pour identifier les fautes de frappe comme "2" au lieu de "@". Donc, j'aime mieux cela que la réponse originale, mais la réponse d'aSeptik est complète et j'ai également voté à la hausse.
darwindeeds
test @ gmail..com it say's vaild - WRONG, change regular expression
htngapi
14
$(document).ready(function() {

$('#emailid').focusout(function(){

                $('#emailid').filter(function(){
                   var emil=$('#emailid').val();
              var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
            if( !emailReg.test( emil ) ) {
                alert('Please enter valid email');
                } else {
                alert('Thank you for your valid email');
                }
                })
            });
});
webizon
la source
8
en fait, cela a été utile. Le titre dit JQuery et c'est la seule réponse à ce jour qui a un exemple jquery décent.
Taylor Mitchell
cela valide abc.b. @ yahoo.com
NoBullMan
7

Lolz c'est bien mieux

    function isValidEmailAddress(emailAddress) {
        var pattern = new RegExp(/^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/);
        return pattern.test(emailAddress);
    };
Espion de code
la source
Je préfère votre solution pour les sites Web mobiles. L'autre ferait fondre mon smartphone;) +1
Hexodus
problème de syntaxe oin javascript
Sajith
Il ne validera pas les lettres äüõ etc !!
DAH
5

Je vous recommande d'utiliser le plugin jQuery pour Verimail.js .

Pourquoi?

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

Comment?

Incluez verimail.jquery.js sur votre site et utilisez la fonction:

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

Si vous avez un formulaire et que vous souhaitez valider l'e-mail lors de la soumission, vous pouvez utiliser la fonction getVerimailStatus:

if($("input#email-address").getVerimailStatus() < 0){
    // Invalid email
}else{
    // Valid email
}
Robin Orheden
la source
1
Verimail continue de valider lors de la saisie, ce qui signifie que dès que vous commencez à taper, vous obtenez un message d'erreur. Généralement excellent plugin, mais celui-ci est un facteur décisif - je préférerais ne valider que lorsqu'il est déclenché manuellement, c'est-à-dire avant de cliquer sur le bouton Soumettre ou de quitter le champ.
Sebastian Schmid
0

Nous pouvons également utiliser une expression régulière (/^([\w.-. le format est correct ou non.

var emailRegex = new RegExp(/^([\w\.\-]+)@([\w\-]+)((\.(\w){2,3})+)$/i);
 var valid = emailRegex.test(emailAddress);
  if (!valid) {
    alert("Invalid e-mail address");
    return false;
  } else
    return true;
Avinash
la source
0

Essaye ça

function isValidEmailAddress(emailAddress) {
    var pattern = new RegExp(/^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/);
    return pattern.test(emailAddress);
};
Purvik Dhorajiya
la source
0

vous pouvez utiliser cette fonction

 var validateEmail = function (email) {

        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;


        if (pattern.test(email)) {
            return true;
        }
        else {
            return false;
        }
    };
Nikki
la source
0

Méthode native:

$("#myform").validate({
 // options...
});

$.validator.methods.email = function( value, element ) {
  return this.optional( element ) || /[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}/.test( value );
}

Source: https://jqueryvalidation.org/jQuery.validator.methods/

BroFox
la source