Bu yazımda sizlere javascript/jquery kullanarakı kullanıcı kayıt formlarında sıklıkla rastladığımız sifre ve sifre tekrarında anında kontrol yapmayı anlatacağım.
öncelikle boş html şablonunu oluşturalım
öncelikle boş html şablonunu oluşturalım
<html><head><title></title></head><body></body></html>
daha sonra bu şablona jquery kütüphanesini ekleyelim
<html><head><title></title><script src=”https://code.jquery.com/jquery-3.4.1.min.js“></script></head><body></body></html>
daha sonra bir adet form oluşturalım.
<html><head><title></title><script src=”https://code.jquery.com/jquery-3.4.1.min.js“></script></head><body><form><div><input type=”text” id=”sifre”><label></label></div><div><input type=”text” id=”sifre_tekrar”><label></label></div></form></body></html>
şimdi ise gerekli kodlamalara geçelim.
sayfamızın en altına bir adet script tagı açalım ve arasına aşağıdaki kodlarımızı yazalım.
<html><head><title></title><script src=”https://code.jquery.com/jquery-3.4.1.min.js“></script></head><body><form><div><input type=”text” id=”sifre”><label class=”sifre_sonuc”></label></div><div><input type=”text” id=”sifre_tekrar”><label class=”sifre_sonuc”></label></div></form><script>/*öncelikle sayfa tamamen yüklendi ise diye bir seçenek koyalım*/$(document).ready(function(){/*sayfada bulunan inputlardan bir tanesine odaklanma kaybolur ise (yani kullanici inputun dışına çıkarsa ) bir fonksiyon çalıştırıyoruz.*/$(“input”).focusout(function(){/*sifre inputunun değerini okuyoruz*/sifre = $(“input#sifre”).val();/*sifre_tekrar inputunun değerini okuyoruz.*/sifre_tekrar = $(“input#sifre_tekrar”).val();/*eğer şifreler eşit değil ise*/if(sifre!=sifre_tekrar){/*iki inputun altında bulunan labellere şifreler uyumsuz yazdırıyoruz.*/$(“.sifre_sonuc”).html(“Şifreler Uyumsuz..”);}else{/*iki inputun altında bulunan labellere şifreler uyumlu yazdırıyoruz.*/$(“.sifre_sonuc”).html(“Şifreler Uyumlu..”);}});});</script></body></html>
yazdığımız kodlara ait açıklaması kod bloğu arasında /**/ ifadeleri arasına yazdığımızdan burada fazladan bir açıklama yapmıyorum.
kodların tam hali ise
index.html dosyasında
<html><head><title></title><script src=”https://code.jquery.com/jquery-3.4.1.min.js“></script></head><body><form><div><input type=”text” id=”sifre”><label class=”sifre_sonuc”></label></div><div><input type=”text” id=”sifre_tekrar”><label class=”sifre_sonuc”></label></div></form><script>/*öncelikle sayfa tamamen yüklendi ise diye bir seçenek koyalım*/$(document).ready(function(){/*sayfada bulunan inputlardan bir tanesine odaklanma kaybolur ise (yani kullanici inputun dışına çıkarsa ) bir fonksiyon çalıştırıyoruz.*/$(“input”).focusout(function(){/*sifre inputunun değerini okuyoruz*/sifre = $(“input#sifre”).val();/*sifre_tekrar inputunun değerini okuyoruz.*/sifre_tekrar = $(“input#sifre_tekrar”).val();/*eğer şifreler eşit değil ise*/if(sifre!=sifre_tekrar){/*iki inputun altında bulunan labellere şifreler uyumsuz yazdırıyoruz.*/$(“.sifre_sonuc”).html(“Şifreler Uyumsuz..”);}else{/*iki inputun altında bulunan labellere şifreler uyumlu yazdırıyoruz.*/$(“.sifre_sonuc”).html(“Şifreler Uyumlu..”);}});});</script></body></html>
