Comment valider une adresse e-mail à l'aide de RegExp en JavaScript ?-js tutoriel-php.cn

Table des matières

Expression régulière utilisée dans l'exemple 2

Exemple 2

Maison

interface Web

js tutoriel

Comment valider une adresse e-mail à l'aide de RegExp en JavaScript ?

Sep 09, 2023 pm 11:49 PM

如何在 JavaScript 中使用 RegExp 验证电子邮件地址？

Tout le monde peut faire des erreurs en saisissant un email dans le champ de saisie. Il est donc de la responsabilité du développeur de vérifier si l'utilisateur a saisi une chaîne d'e-mail valide. Il existe de nombreuses bibliothèques disponibles pour valider les adresses e-mail, que nous pouvons utiliser avec divers frameworks JavaScript, mais pas avec du JavaScript simple. Cependant, si nous voulons utiliser une bibliothèque, nous devons utiliser son CDN.

Ici, nous validerons les adresses e-mail en JavaScript simple à l'aide d'expressions régulières.

Expression régulière utilisée dans l'exemple 1

Nous avons utilisé le modèle regex suivant dans l'exemple 1 pour valider l'e-mail.

let regex = /^[a-z0-9]+@[a-z]+\.[a-z]{2,3}$/;

Copier après la connexion

Les utilisateurs peuvent suivre l'explication de l'expression régulière ci-dessus ci-dessous.

^ - C'est le début de la chaîne.
[a-z0-9]+ - Tout caractère entre a à z et 0 à 9 au début de la chaîne.
@ - La chaîne doit contenir le caractère "@" après quelques caractères alphanumériques.
[a-z]+ - Il y a au moins un caractère entre a et z après le caractère "@" dans la chaîne.
. – L'e-mail doit contenir un point, suivi de quelques caractères, suivi du caractère « @ »
[a-z]{2,3}$ - Il doit contenir deux ou trois caractères alphabétiques à la fin de la chaîne. '$' représente la fin de la chaîne.

Exemple 1

Dans l'exemple ci-dessous, lorsque l'utilisateur clique sur le bouton, il appelle la fonction validateEmail(). Dans la fonction validateEmail(), nous utilisons la méthode Prompt() de JavaScript pour obtenir l'adresse e-mail de l'utilisateur.

Après cela, nous avons créé l'expression régulière comme expliqué dans la syntaxe ci-dessus. Nous utilisons des expressions régulières pour tester la saisie de l'e-mail de l'utilisateur via la méthode test(), qui renvoie une valeur booléenne selon que l'e-mail correspond ou non à l'expression régulière.

&lt;html&gt;
&lt;body&gt;
   &lt;h3&gt;Using the &lt;i&gt; Regular expression &lt;/i&gt; to validate email in JavaScript &lt;/h3&gt;
   &lt;div id = "output"&gt; &lt;/div&gt;
   &lt;button onclick = "validateEmail()"&gt; Validate any email &lt;/button&gt;
   &lt;script&gt;
      var output = document.getElementById('output');
      function validateEmail() {
         let userEmail = prompt("Enter your email.", "you@gmail.com");
         let regex = /^[a-z0-9]+@[a-z]+\.[a-z]{2,3}$/;
         let result = regex.test(userEmail);
         if (result) {
            output.innerHTML = "The " + userEmail + " is a valid email address!";
         } else {
            output.innerHTML = "The " + userEmail + " is not a valid email address!";
         }
      }
   &lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;

Copier après la connexion

Expression régulière utilisée dans l'exemple 2

Nous avons utilisé le modèle regex suivant dans l'exemple 2 pour valider l'e-mail.

let regex = new RegExp(/\S+@\S+\.\S+/);

Copier après la connexion

Les utilisateurs peuvent suivre l'explication de l'expression régulière ci-dessus ci-dessous.

S+ - Il représente n'importe quel mot alphanumérique.
. – représente le caractère point.

Fondamentalement, le modèle ci-dessus correspond aux adresses e-mail de type word@word.word.

Exemple 2

Dans l'exemple ci-dessous, nous avons créé une entrée d'e-mail en utilisant HTML. L'utilisateur peut saisir n'importe quel e-mail dans le champ de saisie. Après avoir saisi l'email dans la saisie, l'utilisateur doit cliquer sur le bouton "Valider l'email saisi", qui appellera la fonction submitEmail().

Dans la fonction submitEmail(), nous utilisons l'expression régulière ci-dessus et la méthode test() pour vérifier la chaîne de courrier électronique saisie par l'utilisateur.

Dans Output, les utilisateurs peuvent saisir divers e-mails et observer le résultat.

&lt;html&gt;
&lt;head&gt;
   &lt;style&gt;
      div {
         font-size: 1rem;
         color: red;
         margin: 0.1rem 1rem;
      }
   &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
   &lt;h2&gt;Using the &lt;i&gt; Regular expression &lt;/i&gt; to validate email in JavaScript &lt;/h2&gt;
   &lt;div id = "output"&gt; &lt;/div&gt;
   &lt;input type = "email" id = "emailInput" placeholder = "abc@gmail.com"&gt;
   &lt;br&gt;&lt;br&gt;
   &lt;button onclick = "submitEmail()"&gt; Validate input email &lt;/button&gt;
   &lt;script&gt;
      var output = document.getElementById('output');
      function submitEmail() {
         let userEmail = document.getElementById('emailInput').value;
         let regex = new RegExp(/\S+@\S+\.\S+/);
         let isValid = regex.test(userEmail);
         if (isValid) {
            output.innerHTML = "The " + userEmail + " is a valid email address!";
         } else {
            output.innerHTML = "The " + userEmail + " is not a valid email address!";
         }
      }
   &lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;

Copier après la connexion

Nous avons appris à utiliser des expressions régulières pour valider les chaînes de courrier électronique. Nous avons vu deux expressions régulières et les avons expliquées afin que les débutants puissent comprendre comment créer des expressions régulières pour les e-mails.

De plus, les développeurs peuvent créer des expressions régulières personnalisées pour valider les adresses e-mail en fonction de leurs besoins.

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!

Déclaration de ce site Web

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn