Tasarım, yazılım ve işletme üzerine bir takım yazılar Defocuyu takip etmek isteyenlere, RSS - Friendfeed İletişim için Form


Formlarınızı Sadece Sayı Girilebilir Yapmak

Bir uygulama yaptığınızı düşünün, ekranda sadece bir textbox ve buton var. Uygulamayı kullanan kişi o gün işe geç kalanların TC Kimlik Numaralarını ilgili alana yazıp, "Kaydet" butonuna basarak sisteme kaydediyor.

Textbox'a sadece rakamlar girilmesi gereken böyle basit bir sistemde, araya yanlışlıkla yazılan bir harf kullanıcının canını sıkabilir. Bugün bunu nasıl engelleyeceğimizi öğreneceğiz. (Örnek Dosyayı İndir)

1- İşimizi görecek dosya aşağıda bunu "numeric.js" ismiyle kaydedelim.

JavaScript:
  1. function ForceNumbersOnly(myfield, e, dec){
  2.       var key;
  3.       var keychar;</span></span>
  4.  
  5.       if (window.event){
  6.       key = window.event.keyCode;
  7.       }
  8.  
  9.       else if (e){
  10.       key = e.which;
  11.       }
  12.  
  13.       else{
  14.       return true;
  15.       }
  16.  
  17.       if(key != 46 && key != 45 && key> 31 && (key <48 || key> 57)){
  18.       return false;
  19.       }
  20.  
  21.       else{
  22.       return true;
  23.       }
  24.       }
  25.  
  26.       function RemoveNonNumeric(myfield){
  27.       var re = /[^0-9\.\-]/g;
  28.  
  29.       if(re.test(myfield.value)){
  30.       myfield.value = myfield.value.replace(re, '');
  31.       myfield.value = myfield.value.replace(/\./, '');
  32.       }
  33.       }

2- Sonrasında bu dosyayı formumuzun bulunduğu ilgili sayfaya yükleyelim.

JavaScript:
  1. <script src="numeric.js" type="text/javascript"></script>

3- Harf onaylamasını yapan fonksiyonu etiketinin tam önüne yerleştiriyoruz.

JavaScript:
  1. <script type="text/jscript">
  2. function ValidateNumber(num){
  3.         return num.match(/^\d+$/);
  4. }
  5. </script>

4- Son olarak harf maskelemesi yapacağımız textbox'a aşağıdaki kodları ekliyoruz.

HTML:
  1. <input type="text" name="tckimlikno" maxlength="11" onkeypress= "return(ForceNumbersOnly(this, event));" onchange="RemoveNonNumeric(this)"/>


Ekim 22nd, 2008 Etiketler: , , ,
| Kategori: Programlama Yazar: abdullah


Yorum Paneli





  • 1
  • ...
  • ...
  • 0