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
Validation Kontrollerini Yaparak Kimlik Bilgileri Formunu Oluşturan Programı Javascript Script Dilinde Yapınız
Javascript Kodlarıyla Tarayıcı Penceresinde Yön Tuşlarıyla Kutunun Hareket Ettirilmesi
Koordinat Düzleminde Verilen Bir Noktanın Hangi Bölgeye Düştüğünü Bulan 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
Faktöriyel Hesabı Yapan Javascript Uygulaması
Tetris Oyununu Javascript Dilini Kullanarak Web Sayfasında Kodlama1
Basamak Değerleri Seçilerek Elde Edilen Sayılarla Çıkarma İşlemi Alıştırmaları Yapan Programı Javascript Script Dilinde Yapınız
Javascript Script Dilinde Dizi Tanımlama
JavaScript Script Dilinde Değişkenlere Değer Atama
Girilen Beş Sayının Ortalamasını Bulan Javascript Uygulaması
Javascript Uygulamasında Xml Dosyasını Yeni Pencerede Gösterme
Çarpım Sonucunun Karekökü Tam Alınanların Rengini Kahverengi Yapan Çarpım Tablosunu Hazırlama
Birinci Dereceden Bir Bilinmeyenli Bir Denklemin Grafiğini Çizen Uygulamayı Html5 ve Javascript İle Yapınız
Text İçine Sadece Sayı Girme Kontrolünü Yapan Javascript Uygulaması
ListBox Yardımıyla Listelenen Dosya Uzantılarının Hangi Medya Dosyası Olduğunu Bulan Web Sayfasını Javascript Kodlarıyla Düzenleme
RadioButton Yardımıyla Resim Galerisi Oluşturan Web Sayfasını Javascript Kodlarıyla Tasarlama
RadioButton Yardımıyla Seçilen Mevsime Ait Resmi Gösteren Web Sayfasını Javascript Kodlarıyla Tasarlama
Web Sayfasında Tıklanan Resmin Gerçek Boyutunu Öğrenme
Tıklanan Resmi Orijinal Boyutunda Canvas Ekranına Yükleme
Html Etiketlerine Kodlarla Resim Ekleme

Yorum Ekle
   
Kötü İyi