Her web geliştiricisi şu duyguyu bilir: Bir form oluşturdunuz ve şimdi her alanı doğrulamanız gerektiğini fark ettiğinizde bir inilti bıraktınız.

Neyse ki, form doğrulamanın acı verici olması gerekmiyor. Birçok yaygın doğrulama gereksinimini işlemek için normal ifadeler kullanabilirsiniz.

Normal İfadeler Nelerdir?

Normal ifadeler, dizelerdeki karakter kombinasyonlarıyla eşleşen kalıpları tanımlar. Bunları "yalnızca sayılar" veya "tam olarak beş büyük harf" gibi kavramları temsil etmek için kullanabilirsiniz.

Normal ifadeler (regex olarak da adlandırılır) güçlü araçlardır. Dizeler üzerinde gelişmiş arama, bul ve değiştir ve doğrulama işlemleri de dahil olmak üzere birçok kullanımları vardır. Düzenli ifadelerin ünlü bir uygulaması, Linux'ta grep komutu.

Doğrulama için Neden Normal İfadeler Kullanılır?

Çok var form girişini doğrulamanın yolları, ancak normal ifadeler basit, hızlı ve nasıl olduğunu anlıyorsanız kullanımı kolaydır.

JavaScript, normal ifadeler için yerel desteğe sahiptir. Bu, harici bir kitaplığın aksine bunları doğrulama için kullanmanın web uygulamanızın boyutunu olabildiğince küçük tutmanıza yardımcı olduğu anlamına gelir.

instagram viewer

Normal ifadeler ayrıca birçok form girdisi türünü doğrulama yeteneğine sahiptir.

Normal İfadelerin Temelleri

Normal ifadeler, bir dizedeki karakterlerin oluşturduğu kalıpları tanımlayan sembollerden oluşur. JavaScript'te, iki eğik çizgi arasına yazarak bir normal ifade değişmezi oluşturabilirsiniz. Normal ifadenin en basit biçimi şöyle görünür:

/abc/

Yukarıdaki normal ifade, sırayla "a", "b" ve "c" karakterlerini içeren herhangi bir dizeyle eşleşir. "abc" dizesi, bu normal ifadeyle ve "abcdef" gibi bir dizeyle eşleşir.

Normal ifadelerinizde özel karakterler kullanarak daha gelişmiş kalıpları tanımlayabilirsiniz. Özel karakterler, gerçek bir karakteri temsil etmez, ancak normal ifadenizi daha anlamlı hale getirir.

Bunları, kalıbın bir bölümünün belirli sayıda yinelenmesi gerektiğini belirtmek veya kalıbın bir kısmının isteğe bağlı olduğunu belirtmek için kullanabilirsiniz.

Özel bir karakter örneği "*" dir. "*" karakteri, kendisinden önce gelen tek bir karakteri veya bir karakter grubunu değiştirir. Bu karakterlerin bulunmadığını veya arka arkaya herhangi bir sayıda tekrar edebileceğini bildirir. Örneğin:

/abc*/

"ab" ve ardından herhangi bir sayıda "c" karakteriyle eşleşir. "c" karakteri isteğe bağlı olduğundan, "ab" dizesi bu kalıbın geçerli bir örneğidir. "abc" ve "abccccc" dizeleri eşit derecede geçerlidir, çünkü "*", "c"nin herhangi bir sayıda tekrarlayabileceği anlamına gelir.

Tam regex sözdizimi, olası eşleşmeleri açıklamak için birkaç kalıp karakteri daha kullanır. Daha fazlasını şuradan öğrenebilirsiniz: regexlearn.com'un Regex 101'i interaktif kurs. MDN'nin JavaScript kılavuzu ayrıca çok kullanışlıdır.

Normal İfadelerle Form Doğrulama

Form girişini birkaç şekilde doğrulamak için normal ifadeyi kullanabilirsiniz. İlk yol JavaScript kullanmaktır. Birkaç adımı içerir:

  1. Form girişinin değerini alın.
  2. Giriş değerinin normal ifadeyle eşleşip eşleşmediğini kontrol edin.
  3. Aksi takdirde, web sitesinin kullanıcısına giriş alanının değerinin geçersiz olduğunu gösterin.

İşte kısa bir örnek. Bunun gibi bir giriş alanı verildiğinde:

<giriş yer tutucusu="Giriş alanı">

Bunu doğrulamak için şöyle bir fonksiyon yazabilirsiniz:

işlevdoğrulamak() {
İzin Vermek değer = belge.querySelector("giriş").değer;
const normal İfade = /^.{3,7}$/;
dönüş regEx.test (değer);
}

Başka bir yol, tarayıcının HTML form doğrulama özelliklerinden yararlanmaktır. Nasıl? HTML giriş etiketinin model özelliğinin değeri olarak regex belirterek.

Model niteliği yalnızca şu giriş türleri için geçerlidir: metin, tel, e-posta, url, şifre ve arama.

Model niteliğini kullanan bir örnek:

<biçim>
<giriş yer tutucusu="Giriş alanı" gerekli desen="/^.{3,7}$/">
<buton>Göndermek</button>
</form>

Formu gönderirseniz ve girdinin değeri tüm normal ifadeyle eşleşmiyorsa, form şuna benzeyen bir varsayılan hata görüntüler:

Model özniteliğine sağlanan normal ifade geçersizse, tarayıcı özniteliği yok sayar.

Form Doğrulaması için Ortak Regex Kalıpları

Normal ifadeyi sıfırdan oluşturmak ve hatalarını ayıklamak biraz zaman alabilir. En yaygın form verisi türlerinden bazılarını doğrulamak için kullanabileceğiniz bazı normal ifade ifadeleri aşağıda verilmiştir.

Dize Uzunluğunu Doğrulamak için Normal İfade

En yaygın doğrulama gereksinimlerinden biri, bir dizenin uzunluğunun kısıtlanmasıdır. Yedi karakterli bir dizeyle eşleşen normal ifade şudur:

/^.{7}$/

"." herhangi bir karakterle eşleşen bir yer tutucudur ve küme parantezindeki "7", dizenin uzunluk sınırını belirtir. Dizenin belirli bir uzunluk aralığında, örneğin üç ile yedi arasında olması gerekiyorsa, bunun yerine normal ifade şöyle görünür:

/^.{3,7}$/

Ve dizgenin en az üç karakter uzunluğunda olması ve üst sınırı olmaması gerekiyorsa, şöyle görünür:

/^.{3,}$/

Bir form girişi için tek doğrulama gereksiniminin uzunluk olması pek olası değildir. Ancak bunu genellikle diğer koşullar da dahil olmak üzere daha karmaşık bir normal ifadenin parçası olarak kullanacaksınız.

Yalnızca Harf Alanlarını Doğrulamak için Normal İfade

Bazı form girişlerinin geçerli olması için harflerden başka bir şey içermemesi gerekir. Aşağıdaki normal ifade yalnızca bu tür dizelerle eşleşir:

/^[a-zA-Z]+$/

Bu normal ifade, tüm alfabeden oluşan bir karakter kümesini belirtir. "+" özel karakteri, önceki karakterin üst sınır olmaksızın en az bir kez geçmesi gerektiği anlamına gelir.

Yalnızca Sayı Alanlarını Doğrulamak için Normal İfade

Aşağıdaki normal ifade yalnızca tamamen rakamlardan oluşan dizelerle eşleşir:

/^\d+$/

Yukarıdaki normal ifade, esasen öncekiyle aynıdır. Tek fark, rakam aralığını yazmak yerine temsil etmek için özel bir "\d" karakteri kullanmasıdır.

Alfanümerik Alanları Doğrulamak için Normal İfade

Normal ifadeler, alfasayısal alanları doğrulamayı da kolaylaştırır. İşte yalnızca harf ve rakamlardan oluşan dizelerle eşleşecek bir normal ifade:

/^[a-zA-Z\d]+$/

Bazı alanlar alfasayısaldır, ancak kısa çizgi ve alt çizgi gibi birkaç karaktere daha izin verir. Bu tür alanlara bir örnek, bir kullanıcı adıdır. Aşağıda harflerden, rakamlardan, alt çizgilerden ve kısa çizgilerden oluşan bir dizeyle eşleşen normal bir ifade yer almaktadır:

/^(\w|-)+$/

"\w" özel karakteri, "\d"nin yaptığı gibi tüm bir karakter sınıfıyla eşleşir. Alfabenin, rakamların ve alt çizgi karakterinin ("_") aralığını temsil eder.

Telefon Numaralarını Doğrulamak için Normal İfade

Farklı ülkeler farklı biçimler kullandığından, bir telefon numarasının doğrulanması karmaşık bir alan olabilir. Çok genel bir yaklaşım, dizenin yalnızca rakamlar içermesini ve uzunluğunun belirli bir aralıkta olmasını sağlamaktır:

/^\d{9,15}$/

Daha sofistike bir yaklaşım, şundan alınmış gibi görünebilir: MDN, telefon numaralarını ###-###-#### biçiminde doğrular:

/^(?:\d{3}|\(\d{3}\))([-\/\.])\d{3}\1\d{4}$/

Tarihleri ​​Doğrulamak için Normal İfade

Telefon numaraları gibi, tarihlerin de birden çok biçimi olabilir. Tarihleri ​​doğrulamak genellikle telefon numaralarından daha az karmaşıktır. Neden? Niye? Tarihler, rakamlardan ve kısa çizgilerden başka karakter içermez.

İşte "GG-AA-YYYY" biçiminin tarihlerini doğrulayacak bir örnek.

/^\d{2}-\d{2}-\d{4}$/

Regex ile Doğrulama Kolaydır

Normal ifadeler, dizelerdeki karakter kombinasyonlarıyla eşleşen kalıpları tanımlar. HTML formlarından kullanıcı girdisini doğrulama gibi çeşitli uygulamaları vardır.

JavaScript ile veya HTML kalıbı özniteliği aracılığıyla doğrulamak için normal ifadeyi kullanabilirsiniz. Tarihler ve kullanıcı adları gibi yaygın form girdisi türlerini doğrulamak için normal ifadeler oluşturmak kolaydır.