Setiap pengembang web tahu rasanya: Anda telah membuat formulir, dan Anda mengerang saat menyadari bahwa sekarang Anda harus memvalidasi setiap bidang.
Untungnya, validasi formulir tidak harus menyakitkan. Anda dapat menggunakan ekspresi reguler untuk menangani banyak kebutuhan validasi umum.
Apa Itu Ekspresi Reguler?
Ekspresi reguler menggambarkan pola yang cocok dengan kombinasi karakter dalam string. Anda dapat menggunakannya untuk mewakili konsep seperti "hanya angka" atau "tepatnya lima huruf besar".
Ekspresi reguler (juga disebut regex) adalah alat yang ampuh. Mereka memiliki banyak kegunaan, termasuk pencarian lanjutan, temukan-dan-ganti, dan operasi validasi pada string. Salah satu aplikasi ekspresi reguler yang terkenal adalah perintah grep di Linux.
Mengapa Menggunakan Ekspresi Reguler untuk Validasi?
Ada banyak cara untuk memvalidasi input formulir, tetapi ekspresi reguler sederhana, cepat, dan nyaman digunakan jika Anda memahami caranya.
JavaScript memiliki dukungan asli untuk ekspresi reguler. Ini berarti menggunakannya untuk validasi sebagai lawan dari pustaka eksternal membantu menjaga ukuran aplikasi web Anda sekecil mungkin.
Ekspresi reguler juga mampu memvalidasi banyak jenis input formulir.
Dasar-dasar Ekspresi Reguler
Ekspresi reguler terdiri dari simbol-simbol yang menggambarkan pola yang dibentuk oleh karakter dalam sebuah string. Dalam JavaScript, Anda dapat membuat ekspresi reguler literal dengan menuliskannya di antara dua garis miring. Bentuk ekspresi reguler yang paling sederhana terlihat seperti ini:
/abc/Ekspresi reguler di atas akan cocok dengan string apa pun yang menyertakan karakter "a", "b", dan "c" dalam urutan itu, secara berurutan. String "abc" akan cocok dengan ekspresi reguler itu, serta string seperti "abcdef".
Anda dapat menjelaskan pola yang lebih maju dengan menggunakan karakter khusus dalam ekspresi reguler Anda. Karakter khusus tidak mewakili karakter literal, tetapi membuat ekspresi reguler Anda lebih ekspresif.
Anda dapat menggunakannya untuk menentukan bahwa bagian dari pola harus diulang beberapa kali, atau untuk menunjukkan bahwa beberapa pola adalah opsional.
Contoh karakter khusus adalah "*". Karakter "*" memodifikasi satu karakter, atau sekelompok karakter, yang mendahuluinya. Ini menyatakan bahwa karakter-karakter itu mungkin tidak ada atau mungkin berulang beberapa kali berturut-turut. Sebagai contoh:
/abc*/
Akan cocok dengan "ab" diikuti oleh sejumlah karakter "c". String "ab" adalah contoh yang valid dari pola itu, karena karakter "c" adalah opsional. String "abc" dan "abccccc" sama-sama valid, karena "*" berarti "c" dapat diulang beberapa kali.
Sintaks regex lengkap menggunakan beberapa karakter pola lagi untuk menggambarkan kemungkinan kecocokan. Anda dapat belajar lebih banyak dari Regex 101 regexlearn.com kursus interaktif. Panduan JavaScript MDN juga sangat berguna.
Validasi Formulir Dengan Ekspresi Reguler
Anda dapat menggunakan regex untuk memvalidasi input formulir dalam beberapa cara. Cara pertama adalah dengan menggunakan JavaScript. Ini melibatkan beberapa langkah:
- Dapatkan nilai dari input formulir.
- Periksa apakah nilai input cocok dengan ekspresi reguler.
- Jika tidak, tampilkan kepada pengguna situs web bahwa nilai bidang input tidak valid.
Berikut ini contoh singkatnya. Diberikan bidang input seperti ini:
<masukan tempat penampung="Bidang masukan">Anda dapat menulis fungsi untuk memvalidasinya seperti ini:
fungsimengesahkan() {
membiarkan nilai = dokumen.querySelector("masukan").nilai;
konstan regEx = /^.{3,7}$/;
kembali regEx.test (nilai);
}Cara lain adalah dengan memanfaatkan kemampuan validasi formulir HTML browser. Bagaimana? Dengan menentukan regex sebagai nilai atribut pola dari tag input HTML.
Atribut pattern hanya valid untuk jenis input berikut: teks, telp, email, url, kata sandi, dan pencarian.
Berikut ini contoh menggunakan atribut pola:
<membentuk>
<masukan tempat penampung="Bidang masukan" pola yang diperlukan ="/^.{3,7}$/">
<tombol>Kirim</button>
</form>Jika Anda mengirimkan formulir dan nilai input tidak cocok dengan seluruh ekspresi reguler, formulir akan menampilkan kesalahan default yang terlihat seperti ini:
Jika ekspresi reguler yang diberikan ke atribut pola tidak valid, browser akan mengabaikan atribut tersebut.
Pola Regex Umum untuk Validasi Formulir
Harus membuat dan men-debug regex dari awal dapat memakan waktu. Berikut adalah beberapa pernyataan regex yang dapat Anda gunakan untuk memvalidasi beberapa tipe data formulir yang paling umum.
Ekspresi Reguler untuk Memvalidasi Panjang String
Salah satu persyaratan validasi yang paling umum adalah pembatasan panjang string. Ekspresi reguler yang akan cocok dengan string tujuh karakter adalah:
/^.{7}$/"." adalah placeholder yang cocok dengan karakter apa pun, dan "7" dalam kurung kurawal menentukan batas panjang string. Jika string harus berada dalam rentang panjang tertentu, seperti antara tiga dan tujuh, ekspresi reguler akan terlihat seperti ini:
/^.{3,7}$/Dan jika string harus memiliki panjang setidaknya tiga karakter tanpa batas atas, akan terlihat seperti ini:
/^.{3,}$/Panjangnya tidak mungkin menjadi satu-satunya persyaratan validasi untuk input formulir. Tetapi Anda akan sering menggunakannya sebagai bagian dari ekspresi reguler yang lebih rumit termasuk kondisi lainnya.
Ekspresi Reguler untuk Memvalidasi Kolom Hanya Huruf
Beberapa input formulir tidak perlu berisi apa pun kecuali huruf agar valid. Ekspresi reguler berikut hanya akan cocok dengan string tersebut:
/^[a-zA-Z]+$/Ekspresi reguler ini menentukan set karakter yang terdiri dari seluruh alfabet. Karakter khusus "+" berarti karakter sebelumnya harus muncul setidaknya sekali, tanpa batas atas.
Ekspresi Reguler untuk Memvalidasi Kolom Nomor Saja
Ekspresi reguler berikut hanya akan cocok dengan string yang seluruhnya terdiri dari angka:
/^\d+$/Ekspresi reguler di atas pada dasarnya sama dengan yang sebelumnya. Satu-satunya perbedaan adalah ia menggunakan karakter khusus "\d" untuk mewakili rentang digit, alih-alih menuliskannya.
Ekspresi Reguler untuk Memvalidasi Bidang Alfanumerik
Ekspresi reguler juga memudahkan untuk memvalidasi bidang alfanumerik. Berikut ekspresi reguler yang hanya akan cocok dengan string yang terdiri dari huruf dan angka:
/^[a-zA-Z\d]+$/Beberapa bidang bersifat alfanumerik, tetapi mengizinkan beberapa karakter lain seperti tanda hubung dan garis bawah. Salah satu contoh bidang tersebut adalah nama pengguna. Di bawah ini adalah ekspresi reguler yang cocok dengan string yang terdiri dari huruf, angka, garis bawah, dan tanda hubung:
/^(\w|-)+$/Karakter khusus "\w" cocok dengan seluruh kelas karakter, seperti halnya "\d". Ini mewakili rentang alfabet, angka, dan karakter garis bawah ("_").
Ekspresi Reguler untuk Memvalidasi Nomor Telepon
Nomor telepon bisa menjadi bidang yang rumit untuk divalidasi karena negara yang berbeda menggunakan format yang berbeda. Pendekatan yang sangat umum adalah memastikan bahwa string hanya berisi angka dan panjangnya berada dalam kisaran tertentu:
/^\d{9,15}$/Pendekatan yang lebih canggih mungkin terlihat seperti ini diambil dari MDN, yang memvalidasi nomor telepon dalam format ###-###-####:
/^(?:\d{3}|\(\d{3}\))([-\/\.])\d{3}\1\d{4}$/Ekspresi Reguler untuk Memvalidasi Tanggal
Seperti nomor telepon, tanggal juga dapat memiliki beberapa format. Tanggal biasanya tidak terlalu rumit untuk divalidasi daripada nomor telepon. Mengapa? Tanggal tidak mengandung karakter selain angka dan tanda hubung.
Berikut adalah contoh yang akan memvalidasi tanggal format "DD-MM-YYYY".
/^\d{2}-\d{2}-\d{4}$/Memvalidasi Dengan Regex Itu Mudah
Ekspresi reguler menggambarkan pola yang cocok dengan kombinasi karakter dalam string. Mereka memiliki berbagai aplikasi, seperti memvalidasi input pengguna dari formulir HTML.
Anda dapat menggunakan regex untuk memvalidasi dengan JavaScript atau melalui atribut pola HTML. Sangat mudah untuk membuat ekspresi reguler untuk memvalidasi jenis input formulir yang umum seperti tanggal dan nama pengguna.
