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>