1. Anasayfa
  2. Javascript

JavaScript Dersleri – JavaScript Form Doğrulama ve Kontrol İşlemleri

JavaScript Dersleri – JavaScript Form Doğrulama ve Kontrol İşlemleri
1

indir
JavaScript derslerimize form doğrulama ve kontrol işlemleri ile devam ediyoruz, Web sayfası üzerinde doldurulan bir formun istemci tarafında kontrol edilmesi bilgilerin sunuya gönderilmeden önce kontrol edilmesini ve varsa hataların düzeltilmesine imkan verir. Bu dersimizde bu işlemler nasıl yapılır onları anlatmaya çalışacağım genel başlıklar halinde öğrenceklerimiz..:
Forma girilen bilgilere erişim
Text ve Passords(şifre) alanlarının kontrolü
Radio butonların kontrolü
Checkboxların kontrolü
Açılır liste (Select) kontrolü
Textarea kontrolü
Temiz ve düzgün bir doğrulama fonksiyonu yazımı
Düzenleme işlemlerinde focus(odaklanma), blur ve diğer olaylar

Sözü daha fazla uzatmadan sırayla konuları anlatmaya başlayalım
1-JavaScript Forma girilen bilgilere erişim
Web sayfasındaki tüm formlar document.forms[] dizisi içerisinde saklanır dizilerde sırlama işlemine göre ilk forma document.forms[0], ikincisine document.forms[1] yazarak erişebiliriz amam bunun yerine o formun ismi veya id değeri ile erişmek daha mantıklıdır.
document.getElementById() id ile erişim
document.formismi.erisilecekelemanismi form ismi ile erişim. Aşağıdaki örnek konunun daha iyi anlaşılmasını sağlayacaktır. uygulamanın çalışan hali ve kodlarımız..
[wp-js-fiddle url=”http://jsfiddle.net/BilisimOgretmeni/6pVLL/” style=”width:100%; height:400px; border:solid #4173A0 1px;”]

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>www.bilisimogretmeni.com</title>
<script type="text/javascript">
    function renkdegistir(){
        var adiniz = document.forms[0].adiniz.value;
        var zeminrengi = document.renkdegistirmeformu.renk.value;
       //www.bilisimogretmeni.com
        document.bgColor = zeminrengi;
        alert(adiniz + ", zemin rengini " + zeminrengi + " yaptınız.");
    }
</script>
</head>
<body>
<h1>Zemin rengi değiştirme</h1>
<form name="renkdegistirmeformu">
    Adınız: <input type="text" name="adiniz"><br>
    Sayfayı ne renk yapmak istersin: <input type="text" name="renk"><br>
	İngilizce ismini girin..<br>
    <input type="button" value="Rengi Değiştir" onclick="renkdegistir();">
</form>
</body>
</html>

Kodlarımız nasıl çalışıyor bakalım
1-Rengi Değiştir butonuna basılınca renkdegistir() fonksiyonu çalıştırılıyor
2-kullanıcının girdiği ad ve renk bilgilerine javascript tarafından document.forms[0].adiniz.value; ve document.renkdegistirmeformu.renk.value; gibi iki farklı yazım ile erişildi
3-form üzerine girilen bilgileri form id veya name bilgileri kullanarak erişmiş olduk document.renkdegistirmeformu.renk.value satırında sayfadaki renkdegistirmeformu isimli formdaki renk nesnesinin value değeri alınıyor…

2-Temel Form Doğrulama İşlemleri Kullanıcı Adı ve Şifre Doğrulama
Hemen kodlarımızı yazalım ve onun üzerinden açıklamaya çalışalım
[wp-js-fiddle url=”http://jsfiddle.net/BilisimOgretmeni/kHM8a/” style=”width:100%; height:400px; border:solid #4173A0 1px;”]

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>www.bilisimogretmeni</title>
<script type="text/javascript">
function kontrol(form){
    var adiniz = form.adiniz.value;
    var sifre = form.sifre.value;
 
    if (adiniz.length === 0) {
        alert("Lütfen Adınızı Girin");
        return false;
    }
 
    if (sifre.length === 0) {
        alert("Lütfen şifrenizi girin");
        return false;
    }
 
    return true;
}
</script>
</head>
<body>
<h1>Kullanıcı girişi</h1>
<form method="post" action="islem.html"
            onsubmit="return kontrol(this);">
 
    adiniz: <input type="text" name="adiniz" size="10"><br>
    sifre: <input type="password" name="sifre" size="10"><br>
 
    <input type="submit" value="Gönder">
    <input type="reset" value="Temizle">
</form>
</body>
</html>

1-Form gönder butonuna basılınca onsubmit olayı devreye girdi ve kontrol fonksiyonuna bilgileri gönderdi
2-Kontrol fonksiyonunda forma girilen ad ve şifre bilgileri alınarak değişklenlere aktarıldı
3-Değişkelerin değerlerinin boş olup olmadığı if komutu ile kontrol edildi eğer boş girilmiş ise alert penceresi ile alanların doldurulması gerektiği söylendi.
4-Hata oluşunca geriye false değeri dönüyor ve form üzerindeki bilgilerin doldurulması bekleniyor, bilgiler doğru girilince geriye true değeri dönüyor ve form gönderme işlemi tamamlanıyor…

Yukarıdaki örnekte bazı problemler var bunlar bir seferde tek hata kontrolü yapılması, hangi hatalar olduğu ve nasıl düzelteceğini söylememesi gibi aşağıdaki kodlar bu hataları ortadan kaldırıyor.
[wp-js-fiddle url=”http://jsfiddle.net/BilisimOgretmeni/yJLUQ/” style=”width:100%; height:400px; border:solid #4173A0 1px;”]

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>www.bilsimogretmeni.com</title>
<script type="text/javascript">
function validate(form){
    var kullaniciadi = form.kullaniciadi.value;
    var sifre = form.sifre.value;
    var hata = [];
 
    if (!uzunlukkontrol(kullaniciadi,5,10)) {
        hata.push("Kullanıcı Adınızı Girin En az 5 en fazla 10 karakter");
    }
 
    if (!uzunlukkontrol(sifre,6,8)) {
        hata.push("Şifrenizi Girin En az 6 En fazla 8 karakter");
    }
 //www.bilsimogretmeni.com
    if (hata.length > 0) {
        hatalarigoster(hata);
        return false;
    }
 
    return true;
}
 
function uzunlukkontrol(text, min, max){
    min = min || 1;
    max = max || 10000;
 
    if (text.length < min || text.length > max) {
        return false;
    }
    return true;
}
 
function hatalarigoster(hata){
    var msg = "Aşağıdaki hataları düzeltip tekrar deneyin...n";
    var numError;
    for (var i = 0; i<hata.length; i++) {
        numError = i + 1;
        msg += "n" + numError + ". " + hata[i];
    }
    alert(msg); //www.bilsimogretmeni.com
}
</script>
</head>
<body>
<h1>Üye Girişi</h1>
<form method="post" action="islem.html"
                onsubmit="return validate(this);">
 
    Kullanıcı Adı: <input type="text" name="kullaniciadi" size="10"><br>
    Şifreniz: <input type="password" name="sifre" size="10"><br> 
    <input type="submit" value="Gönder">
    <input type="reset" value="Temizle">
    </p>
</form>
</body>
</html>

Yukarıdaki kodlarda oluşan hatalar hata isimli bir dizide tutlup hepsi beraber gösteriliyor,uzunluk kontrol isimli fonksiyonla kullanıcı adı ve şifre uzunluk kontrolü yapılıyor…
Şimdilik bu kadar sonraki dersimizde Radio Button, Checkbox,textarea doğrulama işlemleri ve diğer özelliklere değineceğiz… iyi çalışmalar…

Bu İçeriğe Tepkin Ne Oldu?
  • 2
    ba_ar_l_
    Başarılı
  • 0
    gayet_yi
    Gayet İyi
  • 1
    te_ekk_rler
    Teşekkürler
  • 2
    anlamad_m
    Anlamadım
  • 1
    yetersiz
    Yetersiz
Subscribe
Bildir
guest

Bu site, istenmeyenleri azaltmak için Akismet kullanıyor. Yorum verilerinizin nasıl işlendiği hakkında daha fazla bilgi edinin.

1 Yorum
Inline Feedbacks
View all comments
abc

kullanıcı adı ve şifre kontrolu yapan bir js kodu için
doğruysa alert ile tebrikler doğru bildinizdesin.
kullanıcı adı veya şifrelerden herhangi birini girmediğinde alert ile kullanıcı adı ve şifre girilmedi desin.
ve 3 kere yanlış girildiğinde alert ile sisteme giremediniz desin ve textler pasifleşsin. bunu nasıl yapabilirim?