Validasi Email dengan Regex

Validasi email adalah salah satu use case regex yang paling umum. Mari kita bangun pattern-nya step by step.

Struktur Email

Sebuah alamat email memiliki format: [email protected]

• Local part: huruf, angka, titik, underscore, hyphen
• @: pemisah wajib
• Domain: huruf, angka, hyphen, dipisahkan titik
• TLD: 2+ huruf (com, id, co.id, dll)

Pattern Sederhana

// Versi paling basic
const simpleEmail = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;

simpleEmail.test("[email protected]");     // true
simpleEmail.test("[email protected]");   // true
simpleEmail.test("tanpa-at.com");       // false
simpleEmail.test("double@@at.com");     // false
simpleEmail.test("ada [email protected]"); // false

Pattern [^\s@]+ artinya "satu atau lebih karakter yang bukan spasi dan bukan @". Ini cukup sederhana tapi efektif untuk kebanyakan kasus.

Pattern Lebih Detail

const detailedEmail = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;

Mari kita bedah:

detailedEmail.test("[email protected]");  // true
detailedEmail.test("[email protected]");       // true
detailedEmail.test("[email protected]");                   // false
detailedEmail.test("user@com");                    // false

Mengapa Tidak Perlu Regex Sempurna untuk Email?

Spesifikasi email (RFC 5322) sangat kompleks. Email yang valid secara teknis bisa termasuk:

"sangat aneh"@example.com
user@[192.168.1.1]

Regex yang 100% sesuai RFC akan sangat panjang dan tidak praktis. Best practice:

1. Gunakan regex sederhana untuk basic validation
2. Kirim email konfirmasi untuk memastikan email benar-benar ada
3. Gunakan library validasi email jika butuh akurasi tinggi

Extract Email dari Teks

const teks = `Hubungi kami di:
  - [email protected]
  - [email protected]
  - bukan email ini`;

const emails = teks.match(/[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}/g);
console.log(emails);
// ["[email protected]", "[email protected]"]

Validasi dengan Feedback

function validasiEmail(email) {
  if (!email.includes("@")) {
    return "Email harus mengandung @";
  }
  if (!/^[a-zA-Z0-9._%+-]+@/.test(email)) {
    return "Karakter sebelum @ tidak valid";
  }
  if (!/@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/.test(email)) {
    return "Domain email tidak valid";
  }
  return "Email valid";
}

console.log(validasiEmail("[email protected]"));   // "Email valid"
console.log(validasiEmail("budi"));             // "Email harus mengandung @"
console.log(validasiEmail("@gmail.com"));       // "Karakter sebelum @ tidak valid"
console.log(validasiEmail("budi@gmail"));       // "Domain email tidak valid"

Di Dunia Nyata

Dalam framework modern, kamu biasanya tidak menulis regex email sendiri:

// HTML5 sudah punya validasi email bawaan
// <input type="email" required>

// Di JavaScript, cukup gunakan regex sederhana
// dan fokus pada pengalaman pengguna yang baik

Tapi memahami cara kerjanya sangat membantu saat debugging atau saat butuh validasi custom.

🎭 Analogi sehari-hari: Validasi email = bouncer cek KTP. Format umum: nama + alamat. Yang basic: cek ada @, ada titik, gak ada spasi. Yang detail: cek format nama, alamat valid, TLD. Bouncer "100% akurat" = baca semua dokumen pakai kacamata pembesar = lambat. Kebanyakan klub: cek umum, kalau valid biar dia masuk → kirim email konfirmasi (bouncer level 2).

💡 HTML5 input type="email" sudah cukup untuk 95% kasus: Browser punya regex bawaan. Backend wajib re-validate, tapi pakai library (validator.js, Laravel Validator) bukan tulis regex sendiri. Email regex "100% RFC compliant" = 6000+ karakter dan tetap tidak meng-cover semua case.

⚠️ Jebakan klasik:

• Regex email kompleks tapi miss valid case (misal + di local part, IDN domain)
• Lupa case insensitive — [email protected] valid. Pakai flag i atau lowercase dulu
• Trim lupa — " [email protected] " punya whitespace yang bikin gagal validasi. .trim() dulu
• Validasi syntax saja = email gak ada, gak verifiable. Kirim confirmation email
• Anti-spam list kebanyakan = block disposable email seperti mailinator.com, tapi catch-all blocker = false positive

🎯 Email validation strategy:

1. Frontend: HTML5 type="email" + simple regex visual feedback
2. Backend: library validator (validator.js, Laravel Validator) + simple regex
3. Production-grade: library + send confirmation email (verify reachability)
4. Anti-fraud: disposable email blocklist + MX record check

TL;DR: Email regex sederhana cukup (/^[^\s@]+@[^\s@]+\.[^\s@]+$/). RFC 5322 full = 6000 char regex impractical. Pakai library + confirmation email untuk production. Backend wajib re-validate frontend input.