Uygulama
Mutlaka ki Javascript ile form denetimi yapmanın pek çok yolu vardır. Burada anlatacağımız method, en basitlerinden biri olacak ve bu method üzerinden birkaç şekilde nasıl doğrulama yapılacağını göreceğiz.
Öncelikle bir form oluşturarak işe başlayalım:
|
Form
|
<form name="gonderForm">
<table>
<tr>
<td>İsim:</td>
<td><input type="text" name="isim"></td>
</tr>
<tr>
<td>Soyisim:</td>
<td><input type="text" name="soyisim"></td>
</tr>
<tr>
<td>E-Posta Adresi:</td>
<td><input type="text" name="eposta"></td>
</tr>
<tr>
<td colspan="2"><input type="submit" name="gonder" value="Gönder" onclick="return dogrula();"></td>
</tr>
</table>
</form> |
Görüldüğü gibi basit bir form oluşturarak kullanıcıdan isim, soyisim ve e-posta bilgilerini istedik. Şimdi de bu bilgilerin tümünü eksiksiz alabilmemiz için buradaki form alanları üzerinde denetim yapmamız gerekiyor.
|
JavaScript
|
1
2
3
4
5
6
7
8
9
10
11 |
<script language="JavaScript">
function dogrula()
{
var form = document.gonderForm;
if (form.isim.value == "" || form.soyisim.value== "" || form.eposta.value== "" )
{
alert ("Lütfen tüm alanları doldurup tekrar deneyin.");
return false;
}
}
</script> |
Burada ne yaptığımızın anlaşılabilmesi için formumuzda "Gönder" butonunun event'ine bakmamız gerekir. "onclick= return dogrula();" bölümünde butona basıldığında çalıştırılmasını istediğimiz fonksiyonu deklare ettik. Javascript'imiz içinde bir fonksiyon oluşturduk. 4. satırda "document.gonderForm" değerini birkaç kez kullanacağımız için bir başka bir değişkene atadık. 5. satırda asıl denetime başladık. Tüm form değerlerinin tek tek boş olup olmadığını kontrol ettik. Bunu, değerlerin boş olup olmadığını kontrol ederek yaptık. Eğer boş ise "alert" ile tüm alanların doldurulasının gerektiğini bildrdik. 8. satır ile de fonksiyona "false" değerini döndürüp sayfayı tekrar yüklemesini engelledik.
Bizim 5. satırda yaptığımız denetimi yapmanın mutlaka farklı yolları da vardır. Alternatif bir yol olarak da şunu gösterebiliriz:
|
JavaScript
|
|
1
2
3
4
5
6
7
8
9
10
11
|
<script language="JavaScript">
function dogrula()
{
var form = document.gonderForm;
if (form.isim.value.length < 1 || form.soyisim.value.length < 1 || form.eposta.value.length < 1 )
{
alert ("Lütfen tüm alanları doldurup tekrar deneyin.");
return false;
}
}
</script> |
Hatta doldurulmasını istediğimiz alanı daha da spesifik belirtebiliriz.
|
JavaScript
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
20
21 |
<script language="JavaScript">
function dogrula()
{
var form = document.gonderForm;
if (form.isim.value.length < 1 || form.soyisim.value.length < 1 || form.eposta.value.length < 1 )
{
if (form.isim.value.length < 1)
{
alert ("Lütfen İsim alanını doldurup tekrar deneyin.");
}
else if (form.soyisim.value.length < 1)
{
alert ("Lütfen Soyisim alanını doldurup tekrar deneyin.");
}
else if (form.eposta.value.length < 1)
{
alert ("Lütfen E-posta alanını doldurup tekrar deneyin.");
}
return false;
}
}
</script> |
Buradaki gibi pek çok yolu, kendi tekniğinizi ilerlettikçe siz de bulabilirsiniz. Ama server taraflı bir formu formu sadece javascript ile kontrol ermek de her zaman yeterince güvenli olmayabilir. Kişisel tavsiyem, javascript kontrolü ile birlikte, server taraflı kontrol de yapmak, fazla şüpheci olmakla beraber çok daha güvenli olacaktır. | 
Menü
21/02/2008 02:39 
ishak
