validasi
Email adalah bagian penting dari aplikasi apa pun yang memerlukan pendaftaran pengguna atau input alamat email. Memvalidasi alamat email memastikan data yang dimasukkan akurat, yang membantu mencegah spam, mengurangi kesalahan, dan memastikan bahwa pesan terkirim ke penerima yang tepat. Dalam artikel ini, kita akan mempelajari cara memvalidasi alamat email dalam JavaScript menggunakan ekspresi reguler dan atribut masukan HTML5.
AdvertisementValidasi Email Menggunakan Ekspresi Reguler
Ekspresi reguler memberikan cara ampuh untuk mencocokkan dan memvalidasi pola alamat email. Mari buat fungsi validasi email sederhana menggunakan ekspresi reguler dalam JavaScript:
function isValidEmail(email) {
const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+.[a-zA-Z]{2,}$/;
return emailRegex.test(email);
}1234functionisValidEmail(email){ constemailRegex=/^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+.[a-zA-Z]{2, }$/; returnemailRegex.test(email);}
Fungsi ini menggunakan ekspresi reguler (emailRegex) untuk menentukan pola alamat email yang valid. Fungsi kemudian memeriksa apakah alamat email yang diberikan cocok dengan pola menggunakan metode test(). Fungsi mengembalikan true jika alamat email valid dan false sebaliknya.
Usage:
console.log(isValidEmail("info@example.com")); // BENAR
console.log(isValidEmail("info@contoh")); // PALSU
console.log(isValidEmail("@example.com")); // false123console.log(isValidEmail("[email dilindungi]"));// trueconsole.log(isValidEmail("[email dilindungi]"));// falseconsole.log(isValidEmail("@example.com")) ;// false
Email Validasi Menggunakan Atribut Input HTML5
HTML5 menyediakan cara bawaan untuk memvalidasi alamat email menggunakan atribut jenis dan pola elemen input:
12345
Di sini, atribut type disetel ke “email”, yang memberi tahu browser untuk memvalidasi input sebagai alamat email. Atribut pola digunakan untuk menerapkan pola validasi email khusus (mirip dengan yang ada di contoh JavaScript). Atribut wajib memastikan bahwa bidang harus diisi sebelum mengirimkan formulir.
Menambahkan Pesan Validasi Khusus
Anda dapat menambahkan pesan validasi khusus menggunakan metode setCustomValidity():
document.getElementById("email").addEventListener("input", function() {
const email = this.nilai;
if (!isValidEmail(email)) {
this.setCustomValidity("Silakan masukkan alamat email yang valid.");
} kalau tidak {
this.setCustomValidity("");
}
});123456789document.getElementById("email").addEventListener("input",function(){ constemail=this.value; if(!isValidEmail(email)){ this.setCustomValidity("Silakan masukkan alamat email yang valid." ); }else{ this.setCustomValidity(""); }});
Cuplikan kode ini menambahkan pemroses peristiwa ke bidang masukan email. Jika alamat email tidak valid, pesan validasi khusus ditampilkan menggunakan metode setCustomValidity().
Server-Side Validation
Meskipun validasi sisi klien sangat penting untuk pengalaman pengguna yang baik, sangat penting untuk memvalidasi masukan pengguna di sisi server sebagai Sehat. Ini membantu melindungi aplikasi Anda dari input berbahaya dan memastikan integritas data. Solusi validasi sisi server
bergantung pada teknologi back-end Anda. Bahasa pemrograman sisi server umum seperti PHP, Node.js, dan Python memiliki pustaka atau fungsi bawaan untuk validasi email.
Kesimpulan
Dalam artikel ini, kami mengeksplorasi dua cara untuk memvalidasi alamat email dalam JavaScript: menggunakan ekspresi reguler dan atribut input HTML5. Kami juga mendemonstrasikan cara menambahkan pesan validasi khusus dan menyoroti pentingnya validasi sisi server.
Dengan memvalidasi alamat email di aplikasi Anda, Anda dapat mengurangi kesalahan, mencegah spam, dan memastikan bahwa pesan dikirim ke penerima yang benar.
Referensi tecadmin.comArtikel Diperbarui pada: March 28, 2023
Kontributor: Syauqi Wiryahasana
Model: Haifa Manik Intani
