Öneri ve Hata Raporu



Günün Sözü Asla yalnız yürümeyeceksin

oylama 2.9/5 yorum 0 yorum yazar Hakan Taşan tarih 28 Kasım 2013

Bu makalede javascript ile form kontrolü uygulaması yapacağız. Çok basitçe oluşturulmuş formdan (kullanıcı adı, şifre ve e-mail) javascript ile girilen değerleri alıp, istenilen koşullarda değerler girilmiş mi kontrol edip, doğru şekilde değerler girildiyse post edilmesini sağlayacağız. Javascript, client-side (kullanıcı tarafında) çalıştığı için form kontrol uygulaması butona tıklandıktan sonra çalışacaktır. Eğer anlık olarak form kontrolü istiyorsanız jQuery ile anlık form kontrolü yazısını inceleyebilirsiniz.

Oluşturulan Form

Kontrol Edilenler

1) Kullanıcı adı boş olamaz, 4 karakterden az olamaz.

2) Şifre boş olamaz.

3) Şifre tekrarı boş olamaz.

4) Şifre ve şifre tekrarı farklı olamaz.

5) E-Mail boş olamaz, geçersiz e-mail olamaz.

Not: Eğer bütün değerler doğru girildiyse hazırladığımız sayfa sayesinde dizi içerisinde return edilecektir.

Javascript Kodu

function isValid(frm)
{
    var kadi = frm.kadi.value;
    var sifre1 = frm.sifre1.value;
    var sifre2 = frm.sifre2.value;
    var email = frm.email.value;
    var atpos=email.indexOf("@");
    var dotpos=email.lastIndexOf(".");

    if ( kadi==null || kadi=="" || kadi.length < 4 )
    {
        alert("Kullanıcı adı 4 karakterden az olamaz");
        return false;
    }
    if ( sifre1 == null || sifre1 == "" || sifre2 == null || sifre2 == "")
    {
        alert("Şifreyi boş bırakmayın");
        return false;
    }
    if ( !(sifre1 == sifre2) )
    {
        alert("Şifreler eşleşmiyor");
        return false;
    }
    if ( atpos<1 || dotpos<atpos+2 || dotpos+2>=email.length )
    {
        alert("Geçerli email adresi girin");
        return false;
    }      
    return true;
}

 

HTML Kodu

<div id="uyelik_formu">
    <form name="uye_formu" action="jscript_form_kontrolu_post.php" onsubmit="return isValid(this)" method="post">
        <label>Kullanıcı Adı:</label>
        <input type="text" name="kadi">
        <br>
        <label>Şifre:</label>
        <input type="password" name="sifre1">
        <br>
        <label>Şifre (Tekrar):</label>
        <input type="password" name="sifre2">
        <br>
        <label>E-Mail:</label>
        <input type="text" name="email">
        <br>
        <input type="submit" value="Kaydet!">
    </form>
</div>

 

CSS Kodu

#uyelik_formu
{
    padding: 10px;
    width: 400px;
    border: 1px solid black;
}  
label
{          
    float: left;
    width: 150px;
}

 

 

paylaş Paylaş
oylama yap Oyla

makale yorumları YORUMLAR

Bu makale için yorum yazılmamış