Form Alanına Yalnızca Sayısal Değer Girişi Sağlama

by A.Gökhan, M.Sc. | Nisan 23 01:29

Geliştirdiğimiz web projelerinde form alanlarını sıklıkla kullanırız. Bu alanlar her zaman standart bir şekilde veri girişi için kullanılmaz. Örneğin üyelik kaydı yapılacak bir form alanında kullanıcıdan e-mail adresi girmesini istediğimiz alana e-mail doğrulama özelliği ekleriz. Kredi kartı bilgilerini girdiği alana ise yalnızca sayısal veri girmesi bir ön kontrol ve filtreleme gibi iş görecektir. Üye olan bir kullanıcının şifre bilgilerini type=”password” olan bir textfield, diğer bir deyişle metin alanı içerisinde alabilmeyi isteriz.

Buradan hareketle bu bölümde, içerisine yalnızca sayısal veri girişi olmasını istediğimiz ve bu amaçla ön kontrol yapacağımız bir JavaScript kodu yazacağız. Öncelikle form alanını oluşturalım:

<input name="" type="text" onChange="isNumeric(this)" />

1	<input name="" type="text" onChange="isNumeric(this)" />

Yukarıda gördüğümüz HTML kodları, bir metin alanını ifade etmektedir. onChange özelliğine isNumeric fonksiyonunu, parametre olarak da HTML elementin kendisini işaret ettik. Form alanına veri girilip mouse ile başka bir bölgeye geçiş sağlanması, isNumeric fonksiyonunu tetikleyecektir:

function isNumeric(v) {
	var isNum = /^[0-9-'.']*$/;
	if (!isNum.test(v.value)) {
		alert('Sadece Sayı Giriniz!');
		v.value = v.value.replace(/[^0-9-'.']/g,"");
	}
}

function isNumeric(v) {

var isNum = /^[0-9-'.']*$/;

if (!isNum.test(v.value)) {

alert('Sadece Sayı Giriniz!');

v.value = v.value.replace(/[^0-9-'.']/g,"");

}

Yukarıdaki sayfa çalıştırıldığında metin girişi yaparak kodları test edelim:

[1]

Metinsel veri girişi

Sayısal veri girişi yapıldığında ise herhangi bir sonuç dönmeyecektir.

Endnotes:

[Image]: http://www.phpservisi.com/wp-content/uploads/2014/04/metin_girisi.jpg

Source URL: http://www.phpservisi.com/form-alanina-yalnizca-sayisal-deger-girisi-saglama/