RSV İle Form Verilerinizi Doğrulayın

RSV İle Form Verilerinizi Doğrulayın

Web tasarım ve programlama ile uğraşıyorsanız formdan gelen bilgileri kontrol etme ihtiyacı doğuyor çoğu zaman. Bu kontrolü bazen formdaki verileri göndermeden Javascript ile, bazende formdaki verileri gönderdiğimiz sayfada kullandığımız programlama dili ile (Php, Asp vs.) yaparız. Bu yazımda Javascript ile yazılmış bir betik olan RSV (Really Simple Validation)‘den bahsedeceğim.

RSV, çok az çaba ile formlarınıza Javascript doğrulaması ekleyebileceğiniz küçük ama bir o kadar da güçlü bir betik. Güncel sürümü 2.5 olan RSV’nin Jquery plugini, Prototype eklentisi veya herhangi bir Javascript kütüphanesine bağımlı olmaksızın bağımsız olarak kullanabileceğiniz farklı versiyonları bulunuyor.

Kullanımı isminden de anlaşılacağı üzere oldukça kolay. Sitenizin html bölümüne dokunmadan <head> bölümüne  yazacağınız kodlarla kullanabiliyorsunuz. Bu sayede html/xhtml standartlarında uygunluk problemi yaşanmıyor. Zira bu tür bazı betikler form elemanlarına farklı kodlar ekleme zorunluluğundan dolayı standart dışı kodlamalar yapmanıza sebep oluyor.

Betik kendi içerisinde bir çok doğrulama kuralı içeriyor. Bunları sıralamak gerekirse

  • required : Seçilen alanın boş olmamasını gerektirir.
  • digits_only : Seçilen alanın rakamlarla doldurulmasını gerektirir.
  • length : Bu kural ile form alanında kullanılacak karakter sayısını ayarlayabilirsiniz. Örneğin length=X-Y: alan X ile Y karakter arasında doldurulmuş olmalı, length>=X : alan X veya daha fazla karakter ile doldurulmuş olmalı, length<X : alan X karakterden daha az doldurulmuş olmalı
  • valid_email : Seçilen alanın doğru bir e-posta adresi olmasını gerektirir.
  • valid_date : Seçilen alanın geçerli bir tarih olmasını gerektirir. Bu kural formdaki 3 ayrı bölümü birleştirerek  sırasıyla alan1: AY, alan2: GÜN, alan3: YIL olarak kontrol ediyor. Tarih kontrol ederken date_flag sayesinde ileri bir tarih veya herhangi bir tarih olarak belirleyebiliyorsunuz (later_date: ileri tarih, any_date: herhangi bir tarih).
  • same_as : Seçilen 2 alanın aynı içeriğe sahip olmasını gerektirir. Örneğin şifre doğrulaması için kullanabilirsiniz.
  • range : Belirli sayı aralıklarında veri olmasını gerektirir. Örneğin range=X-Y : alan X ile Y arasında bir sayı ile doldurulmuş olmalı, range>=X : alan X’e eşit veya büyük bir sayı ile doldurulmuş olmalı, range<X : alan X’ten küçük bir sayı ile doldurulmuş olmalı.
  • is_alpha : Seçili alanın alfanümerik olarak doldurulmasını gerektirir. (0-9, a-Z arasında)
  • custom_alpha : Bu seçenek, seçili alanın yazacağınız formatta reg_exp (düzenli ifadeler) kurallarına göre kontrolünü sağlıyor.
  • reg_exp : Programcılar için öngörülmüş bir kuraldır. Seçilen alanı regular expression (Düzenli ifadeler) kurallarına göre özelleştirerek doğrulamanızı sağlar.
  • letters_only : Seçili alanın sadece harflerle doldurulmasını gerektirir.
  • function : Bu seçenek programcılar için dahil edilmiştir. Yukarıda belirtilenlerden farklı bir doğrulama ihtiyacı duyuyorsanız function özelliğini kullanabilirsiniz. (Örnek function)

Bunun yanı sıra bilgiler yanlış doldurulduğunda kullanıcıya verilecek uyarı mesajını alert-one seçeneği ile javascript uyarısı olarak (varsayılan hata mesajı bu şekildedir) veya display-html ile belirlediğiniz bir div etiketinde html olarak ayarlayabilirsiniz.

Şimdi bu bilgiler ışığında örnek bir iletişim formu yapalım. Ben jquery pluginini kullanarak Javascript uyarısı verecek şekilde yapıyorum. Siz istediğiniz sürümü kullanabilirsiniz. Ayrıca display-html yöntemi ile html olarak uyarı vermek isterseniz gerekli css kodlarını da eklemeniz gerekiyor. Buradan Jquery ile buradan jquery.rsv.js dosyalarını indirdikten ve bir text editör ile formu oluşturduktan sonra yapmanız gereken  <head></head> etiketleri arasına aşağıdaki gibi bir kod yazmak.

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.rsv.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#form2" ).RSV({
rules: [
"required,adsoyad,Lütefen adınızı ve soyadınızı giriniz.",
"required,konu,Lütfen konuyu belirtiniz.",
"required,mesaj,Lütfen mesajınızı yazınız.",
"digits_only,telefon,Lütfen geçerli bir telefon numarası giriniz.",
"required,eposta,Lütfen E-Posta adresinizi giriniz.",
"valid_email,eposta,Lütfen geçerli bir eposta adresi giriniz."

]
});
});    </script>

Yazdığımız kodu açıklayacak olursak;

<script type="text/javascript" src="jquery.js"></script><script type="text/javascript" src="jquery.rsv.js"></script>

Burada Jquery kütüphanesini ve gerekli RSV Javascript dosyasını sayfamıza ekliyoruz.

<script type="text/javascript">
$(document).ready(function() {
$("#form2" ).RSV({
rules: [
"required,adsoyad,Lütefen adınızı ve soyadınızı giriniz.",
"required,konu,Lütfen konuyu belirtiniz.",
"required,mesaj,Lütfen mesajınızı yazınız.",
"digits_only,telefon,Lütfen geçerli bir telefon numarası giriniz.",
"required,eposta,Lütfen E-Posta adresinizi giriniz.",
"valid_email,eposta,Lütfen geçerli bir eposta adresi giriniz."

]
});
});    </script>

Burada ise gerekli kurallarımızı oluşturuyoruz. Görüldüğü üzere required ile adsoyad, konu , mesaj ve eposta alanlarını zorunlu kıldık. Ayrıca telefon alanına bilgi girilmesi halinde digits_only ile sadece rakamlardan oluşup oluşmadığını ve valid_email ile girilen e-postanın geçerli olup olmadığını kontrol ettik. Dikkat ederseniz telefon alanı zorunlu değil ama herhangi bir veri girilmesi halinde rakam olup olmadığını kontrol ediyoruz. Kodlarımızın bu bölümünü kendi ihtiyaçlarımız doğrultusunda düzenleyerek form verilerimizi kontrol edebiliriz. Oluşturduğumuz bu örneği buradan online olarak test edebilir, buradan bilgisayarınıza indirebilirsiniz.

Really Simple Validation (RSV) betiği hakkında daha fazla bilgi almak için sitesini ziyaret edebilirsiniz.

Really Simple Validation (RSV) ile yapılmış örnekler (Jquery).

Bu yazı en son 06 Eylül 2011 tarihinde düzenlenmiştir ve güncelliğini yitirmiş olabilir.

blog comments powered by Disqus

© Mustafa Navruz 2011 0.0330 sn.

^ Başa Dön