Utilisez jquery pour implémenter la vérification des e-mails

À l’ère du numérique et des réseaux d’aujourd’hui, le courrier électronique est devenu un élément indispensable de notre vie quotidienne. Par conséquent, la mise en œuvre de la validation des e-mails (Email Validation) est devenue une compétence nécessaire pour les développeurs écrivant des applications Web. Dans cet article, nous présenterons comment implémenter la vérification des e-mails à l'aide de jQuery.

1. Connaissances préalables

Avant de commencer à discuter de la façon d'utiliser jQuery pour mettre en œuvre la vérification des e-mails, nous devons connaître quelques règles courantes pour les adresses e-mail. Une adresse e-mail comporte deux parties principales : le nom d'utilisateur et le nom de domaine, séparés par le symbole « @ ». Le nom d'utilisateur peut contenir des lettres, des chiffres, des points (.) et des traits de soulignement (_), et peut commencer par des lettres ou des chiffres, mais pas par des points ou des traits de soulignement. Le nom de domaine doit contenir un point et la dernière partie doit être un code alphanumérique de deux à six lettres (comme .com ou .cn).

2. Analyse des exigences

Avant de commencer à écrire du code, nous devons clarifier nos besoins et nos objectifs. Dans ce cas, nous devons mettre en œuvre les aspects suivants :

(1) Lorsque l'utilisateur remplit l'adresse e-mail, celle-ci doit être vérifiée selon les règles ci-dessus.

(2) Avant que l'utilisateur ne tente de soumettre le formulaire, l'adresse e-mail doit être vérifiée pour être valide.

(3) Si l'adresse email n'est pas valide, un message d'erreur doit s'afficher.

3. Écrire du code

Maintenant, nous pouvons commencer à écrire du code. Tout d'abord, nous devons créer une zone de saisie dans le code HTML et y ajouter une classe pour l'identifier comme la zone de saisie de l'adresse e-mail que nous voulons vérifier :

<label for="email">电子邮件地址：</label>
<input type="text" name="email" id="email" class="email-input">
<span class="email-error">请输入一个有效的电子邮件地址。</span>

Dans le code ci-dessus, nous utilisons l'élément "label" pour fournir l'entrée Ajoutez une étiquette à la boîte et associez-la à l'élément "input". Nous avons également ajouté un nom de classe « email-input » à la zone de saisie afin de pouvoir le référencer ultérieurement dans le code jQuery. Le code HTML de la boîte de message d'erreur ressemble à ceci :

<span class="email-error">请输入一个有效的电子邮件地址。</span>

Dans le code ci-dessus, nous utilisons l'élément "span" pour définir la boîte de message d'erreur puis l'associons à un nom de classe "email-error". Par défaut, les boîtes de message d'erreur doivent être masquées (affichage : aucun).

Maintenant, nous pouvons commencer à écrire du code jQuery. Nous divisons le code en deux parties : la fonction de vérification et la fonction de déclenchement de la vérification.

3.1 Fonction de validation

Nous devons écrire une fonction appelée "validateEmail" pour vérifier l'adresse e-mail. Dans cette fonction, nous utilisons une expression régulière pour vérifier si l'adresse email correspond aux règles ci-dessus :

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

Dans le code ci-dessus, nous utilisons l'expression régulière « /^[w-.]+@([w-]+ . )+[w-]{2,6}$/" pour vérifier l'adresse e-mail. L'expression régulière contient les parties suivantes :

(1)^ : Indique que la chaîne doit commencer par la partie de début de son expression régulière.

(2)[w-.]+ : représente la partie nom d'utilisateur de l'adresse e-mail. Contient des lettres, des chiffres, des points et des traits de soulignement. Étant donné que le point a une signification particulière dans les expressions régulières, il doit être échappé en le faisant précéder d'une barre oblique inverse.

(3)@ : Représente le séparateur entre le nom d'utilisateur et le nom de domaine de l'adresse e-mail.

(4)([w-]+.)+ : Représente la partie nom de domaine de l'adresse e-mail. Contient une ou plusieurs combinaisons consécutives de lettres, de chiffres, de traits d’union et de points. Étant donné que le symbole « + » se trouve en dehors des parenthèses, au moins une combinaison doit correspondre.

(5)[w-]{2,6} : représente la dernière partie de l'adresse e-mail (également connue sous le nom de nom de domaine de premier niveau ou TLD). Il doit s'agir d'une combinaison de deux à six lettres ou chiffres. Étant donné que différents pays utilisent différents TLD, la plage {2,6} est utilisée ici.

(6)$ : Indique que la chaîne doit se terminer par la partie de fin de son expression régulière.

Après avoir transmis l'adresse e-mail à la fonction validateEmail, la fonction exécutera l'expression régulière et renverra vrai ou faux pour indiquer si l'adresse est valide.

3.2 Valider la fonction de déclenchement

Maintenant, nous devons écrire une fonction appelée "validateEmailField" pour valider l'adresse e-mail et afficher ou masquer la boîte de message d'erreur si nécessaire :

function validateEmailField() {
    var emailInput = $('#email');
    var emailError = $('.email-error');
    if (validateEmail(emailInput.val())) {
        emailError.hide();
    } else {
        emailError.show();
    }
}

Dans le code ci-dessus, nous utilisons d'abord les sélecteurs jQuery pour obtenir des zones de saisie et des zones de message d'erreur. On appelle ensuite la fonction "validateEmail" pour vérifier si l'adresse email est valide. Si l'adresse e-mail est valide, la boîte de message d'erreur est masquée. Sinon, affichez cette boîte de message.

Maintenant, nous devons également ajouter un écouteur sur la zone de saisie pour déclencher automatiquement la validation lorsque l'utilisateur remplit l'adresse email :

$('.email-input').on('keyup', function() {
    validateEmailField();
});

Dans le code ci-dessus, nous utilisons l'écouteur jQuery pour surveiller l'utilisateur qui tape dans la zone de saisie n'importe quelle touche puis appelez la fonction "validateEmailField" pour valider l'adresse email saisie.

Enfin, si nous voulons valider tous les champs de saisie avant la soumission du formulaire, nous pouvons ajouter le code suivant :

$('form').submit(function() {
    var emailInput = $('#email');
    var emailError = $('.email-error');
    if (!validateEmail(emailInput.val())) {
        emailError.show();
        return false;
    }
    return true;
});

Dans le code ci-dessus, nous avons ajouté un écouteur pour surveiller l'événement de soumission du formulaire puis vérifier si l'e-mail adresse efficace. Si l'adresse e-mail n'est pas valide, affichez une boîte de message d'erreur et renvoyez false pour empêcher l'envoi du formulaire. Sinon, le formulaire sera soumis.

4. Conclusion

Dans cet article, nous avons montré comment implémenter la vérification d'adresse e-mail à l'aide de jQuery. Nous avons utilisé des expressions régulières pour vérifier le format de l'adresse e-mail et écrit deux fonctions JavaScript pour terminer le processus de vérification. Enfin, nous avons également démontré comment intégrer la validation des adresses e-mail dans un formulaire Web pour garantir la validité des saisies des utilisateurs. Ces techniques sont très utiles dans de nombreuses applications web, nous vous recommandons donc de les maîtriser pour améliorer vos compétences en développement web.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!