İçindekilerGirişİndex
YukarıİlkÖncekiSonrakiSon
Geriİleri
Yazdır
Zafer Teker
tekzaf@yahoo.com

Bir Yazı Alanın Yazı Girilmesi Sırasında Doğrulanması

Giriş

Bu örnekte bir yazı alanına kullanıcı bir değer girmeye başladığında her karekter girişinde girilen değerin doğru olup olmadığını kontrol ediyoruz. Kullanıcı 0 dan 100 kadar sayılar girmek zorunda. Aksi takdirde text alanında ki yazı kırmızı görülmektedir. Örneğin kullanıcı bir harf işaretine basarsa tüm yazı kırmızı olacaktır. Burada önemli olan yazı yazılması sırasında kontrol etmemizdir.

Göster Gizle Kopar Satır Gizle Satır Göster
  1 <html>
  2  <head>
  3 	<script language="JavaScript">
  4 		function valid(){
  5 			var textObj=document.test.testText;
  6 			var textValue=textObj.value;
  7 			if(!isNaN(textValue)){
  8 				if(textValue>=0&&textValue<=100){
  9 					textObj.style.color="black";
 10 				}else{
 11 					textObj.style.color="red";	
 12 				}
 13 			}else{
 14 				textObj.style.color="red";
 15 			}
 16 		}		        
 17     </script> 	
 18  </head>
 19  <body>
 20  	<p>Text Alanına 0 veya 0'dan büyük,100 ve 100'den küçük bir sayı yazılmazsa yazılanlar kırmızı olmaktadır.
 21  	<form name="test">
 22 		Yüzde Gir: <input type="text" name="testText" size="5" onKeyUp="valid()">
 23 	</form>
 24  </body>
 25 </html>

Kodun Açıklanması

Dökümanımızda test adında bir form ve testText adında da bir text alanımız bulunmaktadır. Text alanının onKeyUp event'i ile her karekter girildikten sonra (bir key basılıp kaldırıldıktan sonra) valid() fonksiyonu çağrılmaktadır. valid() fonsiyonu önce text alanını ve onun değerini değişkenlere atamaktadır.

var textObj=document.test.testText;
var textValue=textObj.value;

document.test.testText dokümanımızın test adı elemanının (yani form elementi) test Text elemenını vermektedir. Daha sonra bu elemenın değeri .value özelliği ile textValue değişkenine atanmaktadır. Text yazısına girilen değeri elde ettikten sonra artık girilen değerin doğru mu yanlış mı olduğunu kontrol edebiliriz.

Değerin Kontrolü

JavaScript ile Style değiştirme

ie 5 ve netscape 6 bir nesnenin style'ını değiştirmemiz için JavaScript'te bir imkan sağlamaktadır. nesne.style ile bir nesnenin css'de kullanılan tüm stillerini değiştirebilirsiniz. Örneğin nesne.style.background ile nesnenin background'unu değiştirebilirsiniz.

İlk önce girilen değerin sayı olup olmadığını anlamamız gerekir. JavaScript'te isNaN() fonksiyonu paramete olarak verilen değerin sayı mı değil mi olduğunu anlamaktadır. NaN (Not a Number anlamıdadır.) Eğer girilen değer sayı değilse true, Sayı ise false göndermektedir. Eğer girilen değer sayı değilse textObject.style.color ile text alanının rengi kırmızı yapılmaktadır.( Bir nesnenin styl'ının nasıl değiştirileceği sağdaki kutuda anlatılmaktadır.) Eğer sayı ise bu sayının 0 ie 100 arasında olup olmadığı anlaşılmalıdır (0 ve 100 dahildir.) Eğer 100 ve 100'den küçük ve 0 veya 0'dan büyükse rengini siyah yapıyoruz. (yani doğru renk). Değilse kırmızı yapıyoruz.

Geliştirme

Sadece text alanı değil text area, password gibi yazı girilen (onKeyUp olayını destekleyen) elemanlar için de bu kontrolü uygulayabilirsiniz. Eğer birden fazla eleman kontrol etmek istiyorsanız yukarıdaki kod uygun değildir. Çünkü valid fonksiyonu hangi elemanı kontrol edeceğini bilemez. Bunun için valid fonsiyonunu çağırırken paremetre olarak elemanın adını girebilirsiniz. Elemanın adını aldıktan sonra textObject nesnesini bu ada göre uygun oluşturabilirsiniz. Bunu için valid fonksiyonunda aşağıdaki değişikliği yapmalısınız:

function valid(elementName){
	var textObject=eval("document.test"+elementName);
	....
}

eval fonksiyonu bir string'i JavaScript komutuna çevirmektedir. Yani eval sonucunda siz document.test.testText (Eğer testText gönderilen ad ise) satırını üretmiş olursunuz.

Dosya Listesi

İçindekilerGirişİndex
YukarıİlkÖncekiSonrakiSon
Geriİleri
Yazdır