Formulir pendaftaran komunitas olahraga yang dikelola Siti baru dibuka sehari, dan isian datang dalam segala bentuk: nomor telepon bertanda hubung, email tanpa titik pada domain, dan username berisi spasi. Memeriksa setiap isian secara manual tidaklah praktis. Yang dibutuhkan adalah aturan format per kolom yang bisa diperiksa otomatis sebelum data disimpan.

Strateginya tiga langkah, memakai seluruh bekal section ini. Pertama, tetapkan aturan format per kolom dengan kalimat biasa. Kedua, terjemahkan aturan itu menjadi pattern regex yang diapit anchor ^ dan $ — sesuai pembahasan chapter Regex Patterns. Ketiga, uji isian dengan test() dan kumpulkan hasilnya. Nilai true berarti format sah; false berarti isian perlu diperbaiki oleh penggunanya.

Memvalidasi Username #

Aturan yang dipilih Siti: username hanya boleh berisi huruf kecil, angka, dan underscore, dengan panjang 5 sampai 12 karakter. Patternnya:

js 
const polaUsername = /^[a-z0-9_]{5,12}$/;

Bagian-per-bagian pattern tersebut dapat dibaca seperti ini:

  • ^ — pemeriksaan dimulai dari awal string;
  • [a-z0-9_] — satu karakter: huruf kecil, angka, atau underscore;
  • {5,12} — character class itu berulang 5 sampai 12 kali;
  • $ — pemeriksaan berakhir tepat di akhir string.
js 
const polaUsername = /^[a-z0-9_]{5,12}$/;
console.log(polaUsername.test("budi_santoso"));
console.log(polaUsername.test("Budi99"));
console.log(polaUsername.test("sit"));
console.log(polaUsername.test("siti_andi_2024"));

Output yang Dihasilkan:

text 
true
false
false
false

Tiga isian ditolak dengan alasan yang berbeda-beda: "Budi99" memuat huruf kapital, "sit" terlalu pendek, dan "siti_andi_2024" melebihi 12 karakter. Flag i sengaja tidak dipakai di sini — aturan hanya menerima huruf kecil, dan pemeriksaan yang ketat itulah yang diminta.

Perhatikan pula peran kedua anchor. Tanpa ^ dan $, pattern [a-z0-9_]{5,12} tetap lolos untuk isian sepanjang apa pun — cukup lima karakter sah di tengahnya. Anchor mengubah pencarian menjadi pemeriksaan format menyeluruh, dan itulah yang membedakan validasi dari sekadar mencari.

Memvalidasi Email Sederhana #

Aturan email versi sederhana yang lazim dipakai sebagai penyaring awal: ada teks sebelum tanda @, ada domain setelahnya, dan domain memuat titik diikuti akhiran. Patternnya memanfaatkan character class negasi:

js 
const polaEmail = /^[^@\s]+@[^@\s]+\.[^@\s]+$/;
  • [^@\s]+ — satu atau lebih karakter yang bukan @ dan bukan spasi (\s adalah singkatan class untuk whitespace: spasi, tab, dan baris baru);
  • @ — tanda at tepat satu;
  • \. — titik sungguhan, yang di-escape karena merupakan karakter spesial;
  • [^@\s]+ lagi — akhiran domain setelah titik.

Karakter spasi sengaja dikeluarkan dari kelas yang diizinkan: isian email yang memuat spasi hampir pasti keliru ketik, misalnya tanda kutip yang ikut tersalin saat menempel teks. Dengan menolaknya sejak awal, isian semacam itu diperbaiki di tempat, bukan tersimpan lalu membingungkan saat pesan dikirim.

js 
const polaEmail = /^[^@\s]+@[^@\s]+\.[^@\s]+$/;
console.log(polaEmail.test("[email protected]"));
console.log(polaEmail.test("siti@tokoku"));
console.log(polaEmail.test("budi.example.com"));

Output yang Dihasilkan:

text 
true
false
false

"siti@tokoku" ditolak karena tidak ada titik setelah tanda @, dan "budi.example.com" ditolak karena tidak ada tanda @ sama sekali.

Memvalidasi Nomor Telepon Indonesia #

Aturan untuk nomor ponsel Indonesia yang dipakai Siti: nomor diawali 08, atau ditulis internasional sebagai +62 / 62 tanpa awalan nol; setelah awalan itu selalu ada digit 8, diikuti 8 sampai 10 digit. Patternnya menggabungkan capturing group dengan alternation:

js 
const polaTelepon = /^(\+62|62|0)8[0-9]{8,10}$/;
  • (\+62|62|0) — capturing group berisi tiga pilihan awalan: +62, 62, atau 0; tanda + di-escape karena karakter spesial;
  • 8 — digit delapan yang selalu mengikuti awalan;
  • [0-9]{8,10} — sisa digit sebanyak 8 sampai 10.
js 
const polaTelepon = /^(\+62|62|0)8[0-9]{8,10}$/;
console.log(polaTelepon.test("081234567890"));
console.log(polaTelepon.test("+6281234567890"));
console.log(polaTelepon.test("6281234567890"));
console.log(polaTelepon.test("0812345"));
console.log(polaTelepon.test("081-2345-6789"));

Output yang Dihasilkan:

text 
true
true
true
false
false

Ketiga gaya penulisan yang sah — 08, +62, dan 62 — lolos dengan digit yang sama. Adapun "0812345" ditolak karena sisa digitnya hanya 5, dan "081-2345-6789" ditolak karena tanda hubung bukan angka. Isian kedua itu bukan nomor yang salah, melainkan nomor yang belum dirapikan — dan itulah bahasan bagian berikutnya.

Merapikan Input sebelum Menolaknya #

Pengguna menulis nomor sesuai kebiasaan sehari-hari: dengan tanda hubung atau spasi. Kebiasaan yang ramah adalah menormalisasi isian terlebih dahulu — hapus pemisahnya dengan replaceAll dari chapter String Methods — baru memvalidasi hasilnya:

js 
const polaTelepon = /^(\+62|62|0)8[0-9]{8,10}$/;
const mentah = "0812-3456-7890";
const rapi = mentah.replaceAll("-", "").replaceAll(" ", "");
console.log(polaTelepon.test(mentah));
console.log(rapi);
console.log(polaTelepon.test(rapi));

Output yang Dihasilkan:

text 
false
081234567890
true

Nomor yang sama ditolak dalam bentuk mentah dan diterima setelah dirapikan. Menolak isian hanya karena format kosmetik membuat pengguna frustrasi; merapikan dulu sebelum diperiksa memberi hasil yang lebih adil bagi keduanya.

Kapan Regex Bukan Alat yang Tepat #

Regex menjawab pertanyaan tentang bentuk teks, dan batas itu perlu diakui. Validasi username dengan format di atas tidak menyatakan bahwa budi_santoso masih tersedia — ketersediaan hanya bisa diperiksa dengan mencocokkannya ke daftar akun di penyimpanan data. Demikian pula, kekuatan password tidak dapat dihakimi oleh satu pattern saja, karena aturannya bersifat kualitatif dan bukan bentuk teks semata.

Pembagian kerja yang sehat: regex menyaring format, sementara kebenaran isi diperiksa oleh logika lain — pencarian ke basis data, pengiriman email konfirmasi, atau aturan bisnis yang lebih kompleks.

Studi Kasus: Memeriksa Form Pendaftaran #

Sekarang kita rangkai seluruh chapter: tiga pattern bernama, tiga tabel uji input, normalisasi, lalu penggabungan ketiga hasil untuk satu pendaftar.

js validasi-pendaftaran.js 
// validasi-pendaftaran.js
// Siti memeriksa isian form pendaftaran komunitas sebelum disimpan.

const polaUsername = /^[a-z0-9_]{5,12}$/;
const polaEmail = /^[^@\s]+@[^@\s]+\.[^@\s]+$/;
const polaTelepon = /^(\+62|62|0)8[0-9]{8,10}$/;

// 1. Tabel uji username: huruf kecil, angka, underscore, 5 sampai 12 karakter
const daftarUsername = ["budi_santoso", "Budi99", "sit", "siti_andi_2024"];
for (const nama of daftarUsername) {
  console.log(nama.padEnd(20), polaUsername.test(nama));
}

// 2. Tabel uji email sederhana: ada @ dan ada titik setelahnya
const daftarEmail = ["[email protected]", "siti@tokoku", "budi.example.com", "[email protected]"];
for (const email of daftarEmail) {
  console.log(email.padEnd(20), polaEmail.test(email));
}

// 3. Tabel uji telepon Indonesia: 08, 62, atau +62 diikuti 8 dan 8-10 digit
const daftarTelepon = ["081234567890", "+6281234567890", "6281234567890", "0812345", "081-2345-6789"];
for (const telepon of daftarTelepon) {
  console.log(telepon.padEnd(16), polaTelepon.test(telepon));
}

// 4. Normalisasi sebelum validasi: pemisah dihapus terlebih dahulu
const mentah = "0812-3456-7890";
const rapi = mentah.replaceAll("-", "").replaceAll(" ", "");
console.log(rapi, polaTelepon.test(rapi));

// 5. Ketiga aturan digabung untuk satu pendaftar
const pendaftar = {
  username: "budi_santoso",
  email: "[email protected]",
  telepon: "+6281234567890",
};
const sah =
  polaUsername.test(pendaftar.username) &&
  polaEmail.test(pendaftar.email) &&
  polaTelepon.test(pendaftar.telepon);
console.log(sah);

Output yang Dihasilkan:

text 
budi_santoso         true
Budi99               false
sit                  false
siti_andi_2024       false
[email protected]     true
siti@tokoku          false
budi.example.com     false
[email protected]       true
081234567890     true
+6281234567890   true
6281234567890    true
0812345          false
081-2345-6789    false
081234567890 true
true

Jalankan dengan node validasi-pendaftaran.js dan bandingkan tabelnya. Mari kita telaah baris-baris pentingnya:

  1. Baris 4–6: tiga pattern disimpan sebagai konstanta bernama; karena itu, ekspresi di baris 37–40 terbaca hampir seperti kalimat biasa.
  2. Baris 10–12: loop for...of menguji tiap username dan mencetak pasangan input dan hasil; padEnd dari chapter String Methods menjaga kolom tetap rata.
  3. Baris 22–24: tabel telepon menunjukkan tiga gaya awalan yang sah, serta dua isian yang ditolak.
  4. Baris 28: normalisasi menghapus tanda hubung dan spasi sebelum pemeriksaan — nomor "0812-3456-7890" pun lolos setelah dirapikan.
  5. Baris 37–40 (const sah = ...): operator && menggabungkan ketiga hasil test(); nilainya true hanya bila ketiga kolom sah sekaligus.

Section Strings dan Regex sampai di sini sudah lengkap: method string untuk merapikan teks, template literal untuk menyusunnya, method pencarian, lalu regex dari pattern, flag, hingga validasi. Section berikutnya, Collections, memperkenalkan struktur data baru — Map dan Set — untuk kebutuhan penyimpanan yang tidak pas diwakili array atau object biasa.

Berkas Sumber

Berkas pendukung halaman ini dapat diunduh dan dijalankan langsung sesuai penjelasan di atas.

validasi-pendaftaran.js

Unduh berkas
javascript 
// validasi-pendaftaran.js
// Siti memeriksa isian form pendaftaran komunitas sebelum disimpan.

const polaUsername = /^[a-z0-9_]{5,12}$/;
const polaEmail = /^[^@\s]+@[^@\s]+\.[^@\s]+$/;
const polaTelepon = /^(\+62|62|0)8[0-9]{8,10}$/;

// 1. Tabel uji username: huruf kecil, angka, underscore, 5 sampai 12 karakter
const daftarUsername = ["budi_santoso", "Budi99", "sit", "siti_andi_2024"];
for (const nama of daftarUsername) {
  console.log(nama.padEnd(20), polaUsername.test(nama));
}

// 2. Tabel uji email sederhana: ada @ dan ada titik setelahnya
const daftarEmail = ["[email protected]", "siti@tokoku", "budi.example.com", "[email protected]"];
for (const email of daftarEmail) {
  console.log(email.padEnd(20), polaEmail.test(email));
}

// 3. Tabel uji telepon Indonesia: 08, 62, atau +62 diikuti 8 dan 8-10 digit
const daftarTelepon = ["081234567890", "+6281234567890", "6281234567890", "0812345", "081-2345-6789"];
for (const telepon of daftarTelepon) {
  console.log(telepon.padEnd(16), polaTelepon.test(telepon));
}

// 4. Normalisasi sebelum validasi: pemisah dihapus terlebih dahulu
const mentah = "0812-3456-7890";
const rapi = mentah.replaceAll("-", "").replaceAll(" ", "");
console.log(rapi, polaTelepon.test(rapi));

// 5. Ketiga aturan digabung untuk satu pendaftar
const pendaftar = {
  username: "budi_santoso",
  email: "[email protected]",
  telepon: "+6281234567890",
};
const sah =
  polaUsername.test(pendaftar.username) &&
  polaEmail.test(pendaftar.email) &&
  polaTelepon.test(pendaftar.telepon);
console.log(sah);