Bagaimana untuk mengesahkan alamat e-mel menggunakan RegExp dalam JavaScript?-tutorial js-php.cn

Bagaimana untuk mengesahkan alamat e-mel menggunakan RegExp dalam JavaScript?

WBOY

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

ke hadapan

902 orang telah melayarinya

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

Sesiapa sahaja boleh membuat kesilapan apabila memasukkan e-mel dalam medan input. Oleh itu, adalah menjadi tanggungjawab pembangun untuk menyemak sama ada pengguna memasukkan rentetan e-mel yang sah. Terdapat banyak perpustakaan yang tersedia untuk mengesahkan alamat e-mel, yang boleh kami gunakan dengan pelbagai rangka kerja JavaScript, tetapi tidak dengan JavaScript biasa. Walau bagaimanapun, jika kita ingin menggunakan mana-mana perpustakaan, kita perlu menggunakan CDNnya.

Di sini kami akan mengesahkan alamat e-mel dalam JavaScript biasa menggunakan ungkapan biasa.

Ungkapan biasa yang digunakan dalam contoh 1

Kami menggunakan corak regex berikut dalam contoh 1 untuk mengesahkan e-mel.

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

Salin selepas log masuk

Pengguna boleh mengikuti penjelasan ungkapan biasa di atas di bawah.

^ - Ia adalah permulaan rentetan.
[a-z0-9]+ - sebarang aksara antara a hingga z dan 0 hingga 9 pada permulaan rentetan.
@ - Rentetan hendaklah mengandungi aksara "@" selepas beberapa aksara abjad angka.
[a-z]+ - Terdapat sekurang-kurangnya satu aksara antara a dan z selepas aksara "@" dalam rentetan.
. – E-mel hendaklah mengandungi titik, diikuti oleh beberapa aksara, diikuti dengan aksara “@”
[a-z]{2,3}$ - Ia harus mengandungi dua atau tiga aksara abjad di hujung rentetan. ‘$’ mewakili penghujung rentetan.

Contoh 1

Dalam contoh di bawah, apabila pengguna mengklik butang, ia memanggil fungsi validateEmail(). Dalam fungsi validateEmail(), kami menggunakan kaedah Prompt () JavaScript untuk mendapatkan input e-mel pengguna.

Selepas itu, kami mencipta ungkapan biasa seperti yang dijelaskan dalam sintaks di atas. Kami menggunakan ungkapan biasa untuk menguji input e-mel pengguna melalui kaedah test(), yang mengembalikan nilai boolean berdasarkan sama ada e-mel sepadan dengan ungkapan biasa.

<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>

Salin selepas log masuk

Ungkapan biasa digunakan dalam contoh 2

Kami menggunakan corak regex berikut dalam contoh 2 untuk mengesahkan e-mel.

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

Salin selepas log masuk

Pengguna boleh mengikuti penjelasan ungkapan biasa di atas di bawah.

S+ - Ia bermaksud sebarang perkataan abjad angka.
. – mewakili watak titik.

Pada asasnya, corak di atas sepadan dengan alamat e-mel jenis word@word.word.

Contoh 2

Dalam contoh di bawah, kami telah mencipta input e-mel menggunakan HTML. Pengguna boleh memasukkan sebarang e-mel dalam medan input. Selepas memasukkan e-mel dalam input, pengguna perlu mengklik pada butang "Sahkan e-mel yang dimasukkan", yang akan memanggil fungsi submitEmail().

Dalam fungsi submitEmail(), kami menggunakan kaedah ungkapan biasa dan test() di atas untuk menyemak rentetan e-mel yang dimasukkan oleh pengguna.

Dalam Output, pengguna boleh memasukkan pelbagai e-mel dan memerhatikan output.

<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>

Salin selepas log masuk

Kami belajar menggunakan ungkapan biasa untuk mengesahkan rentetan e-mel. Kami telah melihat dua ungkapan biasa dan menerangkannya supaya pemula dapat memahami cara membuat ungkapan biasa untuk e-mel.

Selain itu, pembangun boleh mencipta ungkapan biasa tersuai untuk mengesahkan alamat e-mel mengikut keperluan mereka.

Atas ialah kandungan terperinci Bagaimana untuk mengesahkan alamat e-mel menggunakan RegExp dalam JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!