Bagaimana Melakukan Validasi Email Dalam JavaScript? [Dengan Contoh]
Diterbitkan: 2021-02-23JavaScript adalah bahasa pemrograman yang dirancang untuk membuat aplikasi. Ini jauh lebih cepat daripada bahasa lain karena sangat ringan dan mudah digunakan. Ini digunakan untuk membuat aplikasi yang dirancang dengan baik.
Validasi email dalam JavaScript penting untuk pengalaman pengguna dalam membuat aplikasi web. Validasi membantu dalam menyampaikan informasi yang valid ke server dari klien aplikasi web.
Daftar isi
Apa itu Validasi?
Validasi mengacu pada proses pemeriksaan nilai yang dimasukkan oleh pengguna. Ini memainkan peran penting dalam membuat aplikasi dan meningkatkan pengalaman pengguna. Banyak bidang, seperti nomor ponsel, email, tanggal, dan kata sandi, divalidasi melalui proses ini.
JavaScript membuat proses validasi lebih cepat karena pemrosesan datanya lebih cepat daripada validasi sisi server lainnya. Sekarang mari kita lihat implementasi validasi email di JavaScript .
Validasi Email dalam JavaScript
Validasi email adalah salah satu bagian penting dari otentikasi formulir HTML. Email adalah subset atau string karakter ASCII, dibagi menjadi dua bagian menggunakan simbol @. Bagian pertama berisi informasi pribadi, dan bagian kedua berisi nama domain tempat email didaftarkan.
Berikut adalah karakter ASCII dari bagian pertama:
- Karakter khusus seperti # * + & '! %@ ? { ^ } ”
- Karakter numerik (0 hingga 9)
- Titik, titik, dsb., dengan syarat tidak boleh menjadi huruf terakhir atau huruf pertama email dan tidak boleh diulang-ulang.
- Huruf besar (A sampai Z) dan huruf kecil (a sampai z) huruf
Bagian kedua meliputi hal-hal berikut:
- titik
- angka
- tanda hubung
- Surat
Menggunakan ekspresi reguler adalah salah satu cara terbaik untuk validasi email di JavaScript . Ini menggunakan ekspresi reguler untuk mendefinisikan pola karakter.
Beberapa contoh id email yang valid:
Beberapa Contoh Lain Id Email Tidak Valid
- [email protected] (satu di titik lain tidak diperbolehkan)
- Inownzsite()&@abcd.com (hanya karakter, tanda hubung, garis bawah, dan angka yang diperbolehkan dalam ekspresi reguler.)
- Ourwebsiteismne.azbyz.com (di sini simbol @ tidak ada)
- [email protected] (Di sini domain tingkat atas tidak boleh diawali dengan titik)
- @youmenandwe.we.net (ini tidak boleh diawali dengan simbol @)
- [email protected] (“.b” bukan domain tingkat atas yang valid) email.js
File terdiri dari kode JavaScript yang diperlukan untuk validasi email. Di sini ekspresi reguler digunakan untuk memvalidasi email di sisi klien aplikasi.
Pos pemeriksaan untuk validasi email yang efisien dalam kode JavaScript:
- Jelaskan ekspresi reguler untuk memvalidasi alamat email
- Jika nilai input cocok dengan ekspresi reguler
- Jika cocok, mengirimkan peringatan yang mengatakan "alamat email valid."
- Jika tidak cocok, kirim peringatan yang mengatakan, "alamat email tidak valid."
Terkait: Validasi Kata Sandi dalam Javascript
Kode Validasi Email dalam JavaScript
Diberikan di bawah ini adalah kode validasi email dalam JavaScript. Kode ini dapat memvalidasi apakah email yang dibuat atau dimasukkan oleh pengguna valid atau tidak. Simpan file sebagai namafile.js.
// Cuplikan Kode
fungsi EmailValidation(masukkanEmail)
{
var mail_format = /^w+([.-]?w+)*@w+([.-]?w+)*(.w{2,3})+$/;
if(enteredEmail.value.match(enteredEmail))
{
alert(“Ya! email yang valid!”);
document.form1.text1.focus();
kembali benar;
}
Lain
{
alert(“Maaf! email tidak valid!”);
document.form1.text1.focus();
kembali salah;
}
}
Fungsi JavaScript digunakan dalam bentuk HTML seperti di bawah ini. Simpan file sebagai nama file.html:
<!DOCTYPE html>
<html lang="en">
<kepala>
<meta charset="utf-8″>
<title>validasi email dalam JavaScript</title>
<link rel='stylesheet' href='form-style.css' type='text/css' />
</head>
<body onload='document.form1.text1.focus()'>
<div class="mail">
<h2>Masukkan email untuk Validasi</h2>
<form name="form1″ action="#">
<ul>
<li><input type='text' name='text1'/></li>
<li> </li>
<li class=”Validate”><input type=”submit” name=”Validate” value=”Validate” onclick=”ValidateEmail(document.form1.text1)”/></li>
<li> </li>
</ul>
</form>
</div>
<script src="namafile.js"></script>
</tubuh>
</html>
Kode berikut dapat menambahkan gaya ke formulir menggunakan CSS. Simpan file sebagai namafile.css.
li {tipe-gaya-daftar: tidak ada;
ukuran font: 16pt;
}
.mail {
margin: otomatis;
padding-atas: 20px;
bantalan-bawah: 20px;
lebar: 850 piksel;
latar belakang : rgb(150, 195, 208);
perbatasan: 1px soild rgb(1, 20, 24);
}
.mail h2 {
margin-kiri: 36px;
}
memasukkan {
ukuran font: 28pt;
}
masukan: fokus, area teks: fokus{
latar belakang-warna: putih;
}
masukan kirim {
ukuran font: 18pt;
}
Sekarang Anda dapat menjalankan kode HTML dan menyelesaikan validasi email dalam JavaScript .
Baca: Proyek Javascript di GitHub
Pelajari Kursus Perangkat Lunak online dari Universitas top dunia. Dapatkan Program PG Eksekutif, Program Sertifikat Tingkat Lanjut, atau Program Magister untuk mempercepat karier Anda.
Kesimpulan
Validasi email sangat penting untuk menghindari pembuatan alamat email yang tidak valid. Pada artikel ini dijelaskan, dengan kode, untuk memvalidasi apakah id email valid atau tidak dan biarkan sistem memeriksa dan memberi tahu pengguna jika id email yang dimasukkan tidak valid.
Jika Anda tertarik untuk mempelajari lebih lanjut tentang pengembangan tumpukan penuh, lihat Program PG Eksekutif upGrad & IIIT-B dalam Pengembangan Perangkat Lunak Tumpukan Penuh yang dirancang untuk para profesional yang bekerja dan menawarkan 500+ jam pelatihan ketat, 9+ proyek, dan tugas , Status Alumni IIIT-B, proyek batu penjuru praktis & bantuan pekerjaan dengan perusahaan-perusahaan top.
