Wie validiere ich eine E-Mail-Adresse mit RegExp in JavaScript?-js-Tutorial-php.cn

Wie validiere ich eine E-Mail-Adresse mit RegExp in JavaScript?

WBOY

Freigeben： 2023-09-09 23:49:02

nach vorne

740 Leute haben es durchsucht

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

Jeder kann bei der Eingabe einer E-Mail in das Eingabefeld Fehler machen. Daher liegt es in der Verantwortung des Entwicklers, zu überprüfen, ob der Benutzer eine gültige E-Mail-Zeichenfolge eingegeben hat. Für die Validierung von E-Mail-Adressen stehen viele Bibliotheken zur Verfügung, die wir mit verschiedenen JavaScript-Frameworks verwenden können, jedoch nicht mit einfachem JavaScript. Wenn wir jedoch eine Bibliothek verwenden möchten, müssen wir deren CDN verwenden.

Hier validieren wir E-Mail-Adressen in einfachem JavaScript mithilfe regulärer Ausdrücke.

Regulärer Ausdruck, der in Beispiel 1 verwendet wird

Wir haben in Beispiel 1 das folgende Regex-Muster verwendet, um die E-Mail zu validieren.

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

Nach dem Login kopieren

Benutzer können der Erklärung des obigen regulären Ausdrucks unten folgen.

^ - Es ist der Anfang der Zeichenfolge.
[a-z0-9]+ – jedes Zeichen zwischen a bis z und 0 bis 9 am Anfang der Zeichenfolge.
@ – Die Zeichenfolge sollte nach einigen alphanumerischen Zeichen das Zeichen „@“ enthalten.
[a-z]+ – Zwischen a und z steht nach dem „@“-Zeichen in der Zeichenfolge mindestens ein Zeichen.
. – Die E-Mail sollte einen Punkt enthalten, gefolgt von einigen Zeichen, gefolgt vom „@“-Zeichen
[a-z]{2,3}$ – Es sollte zwei oder drei alphabetische Zeichen am Ende der Zeichenfolge enthalten. „$“ stellt das Ende der Zeichenfolge dar.

Beispiel 1

Wenn der Benutzer im folgenden Beispiel auf die Schaltfläche klickt, ruft er die Funktion „validateEmail()“ auf. In der Funktion „validateEmail()“ verwenden wir die Prompt()-Methode von JavaScript, um die E-Mail-Eingabe des Benutzers abzurufen.

Danach haben wir den regulären Ausdruck wie in der obigen Syntax erläutert erstellt. Wir verwenden reguläre Ausdrücke, um die E-Mail-Eingabe des Benutzers über die Methode test() zu testen, die einen booleschen Wert zurückgibt, basierend darauf, ob die E-Mail mit dem regulären Ausdruck übereinstimmt.

<html>
<body>
   <h3>Using the <i> Regular expression </i> to validate email in JavaScript </h3>
   <div id = "output"> </div>
   <button onclick = "validateEmail()"> Validate any email </button>
   <script>
      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!";
         }
      }
   </script>
</body>
</html>

Nach dem Login kopieren

Regulärer Ausdruck, der in Beispiel 2 verwendet wird

Wir haben in Beispiel 2 das folgende Regex-Muster verwendet, um die E-Mail zu validieren.

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

Nach dem Login kopieren

Benutzer können der Erklärung des obigen regulären Ausdrucks unten folgen.

S+ – Es steht für jedes alphanumerische Wort.
. – steht für das Punktzeichen.

Grundsätzlich entspricht das obige Muster E-Mail-Adressen vom Typ word@word.word.

Beispiel 2

Im folgenden Beispiel haben wir eine E-Mail-Eingabe mit HTML erstellt. Der Benutzer kann eine beliebige E-Mail-Adresse in das Eingabefeld eingeben. Nach der Eingabe der E-Mail-Adresse muss der Benutzer auf die Schaltfläche „Eingegebene E-Mail-Adresse validieren“ klicken, wodurch die Funktion „submitEmail()“ aufgerufen wird.

In der Funktion „submitEmail()“ verwenden wir den oben genannten regulären Ausdruck und die Methode „test()“, um die vom Benutzer eingegebene E-Mail-Zeichenfolge zu überprüfen.

In Ausgabe können Benutzer verschiedene E-Mails eingeben und die Ausgabe beobachten.

<html>
<head>
   <style>
      div {
         font-size: 1rem;
         color: red;
         margin: 0.1rem 1rem;
      }
   </style>
</head>
<body>
   <h2>Using the <i> Regular expression </i> to validate email in JavaScript </h2>
   <div id = "output"> </div>
   <input type = "email" id = "emailInput" placeholder = "abc@gmail.com">
   <br><br>
   <button onclick = "submitEmail()"> Validate input email </button>
   <script>
      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!";
         }
      }
   </script>
</body>
</html>

Nach dem Login kopieren

Wir haben gelernt, reguläre Ausdrücke zur Validierung von E-Mail-Strings zu verwenden. Wir haben zwei reguläre Ausdrücke gesehen und erklärt, damit Anfänger verstehen, wie man reguläre Ausdrücke für E-Mails erstellt.

Darüber hinaus können Entwickler benutzerdefinierte reguläre Ausdrücke erstellen, um E-Mail-Adressen entsprechend ihren Anforderungen zu validieren.

Das obige ist der detaillierte Inhalt vonWie validiere ich eine E-Mail-Adresse mit RegExp in JavaScript?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!