Javascript

Validation Kontrollerini Yaparak Kimlik Bilgileri Formunu Oluşturan Programı Javascript Script Dilinde Yapınız

Web sayfalarında kullanıcıdan bilgilerin alınması için form sayfaları kullanılır. Form sayfalarında istenecek bilgilerin tutarlı, doğru ve anlaşılır olması gerekir. TC kimlik numarasının sadece rakamlardan ve uzunluğunun 11 karakter olması, ad soyad bilgilerinde sadece harflerin olması gibi kontrollerinin programcı tarafından yapılması gerekir.

Şimdi uygulamaya ait kodları yazalım.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="https://www.w3.org/1999/xhtml">

<head runat="server">

    <title></title>

    <script language="javascript" type="text/javascript">

        function kontrol() {

            var mesaj = "";

 

            var kimlik = document.getElementById("Text1");

            var adi = document.getElementById("Text2");

            var soyadi = document.getElementById("Text3");

            var babaadi = document.getElementById("Text4");

            var dtarihi = document.getElementById("Text5");

            var cinsiyet = document.getElementsByName("cin");

            var cin;

            var sonuc;

 

            if (kimlik.value == "")

                mesaj = "T.C. Kimlik No \n";

            if (adi.value == "")

                mesaj = mesaj + "Adı \n";

            if (soyadi.value == "")

                mesaj = mesaj + "Soyadı \n";

            if (babaadi.value == "")

                mesaj = mesaj + "Baba Adı \n";

            if (dtarihi.value == "")

                mesaj = mesaj + "Doğum Tarihi \n";

 

            var drm = false;

 

            for (i = 0; i < cinsiyet.length; i++)

                if (cinsiyet[i].checked) {

                    drm = true;

                    if (cinsiyet[i].value == 0)

                        cin = "Erkek";

                    else

                        cin = "Kadın";

                }

            if (drm == false)

                mesaj = mesaj + "Cinsiyet \n\n Sizden istenilen bilgileri eksizsiz giriniz.";

 

            if (mesaj != "")

                alert(mesaj);

            else {

                adi = ilkharf(adi);

                soyadi = soyadi.value.toUpperCase();

                babaadi = ilkharf(babaadi);

                dtarihi = replaceAll(".", "/", dtarihi.value);

 

                document.getElementById("sonuc").style.display = "block";

                var sonuc = "T.C. Kimlik No : " + kimlik.value + "<br>";

                sonuc = sonuc + "Adı : " + adi + "<br>";

                sonuc = sonuc + "Soyadı : " + soyadi + "<br>";

                sonuc = sonuc + "Baba Adı : " + babaadi + "<br>";

                sonuc = sonuc + "Doğum Tarihi : " + dtarihi + "<br>";

                sonuc = sonuc + "Cinsiyeti : " + cin;

 

                document.getElementById("sonuc").innerHTML = sonuc;

            }

        }

 

        function replaceAll(find, replace, str) {

            while (str.indexOf(find) > -1) {

                str = str.replace(find, replace);

            }

            return str;

        }

 

        function ilkharf(obj) {

            var deger = obj.value;

            var yeniDeger = '';

            deger = deger.split(' ');

            for (var i = 0; i < deger.length; i++) {

                yeniDeger += deger[i].substring(0, 1).toUpperCase() + deger[i].substring(1, deger[i].length) + ' ';

                obj.value = yeniDeger;

            }

            return obj.value;

        }

 

        function isAlpha(txt) {

            return ValidString(txt, 'ABCÇDEFGĞHIİJKLMNOÖPRSŞTUÜVYZabcçdefgğhıijklmnoöprsştuüvyz ');

        }

 

        function isNumeric(txt) {

            return ValidString(txt, '0123456789');

        }

 

        function isDate(txt) {

            return ValidString(txt, '0123456789/.');

        }

 

        function isAlphaNumeric(txt) {

            return ValidString(txt, 'ABCÇDEFGĞHIİJKLMNOÖPRSŞTUÜVYZabcçdefgğhıijklmnoöprsştuüvyz0123456789');

        }

 

        function ValidString(ChkString, ValidString) {

            for (i = 0; i < ChkString.length; i++) {

                if (ValidString.indexOf(ChkString.substring(i, i + 1)) == -1) return false;

            }

            return true;

        }

 

        function HataKontrol(obj, x) {

 

            if (x == 1) {

                var kimlik = document.getElementById("Text1").value;

 

                if (!isNumeric(kimlik) || kimlik.length != 11) {

                    alert("Geçersiz Kimlik No");

                    document.getElementById("Text1").focus();

                    return false;

                }

                else

                    return true;

            }

            else if (x == 2) {

                var adi = document.getElementById("Text2").value;

 

                if (!isAlpha(adi)) {

                    alert("Geçersiz Adı");

                    document.getElementById("Text2").focus();

                    return false;

                }

                else

                    return true;

            }

            else if (x == 3) {

                var soyadi = document.getElementById("Text3").value;

 

                if (!isAlpha(soyadi)) {

                    alert("Geçersiz Soyadı");

                    document.getElementById("Text3").focus();

                    return false;

                }

                else

                    return true;

            }

            else if (x == 4) {

                var babaadi = document.getElementById("Text4").value;

 

                if (!isAlpha(babaadi)) {

                    alert("Geçersiz Baba Adı");

                    document.getElementById("Text4").focus();

                    return false;

                }

                else

                    return true;

            }

            else if (x == 5) {

                var dtarihi = document.getElementById("Text5").value;

 

                if (!isDate(dtarihi)) {

                    alert("Geçersiz Doğum Tarihi");

                    document.getElementById("Text5").focus();

                    return false;

                }

                else

                    return true;

            }

        }

    </script>

<style type="text/css">

.formdiv

{

    background-color:Gray;

    width:600px;

    height:380px;

    margin:10px;

    padding:10px;

    }

    .style1

    {

        width: 550px;

        margin:25px;

        

    }

    table td {

border: 3px solid #CCC;

height:30px;

color:White;

background-color:blue;

}

.giris

{

    background-color:Gray;

    }

    .oran

    {

        width:99%;

        height:100%;

        }

        #sonuc

        {

            width:500px;

            height:400px;

            background-color:Blue;

            color:White;

            display:none;

            }

</style>

</head>

 

<body>

    <form id="form1" runat="server">

    <div class="formdiv">

   

        <table class="style1">

            <tr>

                <td colspan="2" align="center">

                    KİMLİK BİLGİLERİ</td>

            </tr>

            <tr>

                <td width="40%">

                    T.C. Kimlik No</td>

                <td class="giris" width="60%">

                    <input class="oran" id="Text1" type="text" onblur="return HataKontrol(this,1)" /></td>

            </tr>

            <tr>

                <td>

                    Adı</td>

                <td class="giris">

                    <input class="oran" id="Text2" type="text" onblur="return HataKontrol(this,2)" /></td>

            </tr>

            <tr>

                <td>

                    Soyadı</td>

                <td class="giris">

                    <input class="oran" id="Text3" type="text" onblur="return HataKontrol(this,3)" /></td>

            </tr>

            <tr>

                <td>

                    Baba Adı</td>

                <td class="giris">

                    <input class="oran" id="Text4" type="text" onblur="return HataKontrol(this,4)" /></td>

            </tr>

            <tr>

                <td>

                    Doğum Tarihi(G&uuml;n/Ay/Yıl)</td>

                <td class="giris">

                    <input class="oran" id="Text5" type="text" onblur="return HataKontrol(this,5)" /></td>

            </tr>

            <tr>

                <td>

                    Cinsiyet</td>

                <td class="giris">

                    <input id="Radio1" type="radio" name="cin" value="0" />&nbsp;Erkek <input id="Radio2"

                        type="radio" name="cin" value="1" />&nbsp;Kadın </td>

            </tr>

            <tr>

                <td class="giris" colspan="2" align="center">

                    <input id="Button1" type="button" value="KAYDET ve İLERLE &gt;&gt;" onclick="kontrol()" /></td>

            </tr>

        </table>

   

    </div>

    </form>

    <div id="sonuc"></div>

</body>

</html>


İlgili Makaleler
Koordinat Düzleminde Verilen Bir Noktanın Hangi Bölgeye Düştüğünü Bulan Programı Javascript Script Dilinde Yapınız
JavaScript Kodlarıyla TextBox Nesnesine Sadece Sayıların Girilmesini Sağlama
Validation Kontrollerini Yaparak Kimlik Bilgileri Formunu Oluşturan Programı Javascript Script Dilinde Yapınız
Radio Button İçinden Seçilen Değeri Görüntüleyen Programı Javascript Script Dilinde Yapınız
Basamak Değerleri Seçilerek Elde Edilen Sayılarla Toplama İşlemi Alıştırmaları Yapan Programı Javascript Script Dilinde Yapınız
Birinci Dereceden Bir Bilinmeyenli Bir Denkleme Ait Çözüm Kümesine Göre Grafik Oluşturan Programı Javascript Script Dilinde Yapınız
Text İçine Sadece Sayı Girme Kontrolünü Yapan Javascript Uygulaması
Herbir Satırda İki Ay Olmak Üzere, Belirtilen Yıla Ait Takvimi Hazırlayıp Görüntüleyen Programı Javascript Script Dilinde Yapınız
Div Katmanı İçinde Gösterilen Metni Silen Programı Javascript Script Dilinde Yapınız
Javascript Kodlarıyla Tarayıcı Penceresinde Yön Tuşlarıyla Kutunun Hareket Ettirilmesi
JavaScript Script Dilinde Dizilerde Pop Komutu ve Kullanımı
Javascript Script Dilinde onResize Olayı
Bellek Ölçü Birimleri Arasında Dönüştürme İşlemlerini Yapan Programı Javascript Script Dilinde Yapınız
Faktöriyel Hesabı Yapan Javascript Uygulaması
JavaScript Script Dilinde Aritmetiksel Operatörler
JavaScript Script Dilinde do while Döngü Deyimi
Seçilen Bir Yıla Ait Takvimi Değişik Formatlarda Hazırlayıp Görüntüleyen Programı Javascript Script Dilinde Yapınız
Javascript Script Dilinde Form Nesnesi ve Özellikleri
Javascript Script dilinde Document Nesnesi
Birinci Dereceden Bir Bilinmeyenli Bir Denklemin Grafiğini Çizen Uygulamayı Html5 ve Javascript İle Yapınız

Yorum Ekle
   
Kötü İyi