Alamat email punya bentuk tetap: nama@domain. Regex email memeriksa bentuk itu, persis seperti kurir yang membaca label paket: ada nama penerima, ada jalan, ada kota? Kalau labelnya rusak, paketnya ditolak di loket. Tapi kurir di loket gak bisa tahu rumahnya beneran ada. Itu baru ketahuan waktu paketnya diantar. Di email, "mengantar" itu kirim email konfirmasi. Di pelajaran ini kita rakit pola email dari bahan pelajaran sebelumnya, mulai dari alamat di chat: [email protected].
🧪 Tebakan cepat: pola
/^[^\s@]+@[^\s@]+\.[^\s@]+$/menerima[email protected]. Apakah dia juga menerima[email protected], dengan titik dobel yang membuat alamat itu gak bisa dipakai? Tebak dulu, jawabannya ada di bagian "Batas regex untuk email".
Tiga bagian alamat email
| Bagian | Di [email protected] |
Di [email protected] |
|---|---|---|
Local part, sebelum @ |
dina.putri |
siti |
Domain, sesudah @ |
example |
yahoo.co |
| TLD, sesudah titik terakhir | com |
id |
Pola email tinggal menyusun tiga bagian itu: sesuatu, @, sesuatu, titik, akhiran.
Pola sederhana: [^\s@]+
const sederhana = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
console.log(sederhana.test("[email protected]")); // true
console.log(sederhana.test("[email protected]")); // true
console.log(sederhana.test("invalid@")); // false
console.log(sederhana.test("no-at-sign.com")); // false
console.log(sederhana.test("dina [email protected]")); // false
[^\s@]+artinya satu karakter atau lebih yang bukan spasi dan bukan@. Dipakai tiga kali: sebelum@, untuk domain, dan untuk TLD sesudah\..^dan$membuat seluruh isian harus berbentuk email, bukan cuma sepotong.invalid@gagal karena sesudah@gak ada apa-apa.no-at-sign.comgagal karena gak ada@.
Pola yang lebih ketat
const ketat = /^[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,}$/;
console.log(ketat.test("[email protected]")); // true
console.log(ketat.test("[email protected]")); // true
console.log(ketat.test("[email protected]")); // true
console.log(ketat.test("[email protected]")); // false
| Bagian | Pola | Artinya |
|---|---|---|
| Local part | [A-Za-z0-9._%+-]+ |
huruf, angka, dan . _ % + -, satu atau lebih |
@ |
@ |
tanda @ apa adanya |
| Domain | [A-Za-z0-9.-]+ |
huruf, angka, titik, strip |
| Titik | \. |
titik asli sebelum TLD |
| TLD | [A-Za-z]{2,} |
minimal 2 huruf |
-di ujung class berarti tanda strip biasa, bukan rentang.{2,}di TLD membuat[email protected]ditolak: TLD satu huruf gak ada.[email protected]lolos karena domain[A-Za-z0-9.-]+boleh berisi titik:yahoo.co, lalu\.id.
Mengambil email dari teks
Buat mencari di dalam teks, buang ^ dan $, lalu tambah flag g.
const polaEmail = /[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,}/g;
console.log(chat.match(polaEmail)); // ['[email protected]']
console.log(chat.match(/[^\s@]+@[^\s@]+\.[^\s@]+/g)); // ['[email protected].']
console.log("tanpa alamat".match(polaEmail)); // null
console.log("tanpa alamat".match(polaEmail) || []); // []
- Di chat, alamatnya diikuti titik akhir kalimat:
...example.com. Kode PO-0413. Pola sederhana ikut menelan titik itu, karena[^\s@]menerima titik. TLD[A-Za-z]{2,}berhenti di huruf terakhir. - Gak ketemu apa-apa?
match()memberinull, bukan array kosong.|| []menggantinya dengan[], supaya.join(",")sesudahnya gak error.
Batas regex untuk email
Regex cuma memeriksa bentuk. Titik dobel lolos di kedua pola: sederhana.test("[email protected]") dan ketat.test("[email protected]") sama-sama true. Itu jawaban tebakannya.
Pola yang terlalu ketat malah menolak alamat yang sah:
const kaku = /^[a-z0-9.]+@[a-z]+\.[a-z]{2,3}$/;
console.log(kaku.test("[email protected]")); // false, padahal sah
console.log(kaku.test("[email protected]")); // false, padahal sah
console.log(kaku.test("[email protected]")); // false, padahal sah
Browser juga punya pemeriksa bawaan: <input type="email">. Spesifikasi HTML menuliskan aturannya sebagai regex ini:
/^[a-zA-Z0-9.!#$%&'*+\/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/
Aturan itu sengaja disederhanakan. Dia menerima [email protected] dan dina@localhost (tanpa titik di domain). Aturan lengkap email (RFC 5322) jauh lebih rumit, dan regex yang mengaku "lengkap" panjangnya ribuan karakter. Jadi: regex atau type="email" untuk menangkap salah ketik di form, server memeriksa ulang, dan bukti satu-satunya alamat itu hidup adalah email konfirmasi yang diklik pemiliknya.
⚠️ Jebakan yang sering ketemu
- Lupa
^dan$saat validasi./[^\s@]+@[^\s@]+\.[^\s@]+/.test("kirim ke [email protected]")menjawabtrue. - Spasi di awal atau akhir.
" [email protected]"ditolak^[^\s@]+. Rapikan dulu dengan.trim(). - Cuma huruf kecil. Class
[a-z]menolak[email protected]. MasukkanA-Z, atau pakai flagi. - Pola terlalu ketat. Melarang
+, membatasi TLD 3 huruf, atau melarang titik di domain menolak alamat sah seperti[email protected]dan[email protected].
TL;DR: Email = local part, @, domain, titik, TLD. Pola sederhana /^[^\s@]+@[^\s@]+\.[^\s@]+$/ cukup untuk banyak form: "[email protected]" lolos. Pola ketat /^[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,}$/: [A-Za-z0-9._%+-]+ adalah local part sebelum @, dan [A-Za-z]{2,} minta TLD minimal 2 huruf, jadi [email protected] ditolak. Validasi pakai ^...$; mengambil dari teks tanpa ^...$ tapi dengan g, plus || [] karena match() bisa null. Regex cuma memeriksa bentuk: titik dobel tetap lolos, dan pola yang terlalu ketat menolak alamat sah. <input type="email"> memakai aturan HTML yang sengaja sederhana; bukti akhirnya email konfirmasi.
