Javascript Regex

Javascript Regex Anlama: Yaygın Görüntü Adı Doğrulama Sorunlarını Düzeltme

Web geliştirmeye yeni adım attıysanız, Javascript’teki regex (düzenli ifadeler) ile başa çıkmakta zorlanabilirsiniz. Kullanım alanlarından biri, kayıt sırasında görüntü adı gibi kullanıcı girişlerini doğrulamaktır. Bu blog yazısında, belirli bir sorunu ele alıyoruz: görüntü adını sadece harfler, sayılar ve alt çizgilerle doğru bir şekilde doğrulamak.

Mevcut Sorun

Bir kayıt formu oluştururken, görüntü adının belirli kriterlere uymasını sağlamak kritik öneme sahiptir. Bu amaca ulaşması hedeflenen bir kod parçası şöyle görünüyordu:

<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("Görüntü adınız yalnızca harfler, sayılar ve alt çizgiler içerebilir");
            return false;
        }
    }
</script>

En iyi niyetlere rağmen, bu kod görüntü adını doğru bir şekilde kısıtlamadı. Bunun nedenini ve nasıl düzeltebileceğimizi keşfedelim.

Regex Sorununun Analizi

Mevcut Regex Açıklaması

Kullanılan mevcut regex: /^([a-zA-Z0-9_])+

İşte ne yaptığı:

  1. Başlar (^): Desen, dizesinin başlangıcı ile başlar.
  2. Eşleşir (([a-zA-Z0-9_])+): Bir veya daha fazla harf (her iki durum), sayı veya alt çizgi arar.

Bu mantık mantıklı görünse de, sorun, regex’in ilk eşleşmeden sonra gelenleri doğrulamamasında yatmaktadır. Geçerli bir başlangıç dizisinden sonra tüm karakterlere izin vererek beklenmeyen sonuçlar doğuracaktır.

Çözüm: Regex’i Değiştirmek

Amaç, tam dizede geçerli karakterlerin bulunduğundan emin olmaktır. Bunu başarmak için regex’i şu kriterleri zorunlu kılacak şekilde ayarlamamız gerekiyor:

  • Geçerli bir karakterle başlamalıdır.
  • Geçerli bir karakterin hemen ardından bitmeli, başka bir şeye izin verilmemelidir.

Değiştirilmiş regex şöyle görünmelidir:

/^([a-zA-Z0-9_]+)$/
  • Eklendi ($): Sonunda yer alan dolar işareti, dize sonunu karşılar. Bu ekleme, yalnızca harfler, sayılar veya alt çizgilerin tüm dize boyunca izin verilenler olduğunu doğrular.

Kodu İyileştirmek: Daha Sağlam Bir Yaklaşım

Form Elemanlarına Erişim

Ayrıca, mevcut kod document.forms kullanıyorsa, giriş alanına doğrudan ID’siyle erişmek daha standart ve güvenilir bir yöntemdir. Bu, HTML yapınızı değiştirirseniz kodunuzu daha temiz ve sorunlara daha az eğilimli hale getirebilir.

check_form fonksiyonunu yeniden yapılandırmanın bir yolu şöyle olabilir:

function check_form() {
    var displayName = document.getElementById('display-name').value;
    if (!name_regex.test(displayName)) {
        document.getElementById('display-name').focus();
        alert("Görüntü adınız yalnızca harfler, sayılar ve alt çizgiler içerebilir");
        return false;
    }
}

Sonuç

Kullanıcı girişlerinin geçerli olmasını sağlamak, web geliştirme açısından çok önemlidir. Regex’inizde ve form elemanlarına erişim şeklinizde sadece birkaç ayarlama yaparak kayıt formlarınızı önemli ölçüde geliştirebilirsiniz. Gözden geçirilmiş regex deseni /^([a-zA-Z0-9_]+)$/ ve document.getElementById kullanarak, uygulamanız daha güvenilir ve kullanıcı dostu olacaktır.

Bu bilgiyle donanmış olarak, Javascript’i ustalaştırma yolunda bir adım daha atmış oldunuz ve kullanıcılara daha akıcı bir kayıt deneyimi sunmuş oldunuz. Mutlu kodlamalar!