Je suis nouveau sur jQuery et je me demandais comment l'utiliser pour valider les adresses e-mail.
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);
}
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é!
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.
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.
<!-- 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
Source: htmldrive.com
Je recommanderais Verimail.js , il a aussi un plugin JQuery .
Pourquoi? Verimail prend en charge les éléments suivants:
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.
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
<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>
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>
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 .
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.
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 ...
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. */ }
function validateEmail(emailaddress){
var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
if(!emailReg.test(emailaddress)) {
alert("Please enter valid email id");
}
}
<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" />
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: @@
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.
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.
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
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:
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();
}}}}}}}}}
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');
}
}
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 );
}
vous devriez voir ceci: jquery.validate.js , ajoutez-le à votre projet
en l'utilisant comme ceci:
<input id='email' name='email' class='required email'/>
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
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();
});
}
});
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();
}
});
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
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]'));
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 !!!!!
if($("input#email-address").getVerimailStatus() < 0) {
(incorrect code)
}
if($("input#email-address").getVerimailStatus() == 'error') {
(right code)
}
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>
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".
$.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"!
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'
}
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
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.
var regex = /^([a-zA-Z0-9_.+-])+\@(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,4})+$/;
return regex.test(email);
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
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
}
}
});
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})+$/;