Javascript ile Form Kontrolü - Dizin, Kripto Para, Oyun, Mobil

Javascript ile Form Kontrolü

Gönderen: Kaan   Tarih: 2018-08-18 10:50 Kategori: Php-Html5-Css-jQuery-Mysql | Okundu: 452 Onay sırasına at Düzenle Kopyası

Javascript kullanarak form kontrolü örneğimizde Bootstrap ile uyum içerisinde bir form hazırlayarak, kayıt ol sayfası oluşturacağız. Bu uygulamada kullanıcı adı karakter sayısı belirleyebilecek, ikinci text box’a girilen şifre eşleştirmesi yapılacak, girilen mail adresinin geçerli olup olmadığı sınanacak.

Javascript kodlarımız aşağıdaki gibidir.

<script type="text/javascript">
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;
}
</script>

Bootstrap classlarına uyumlu form yapımız ise aşağıdaki gibidir.

<form action="" name="uye_formu" method="post" onsubmit="return isValid(this)">
	<div class="form-group">
	<input type="text" name="kadi" placeholder="Kullanıcı Adı" class="form-control" >
	</div>
	<div class="form-group">
	<input type="mail" name="email" placeholder="Mail Adresi" class="form-control" >
	</div>	
	<div class="form-group">
	<input type="password" name="sifre1" placeholder="Şifre Belirle" class="form-control" >
	</div>
	<div class="form-group">
	<input type="password" name="sifre2" placeholder="Şifre Tekrarı" class="form-control" >
	</div>					
	<input type="submit" name="uyeekle" class="btn btn-success btn-block" value="Kaydı Tamamla">
	<a href="index.php" class="btn btn-primary btn-block">Giriş Yap</a>					
</form>

Kodları farklı sayfada tutacaksanız form action kısmını düzenlemelisiniz.



Yorumlar:

Reklamlar

FACEBOOK'DA TAKİP ET

PAYLAŞ

BUNLAR İLGİNİZİ ÇEKEBİLİR

Reklam