Javascript Regex

Memahami Regex Javascript: Memperbaiki Masalah Umum Validasi Nama Tampilan

Jika Anda baru-baru ini terjun ke dalam pengembangan web, Anda mungkin mendapati diri Anda berurusan dengan regex (ekspresi reguler) di Javascript. Salah satu penggunaan umum adalah untuk memvalidasi input pengguna, seperti nama tampilan saat pendaftaran. Dalam posting blog ini, kami membahas masalah tertentu: bagaimana memvalidasi nama tampilan dengan benar untuk hanya mengizinkan huruf, angka, dan garis bawah.

Masalah yang Dihadapi

Saat membuat formulir pendaftaran, sangat penting untuk memastikan bahwa nama tampilan mematuhi kriteria tertentu. Berikut adalah cuplikan kode yang dimaksudkan untuk mencapai tujuan ini:

<form method="post" action="/" onsubmit="return check_form()">
    <input type="text" id="display-name" name="display-name" maxlength="255" />
    <input type="submit" />
</form>
<script type="text/javascript">
    var name_regex = /^([a-zA-Z0-9_])+/;

    function check_form() {
        if (!name_regex.test(document.forms[0].elements[0].value)) {
            document.forms[0].elements[0].focus();
            alert("Nama tampilan Anda hanya boleh mengandung huruf, angka, dan garis bawah");
            return false;
        }
    }
</script>

Meskipun dengan niat terbaik, kode ini gagal membatasi nama tampilan dengan benar. Mari kita eksplorasi mengapa hal ini terjadi dan bagaimana cara memperbaikinya.

Menguraikan Masalah Regex

Penjelasan Regex Saat Ini

Regex yang digunakan saat ini adalah: /^([a-zA-Z0-9_])+

Berikut adalah apa yang dilakukannya:

  1. Dimulai dengan (^): Pola mulai dari awal string.
  2. Mencocokkan (([a-zA-Z0-9_])+): Memeriksa satu atau lebih huruf (kedua kasus), angka, atau garis bawah.

Meskipun logika ini tampak masuk akal, masalahnya terletak pada fakta bahwa regex tidak memverifikasi apa yang terjadi setelah kecocokan awal. Ini akan mengizinkan karakter apa pun setelah urutan awal yang valid, yang mengarah ke hasil yang tidak terduga.

Solusi: Memodifikasi Regex

Tujuannya adalah untuk memastikan bahwa seluruh string terdiri dari karakter yang valid. Untuk mencapai ini, kita perlu menyesuaikan regex untuk menegakkan kriteria berikut:

  • Harus dimulai dengan karakter yang valid.
  • Harus diakhiri tepat setelah karakter yang valid, yang tidak mengizinkan apa pun yang lain.

Regex yang dimodifikasi harus terlihat seperti ini:

/^([a-zA-Z0-9_]+)$/
  • Ditambahkan ($): Tanda dolar di akhir mencocokkan akhir string. Penambahan ini memastikan bahwa hanya huruf, angka, atau garis bawah yang diperbolehkan di sepanjang string.

Meningkatkan Kode: Pendekatan yang Lebih Kuat

Mengakses Elemen Formulir

Selain itu, meskipun kode saat ini menggunakan document.forms, cara yang lebih standar dan andal adalah dengan langsung mengakses input berdasarkan ID-nya. Ini bisa membuat kode Anda lebih bersih dan kurang rentan terhadap masalah jika Anda memutuskan untuk mengubah struktur HTML Anda.

Berikut adalah cara Anda dapat merubahan fungsi check_form:

function check_form() {
    var displayName = document.getElementById('display-name').value;
    if (!name_regex.test(displayName)) {
        document.getElementById('display-name').focus();
        alert("Nama tampilan Anda hanya boleh mengandung huruf, angka, dan garis bawah");
        return false;
    }
}

Kesimpulan

Memastikan bahwa input pengguna valid adalah hal yang sangat penting dalam pengembangan web. Dengan hanya beberapa penyesuaian pada regex Anda dan cara Anda mengakses elemen formulir, Anda dapat meningkatkan formulir pendaftaran Anda secara signifikan. Dengan mengadopsi pola regex yang direvisi /^([a-zA-Z0-9_]+)$/ dan menggunakan document.getElementById, aplikasi Anda akan lebih andal dan ramah pengguna.

Dengan pengetahuan ini, Anda satu langkah lebih dekat untuk menguasai Javascript dan memberikan pengalaman pendaftaran yang lebih lancar kepada pengguna. Selamat coding!