Regex untuk validasi input pada Web

Ditulis pada oleh

Penulis: Muhammad Fairuzabadi
Email: [email protected]
Google Schooler: Muhammad Fairuzabadi

Pada saat membangun sebuah website atau aplikasi web, validasi input merupakan bagian penting untuk memastikan bahwa data yang dimasukkan oleh pengguna sesuai dengan format yang diinginkan dan aman untuk diproses oleh server. Validasi input dapat dilakukan menggunakan beberapa cara, salah satunya adalah dengan menggunakan Regular Expression (Regex).

Regex adalah sebuah pola atau pattern yang digunakan untuk mencocokkan atau mencari teks dalam sebuah string. Regex sangat berguna dalam validasi input pada web karena memungkinkan kita untuk menentukan format atau pola yang harus dipenuhi oleh input pengguna. Dengan menggunakan regex, kita dapat memastikan bahwa input yang dimasukkan oleh pengguna mengandung karakter-karakter yang valid dan sesuai dengan format yang diinginkan, seperti email, nomor telepon, atau URL.

Dalam artikel ini, kami akan membahas beberapa contoh regex untuk validasi input pada web yang dapat membantu Anda memvalidasi input pada website atau aplikasi web Anda.

Mengenal Regex

Regex (Regular Expression) adalah sebuah pola atau pattern yang digunakan untuk mencari atau mencocokkan teks dalam sebuah string. Dalam pemrograman, regex digunakan untuk mencari dan memanipulasi teks, misalnya untuk validasi input atau penggantian string dengan string lain yang sesuai dengan pola yang ditentukan.

Regex terdiri dari beberapa karakter yang memiliki arti atau makna tertentu, seperti huruf, angka, atau karakter khusus seperti tanda kurung atau tanda petik. Setiap karakter dalam regex memiliki makna atau arti tertentu, sehingga penggunaan karakter tertentu dalam regex akan menghasilkan pola yang berbeda-beda.

Beberapa karakter khusus dalam regex antara lain:

  • ^ (caret): karakter ini digunakan untuk menandakan awal dari sebuah string atau baris
  • $ (dollar): karakter ini digunakan untuk menandakan akhir dari sebuah string atau baris
  • . (dot): karakter ini digunakan untuk mencocokkan karakter tunggal apa pun kecuali newline
    • (asterisk): karakter ini digunakan untuk mencocokkan nol atau lebih karakter sebelumnya
    • (plus): karakter ini digunakan untuk mencocokkan satu atau lebih karakter sebelumnya
  • ? (question mark): karakter ini digunakan untuk mencocokkan nol atau satu karakter sebelumnya
  • [] (square brackets): karakter ini digunakan untuk mencocokkan karakter-karakter tertentu dalam sebuah range
  • () (round brackets): karakter ini digunakan untuk mengelompokkan sub-pola dalam sebuah regex

Regex biasanya digunakan dalam pemrograman dengan menggunakan fungsi atau metode khusus yang disediakan oleh bahasa pemrograman tertentu, seperti match() atau search() dalam JavaScript atau findall() dalam Python.

Regex sangat berguna dalam validasi input pada web karena memungkinkan kita untuk menentukan format atau pola yang harus dipenuhi oleh input pengguna. Dengan menggunakan regex, kita dapat memastikan bahwa input yang dimasukkan oleh pengguna mengandung karakter-karakter yang valid dan sesuai dengan format yang diinginkan.

Menentukan minimal karakter

Untuk menentukan minimal karakter dalam sebuah string, kita dapat menggunakan kurung kurawal dan tanda kurang dari atau lebih besar dari. Misalnya, untuk memvalidasi sebuah input yang minimal terdiri dari 5 karakter, kita dapat menggunakan regex berikut:

.{5,}

Penjelasan:

  • . : mencocokkan karakter tunggal apa pun
  • {5,} : mencocokkan minimal 5 karakter atau lebih

Contoh penggunaan dalam JavaScript:

const input = "hello world";
const regex = /.{5,}/;

if (regex.test(input)) {
  console.log("Input valid");
} else {
  console.log("Input tidak valid");
}

Output:

Input valid

Dalam contoh di atas, input “hello world” memiliki lebih dari 5 karakter, sehingga dianggap valid oleh regex. Jika input memiliki kurang dari 5 karakter, maka regex akan mengembalikan nilai false dan dianggap tidak valid.

Harus mengandung karakter tertentu

Untuk memvalidasi input yang harus mengandung karakter tertentu, kita dapat menggunakan tanda kurung siku dan karakter yang ingin dicocokkan. Misalnya, untuk memvalidasi sebuah input yang harus mengandung setidaknya satu huruf kapital, kita dapat menggunakan regex berikut:

*[A-Z].*

Penjelasan:

  • .* : mencocokkan nol atau lebih karakter apa pun
  • [A-Z] : mencocokkan huruf kapital A sampai Z
  • .* : mencocokkan nol atau lebih karakter apa pun

Contoh penggunaan dalam JavaScript:

const input = "Hello world";
const regex = /.*[A-Z].*/;

if (regex.test(input)) {
  console.log("Input valid");
} else {
  console.log("Input tidak valid");
}

Output:

Input valid

Dalam contoh di atas, input “Hello world” mengandung setidaknya satu huruf kapital, sehingga dianggap valid oleh regex. Jika input tidak mengandung huruf kapital, maka regex akan mengembalikan nilai false dan dianggap tidak valid.

Mengandung tanda baca atau simbol tertentu

Untuk memvalidasi input yang harus mengandung tanda baca atau simbol tertentu, kita dapat menggunakan tanda kurung siku dan karakter yang ingin dicocokkan. Misalnya, untuk memvalidasi sebuah input yang harus mengandung setidaknya satu tanda baca atau simbol tertentu seperti !, @, atau #, kita dapat menggunakan regex berikut:

.*[!@#].*

Penjelasan:

  • .* : mencocokkan nol atau lebih karakter apa pun
  • [!@#] : mencocokkan salah satu karakter !, @, atau #
  • .* : mencocokkan nol atau lebih karakter apa pun

Contoh penggunaan dalam JavaScript:

const input = "Hello! How are you?";
const regex = /.*[!@#].*/;

if (regex.test(input)) {
  console.log("Input valid");
} else {
  console.log("Input tidak valid");
}

Output:

Input valid

Dalam contoh di atas, input “Hello! How are you?” mengandung tanda seru (!), sehingga dianggap valid oleh regex. Jika input tidak mengandung tanda baca atau simbol yang diinginkan, maka regex akan mengembalikan nilai false dan dianggap tidak valid.

Mengandung huruf besar, huruf kecil, tanda baca/simbol, minimal 8 karakter maksimal 50 karakter

Untuk memvalidasi input yang harus mengandung huruf besar, huruf kecil, tanda baca/simbol, minimal 8 karakter dan maksimal 50 karakter, kita dapat menggunakan regex berikut:

^(?=.*[a-z])(?=.*[A-Z])(?=.*[!@#$%^&*()_+-=])[a-zA-Z!@#$%^&*()_+-=]{8,50}$

Penjelasan:

  • ^ : Mencocokkan awal string
  • (?=.*[a-z]) : Setidaknya satu huruf kecil (menggunakan positive lookahead)
  • (?=.*[A-Z]) : Setidaknya satu huruf besar (menggunakan positive lookahead)
  • (?=.*[!@#$%^&*()_+-=]) : Setidaknya satu tanda baca atau simbol (menggunakan positive lookahead)
  • [a-zA-Z!@#$%^&*()_+-=]{8,50} : Karakter yang diizinkan dalam range huruf besar, huruf kecil, tanda baca/simbol sebanyak 8-50 karakter
  • $ : Mencocokkan akhir string

Contoh penggunaan dalam JavaScript:

const input = "Hello@123";
const regex = /^(?=.*[a-z])(?=.*[A-Z])(?=.*[!@#$%^&*()_+-=])[a-zA-Z!@#$%^&*()_+-=]{8,50}$/;

if (regex.test(input)) {
  console.log("Input valid");
} else {
  console.log("Input tidak valid");
}

Output:

Input valid

Dalam contoh di atas, input “Hello@123” memenuhi kriteria dengan memiliki huruf besar, huruf kecil, tanda baca/simbol, dan panjangnya di antara 8-50 karakter, sehingga dianggap valid oleh regex. Jika input tidak memenuhi kriteria, maka regex akan mengembalikan nilai false dan dianggap tidak valid.

Variabel, wajib huruf diawal, boleh mengandung huruf, tidak menggunakan tanda baca kecuali garis bawah

Untuk memvalidasi variabel yang harus diawali dengan huruf, boleh mengandung huruf, dan hanya menggunakan garis bawah sebagai tanda baca, kita dapat menggunakan regex berikut:

^[a-zA-Z][a-zA-Z_]*$

Penjelasan:

  • ^ : Mencocokkan awal string
  • [a-zA-Z] : Huruf kecil atau besar
  • [a-zA-Z_]* : Huruf kecil atau besar atau garis bawah, nol atau lebih kali
  • $ : Mencocokkan akhir string

Contoh penggunaan dalam JavaScript:

const input = "nama_variabel";
const regex = /^[a-zA-Z][a-zA-Z_]*$/;

if (regex.test(input)) {
  console.log("Variabel valid");
} else {
  console.log("Variabel tidak valid");
}

Output:

Variabel valid

Dalam contoh di atas, input “nama_variabel” memenuhi kriteria dengan diawali huruf dan hanya menggunakan huruf atau garis bawah sebagai tanda baca, sehingga dianggap valid oleh regex. Jika input tidak memenuhi kriteria, maka regex akan mengembalikan nilai false dan dianggap tidak valid.

untuk variabel, wajib huruf diawal, boleh mengandung huruf, tidak menggunakan tanda baca kecuali garis bawah serta boleh mengandung angka

Untuk memvalidasi variabel yang harus diawali dengan huruf, boleh mengandung huruf, dan hanya menggunakan garis bawah sebagai tanda baca, serta boleh mengandung angka, kita dapat menggunakan regex berikut:

^[a-zA-Z][a-zA-Z0-9_]*$

Penjelasan:

  • ^ : Mencocokkan awal string
  • [a-zA-Z] : Huruf kecil atau besar
  • [a-zA-Z0-9_]* : Huruf kecil atau besar atau garis bawah atau angka, nol atau lebih kali
  • $ : Mencocokkan akhir string

Contoh penggunaan dalam JavaScript:

const input = "nama_variabel_123";
const regex = /^[a-zA-Z][a-zA-Z0-9_]*$/;

if (regex.test(input)) {
  console.log("Variabel valid");
} else {
  console.log("Variabel tidak valid");
}

Output:

Variabel valid

Dalam contoh di atas, input “nama_variabel_123” memenuhi kriteria dengan diawali huruf, hanya menggunakan huruf atau garis bawah sebagai tanda baca, serta boleh mengandung angka, sehingga dianggap valid oleh regex. Jika input tidak memenuhi kriteria, maka regex akan mengembalikan nilai false dan dianggap tidak valid.

Regex untuk form input dilengkapi dengan penjelasan

Regex dapat digunakan untuk memvalidasi input pada form dengan cepat dan mudah. Berikut adalah contoh regex yang dapat digunakan untuk memvalidasi form input beserta penjelasannya:

  1. Validasi Email
^[\w-\.]+@([\w-]+\.)+[\w-]{2,4}$

Penjelasan:

  • ^ : Mencocokkan awal string
  • [\w-\.]+ : Karakter alfanumerik, garis bawah, atau titik, satu atau lebih kali
  • @ : Karakter at (@)
  • ([\w-]+\.)+ : Satu atau lebih dari satu grup karakter alfanumerik atau garis bawah, diikuti oleh tanda titik (.), yang diulangi satu atau lebih kali
  • [\w-]{2,4} : Dua sampai empat karakter alfanumerik atau garis bawah

Contoh penggunaan dalam JavaScript:

const input = "[email protected]";
const regex = /^[\w-\.]+@([\w-]+\.)+[\w-]{2,4}$/;

if (regex.test(input)) {
  console.log("Email valid");
} else {
  console.log("Email tidak valid");
}

Output:

Email valid

Dalam contoh di atas, input “[email protected]” memenuhi kriteria sebagai email, sehingga dianggap valid oleh regex. Jika input tidak memenuhi kriteria, maka regex akan mengembalikan nilai false dan dianggap tidak valid.

  1. Validasi Password
^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,50}$

Penjelasan:

  • ^ : Mencocokkan awal string
  • (?=.*[a-z]) : Setidaknya satu huruf kecil
  • (?=.*[A-Z]) : Setidaknya satu huruf besar
  • (?=.*\d) : Setidaknya satu angka
  • (?=.*[@$!%*?&]) : Setidaknya satu simbol dari karakter tertentu (@, $, !, %, *, ?, atau &)
  • [A-Za-z\d@$!%*?&]{8,50} : Karakter huruf besar, huruf kecil, angka, atau simbol yang diizinkan, dengan panjang antara 8 sampai 50 karakter
  • $ : Mencocokkan akhir string

Contoh penggunaan dalam JavaScript:

const input = "Password123@";
const regex = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,50}$/;

if (regex.test(input)) {
  console.log("Password valid");
} else {
  console.log("Password tidak valid");
}

Output:

Password valid

Dalam contoh di atas, input “Password123@” memenuhi kriteria sebagai password yang harus mengandung huruf besar, huruf kecil, angka, dan simbol tertentu, dengan panjang antara 8 sampai 50 karakter, sehingga dianggap valid oleh regex. Jika input tidak memenuhi kriteria, maka regex akan mengembalikan nilai `

Contoh penerapannya dalam HTML

Berikut ini adalah contoh kode HTML untuk form input biodata penulis yang lengkap dengan penggunaan regex:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Form Biodata Penulis</title>
  <script>
    function validate() {
      var nama = document.forms["biodata"]["nama"].value;
      var alamat = document.forms["biodata"]["alamat"].value;
      var tanggalLahir = document.forms["biodata"]["tanggal-lahir"].value;
      var jenisKelamin = document.forms["biodata"]["jenis-kelamin"].value;
      var pendidikanTerakhir = document.forms["biodata"]["pendidikan-terakhir"].value;
      var email = document.forms["biodata"]["email"].value;
      var nomorTelepon = document.forms["biodata"]["nomor-telepon"].value;
      var username = document.forms["biodata"]["username"].value;
      var password = document.forms["biodata"]["password"].value;

      var namaRegex = /^[a-zA-Z\s]{3,50}$/;
      var alamatRegex = /^.{10,100}$/;
      var emailRegex = /^([a-zA-Z0-9_\-\.]+)@([a-zA-Z0-9_\-\.]+)\.([a-zA-Z]{2,5})$/;
      var nomorTeleponRegex = /^[0-9]{10,12}$/;
      var usernameRegex = /^[a-zA-Z][a-zA-Z0-9_]{3,15}$/;
      var passwordRegex = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,50}$/;

      if (!nama.match(namaRegex)) {
        alert("Nama harus terdiri dari huruf saja dan minimal 3 karakter");
        return false;
      }

      if (!alamat.match(alamatRegex)) {
        alert("Alamat harus terdiri dari minimal 10 karakter");
        return false;
      }

      if (tanggalLahir == "") {
        alert("Tanggal Lahir harus diisi");
        return false;
      }

      if (jenisKelamin == "") {
        alert("Jenis Kelamin harus dipilih");
        return false;
      }

      if (pendidikanTerakhir == "") {
        alert("Pendidikan Terakhir harus dipilih");
        return false;
      }

      if (!email.match(emailRegex)) {
        alert("Format email tidak valid");
        return false;
      }

      if (!nomorTelepon.match(nomorTeleponRegex)) {
        alert("Nomor Telepon harus terdiri dari angka saja dan minimal 10 karakter");
        return false;
      }

      if (!username.match(usernameRegex)) {
        alert("Username harus terdiri dari huruf dan angka, dimulai dengan huruf, dan minimal 4 karakter");
        return false;
      }

      if (!password.match(passwordRegex)) {
        alert("Password harus terdiri dari huruf besar, huruf kecil, angka, simbol, dan minimal 8 karakter");
        return false;
      }

      return true;
    }
  </script>
</head>
<body>
  <h1>Form Biodata Penulis</h1>
  <form name="biodata" action="" method="post" onsubmit="return validate()">
    <label for="nama">Nama Lengkap:</label>
    <input type="text" id="nama" name="nama" required minlength="3"
    <br><br>

    <label for="alamat">Alamat:</label>
    <textarea id="alamat" name="alamat" rows="4" cols="50" required></textarea>
    <br><br>

    <label for="tanggal-lahir">Tanggal Lahir:</label>
    <input type="date" id="tanggal-lahir" name="tanggal-lahir" required>
    <br><br>

    <label for="jenis-kelamin">Jenis Kelamin:</label>
    <input type="radio" id="pria" name="jenis-kelamin" value="pria" required>
    <label for="pria">Pria</label>
    <input type="radio" id="wanita" name="jenis-kelamin" value="wanita" required>
    <label for="wanita">Wanita</label>
    <br><br>

    <label for="pendidikan-terakhir">Pendidikan Terakhir:</label>
    <select id="pendidikan-terakhir" name="pendidikan-terakhir" required>
      <option value="">--Pilih Pendidikan Terakhir--</option>
      <option value="sd">SD</option>
      <option value="smp">SMP</option>
      <option value="sma">SMA</option>
      <option value="d3">D3</option>
      <option value="s1">S1</option>
      <option value="s2">S2</option>
      <option value="s3">S3</option>
    </select>
    <br><br>

    <label for="email">Email:</label>
    <input type="email" id="email" name="email" required>
    <br><br>

    <label for="nomor-telepon">Nomor Telepon:</label>
    <input type="text" id="nomor-telepon" name="nomor-telepon" required>
    <br><br>

    <label for="username">Username:</label>
    <input type="text" id="username" name="username" required>
    <br><br>

    <label for="password">Password:</label>
    <input type="password" id="password" name="password" required>
    <br><br>

    <input type="submit" value="Submit">
  </form>
</body>
</html>

Pada kode di atas, kita menggunakan regex untuk memvalidasi input dari beberapa field seperti Nama, Alamat, Email, Nomor Telepon, Username, dan Password. Setiap field memiliki regex yang berbeda tergantung pada karakter yang diizinkan dan jumlah minimal karakter yang dibutuhkan. Kita juga menggunakan required pada tiap-tiap field agar user tidak bisa mengirimkan form jika terdapat field yang belum diisi. Sedangkan untuk form tanggal lahir, jenis kelamin, dan pendidikan terakhir kita menggunakan required pada tag select dan radio button agar user harus memilih salah satu opsi yang tersedia. Selain itu, kita juga menambahkan function validate() pada tag form untuk memvalidasi input sebelum data dikirimkan. Jika terdapat input yang tidak valid, maka akan muncul alert message dan data tidak akan terkirim.

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *