E-Mail Kontrolü | Özel İstek

Ogehan

Ogehan

-
5 Haz 2016
2,176
271
$app->execute();
Değerli üyemiz @Turkuaz999 'un isteği doğrultusunda "E-Mail Kontrolünün" nasıl yazıldığını göstereceğim.





İlk öncelikle projemizi nasıl oluşturacağımıza gelelim.
Yeni bir klasör oluşturuyoruz ve "Visual Code Studio" içine atıyoruz.



Klasörümüzü "Visual Code Studio" içine attıktan sonra üstüne tıklayıp
kırmızı daire işaretlenmiş yere tıklayıp index.html yazıyoruz ve kod girinti sayfamız önümüze çıkacak ;



Sayfa önümüze açıltıktan sonra aşağıdaki HTML kodlarını yazıyoruz ve düzenlemek istediğiniz
kısımları düzenleyiniz ; ​
HTML: 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div class="box">
        <h3>E-Posta Kontrol</h3>
        <form id="form" action="#">
            <div class="input-box">
                <input type="text" id="email" onkeyup="validateEmail()" placeholder="E-POSTA ADRESİNİZİ GİRİNİZ.">
                <span id="text"></span>
            </div>
        </form>
    </div>

    <script>
        function validateEmail() {
            var form = document.getElementById("form");
            var email = document.getElementById("email").value;
            var text = document.getElementById("text");

            var pattern = /^[^ ]+@[^ ]+\.[a-z]{2,3}$/;

            if (email.match(pattern)) {
                form.classList.add("valid");
                form.classList.remove("invalid");
                text.innerHTML = "E-POSTA ADRESİ GEÇERLİ.";
                text.style.color = "green";
            } else {
                form.classList.add("invalid");
                form.classList.remove("valid");
                text.innerHTML = "E-POSTA ADRESİ GEÇERLİ DEĞİL.";
                text.style.color = "red";
            }

            if (email == "") {
                form.classList.remove("valid");
                form.classList.remove("invalid");
                text.innerHTML = "";
            }
        }
    </script>
</body>

</html>



Şimdi gelelim CSS kodlarına ama ondan önce oluşturduğumuz klasör içerisinde bir ek klasör oluşturmamız gerekiyor
e-maillerin doğru veya yanlış olduğunu belirtmek için çıkan simgeleri ekliyeceğiz ben örnek olarak
"resimtht" olarak oluşturuyorum ve içerisine görsellerimi atıyorum siz istediğiniz simgeleri kullanabilirsiniz.



Arkaplan için yine önceden bir resim seçip oluşturduğunuz klasörün içine resimimizi atıyoruz.
Arkaplan resmi kullanmak istemeyen kişiler CSS kodları içerisinden background ibaresinden color olarak seçip renk tercih
edebilirler. Ben örnek olarak Moderasyon Wallpaper resmimizi kullanmak istiyorum ve klasör içerisine atıyorum ;



Son olarak gelelim CSS kodlarımıza aşağıda vermiş olduğum kodları index.html'yi oluşturduğumuz gibi "Visual Code" üzerinden aynı simgeye tıklayıp bu sefer style.css olarak oluşturup aşağıdaki kodları yazıyoruz ve değiştirmek istediklerinizi değiştirebilirsiniz.



Aşağıdaki kodlarıda style.css içerisine yazdıktan sonra işlemlerimiz tamamlanmış olucak ve sitemizde biri kayıt olmaya çalışırken email
girmesi gerektiğinde @gmail.com @mail.com @outlook.com ve benzeri şekillerdeki mailleri girmediği sürece girdiği mail kabul edilmeyecektir. Ve doğru bir email girmesini isteycektir /
Style.css​
CSS: 
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}

body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background-image: url(moderasyon.jpg);
}

.box {
    background: white;
    padding: 15px 40px;
    box-shadow: 15px 15px rgba(0, 0, 0, 0.1);
}

.box h3 {
    position: relative;
    font-size: 1.25rem;
    color: #ccc;
    letter-spacing: 0.1em;
    font-weight: 500;
    margin-bottom: 5px;
}

.box #form {
    position: relative;
}

.box .input-box {
    position: relative;
}

.box #form #email {
    width: 400px;
    outline: none;
    border: none;
    border-bottom: 2px solid #333;
    color: #333;
    padding: 10px 0;
    font-weight: 500;
    font-size: 1.2em;
    letter-spacing: 0.1em;
}

#text {
    display: block;
    color: #999;
    font-weight: 500;
    padding: 5px 0;
    letter-spacing: 0.1em;
    font-size: 0.75em;
}

#form.invalid .input-box::before {
    content: "";
    position: absolute;
    right: 0;
    top: 12px;
    width: 24px;
    height: 24px;
    background: url(resimtht/hayır.png);
    background-size: cover;
}

#form.valid .input-box::before {
    content: "";
    position: absolute;
    right: 0;
    top: 12px;
    width: 24px;
    height: 24px;
    background: url(resimtht/evet.png);
    background-size: cover;
}

Ve tüm adımlarımız tamamlandı gelelim nasıl gözüktüğüne ve nasıl işlediğine ;
Nasıl gözüküyor ? ;



Geçerli bir mail girdiğimizde nasıl gözüküyor ?



Geçersiz bir mail girdiğimizde nasıl gözüküyor ?



Bir değerli üyemizin isteği doğrultusunda bu şekilde bir proje oluşturduk
ilerleyen zamanlarda konularımız ve içeriklerimiz yararlı olabilecek bir şekilde devam edicektir.
İyi Forumlar Dilerim...

​
 
ByZehirx

ByZehirx

Yaşayan Forum Efsanesi
10 Şub 2012
12,440
2,051
35
Osmaniye 80
Google Apps Script ile
Otomatik mail gönderilebilir
Otomatik hedef maile cvp verilebilir vb gibi komutlar yazılabilir ancak bu bir tetikleyiceye eklenmelidir.
 
Privarp

Privarp

Anka Team Junior
8 Nis 2022
138
45
Ogehan' Alıntı:
Değerli üyemiz @Turkuaz999 'un isteği doğrultusunda "E-Mail Kontrolünün" nasıl yazıldığını göstereceğim.





İlk öncelikle projemizi nasıl oluşturacağımıza gelelim.
Yeni bir klasör oluşturuyoruz ve "Visual Code Studio" içine atıyoruz.



Klasörümüzü "Visual Code Studio" içine attıktan sonra üstüne tıklayıp
kırmızı daire işaretlenmiş yere tıklayıp index.html yazıyoruz ve kod girinti sayfamız önümüze çıkacak ;



Sayfa önümüze açıltıktan sonra aşağıdaki HTML kodlarını yazıyoruz ve düzenlemek istediğiniz
kısımları düzenleyiniz ; ​
HTML: 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div class="box">
        <h3>E-Posta Kontrol</h3>
        <form id="form" action="#">
            <div class="input-box">
                <input type="text" id="email" onkeyup="validateEmail()" placeholder="E-POSTA ADRESİNİZİ GİRİNİZ.">
                <span id="text"></span>
            </div>
        </form>
    </div>

    <script>
        function validateEmail() {
            var form = document.getElementById("form");
            var email = document.getElementById("email").value;
            var text = document.getElementById("text");

            var pattern = /^[^ ]+@[^ ]+\.[a-z]{2,3}$/;

            if (email.match(pattern)) {
                form.classList.add("valid");
                form.classList.remove("invalid");
                text.innerHTML = "E-POSTA ADRESİ GEÇERLİ.";
                text.style.color = "green";
            } else {
                form.classList.add("invalid");
                form.classList.remove("valid");
                text.innerHTML = "E-POSTA ADRESİ GEÇERLİ DEĞİL.";
                text.style.color = "red";
            }

            if (email == "") {
                form.classList.remove("valid");
                form.classList.remove("invalid");
                text.innerHTML = "";
            }
        }
    </script>
</body>

</html>



Şimdi gelelim CSS kodlarına ama ondan önce oluşturduğumuz klasör içerisinde bir ek klasör oluşturmamız gerekiyor
e-maillerin doğru veya yanlış olduğunu belirtmek için çıkan simgeleri ekliyeceğiz ben örnek olarak
"resimtht" olarak oluşturuyorum ve içerisine görsellerimi atıyorum siz istediğiniz simgeleri kullanabilirsiniz.



Arkaplan için yine önceden bir resim seçip oluşturduğunuz klasörün içine resimimizi atıyoruz.
Arkaplan resmi kullanmak istemeyen kişiler CSS kodları içerisinden background ibaresinden color olarak seçip renk tercih
edebilirler. Ben örnek olarak Moderasyon Wallpaper resmimizi kullanmak istiyorum ve klasör içerisine atıyorum ;



Son olarak gelelim CSS kodlarımıza aşağıda vermiş olduğum kodları index.html'yi oluşturduğumuz gibi "Visual Code" üzerinden aynı simgeye tıklayıp bu sefer style.css olarak oluşturup aşağıdaki kodları yazıyoruz ve değiştirmek istediklerinizi değiştirebilirsiniz.



Aşağıdaki kodlarıda style.css içerisine yazdıktan sonra işlemlerimiz tamamlanmış olucak ve sitemizde biri kayıt olmaya çalışırken email
girmesi gerektiğinde @gmail.com @mail.com @outlook.com ve benzeri şekillerdeki mailleri girmediği sürece girdiği mail kabul edilmeyecektir. Ve doğru bir email girmesini isteycektir /
Style.css​
CSS: 
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}

body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background-image: url(moderasyon.jpg);
}

.box {
    background: white;
    padding: 15px 40px;
    box-shadow: 15px 15px rgba(0, 0, 0, 0.1);
}

.box h3 {
    position: relative;
    font-size: 1.25rem;
    color: #ccc;
    letter-spacing: 0.1em;
    font-weight: 500;
    margin-bottom: 5px;
}

.box #form {
    position: relative;
}

.box .input-box {
    position: relative;
}

.box #form #email {
    width: 400px;
    outline: none;
    border: none;
    border-bottom: 2px solid #333;
    color: #333;
    padding: 10px 0;
    font-weight: 500;
    font-size: 1.2em;
    letter-spacing: 0.1em;
}

#text {
    display: block;
    color: #999;
    font-weight: 500;
    padding: 5px 0;
    letter-spacing: 0.1em;
    font-size: 0.75em;
}

#form.invalid .input-box::before {
    content: "";
    position: absolute;
    right: 0;
    top: 12px;
    width: 24px;
    height: 24px;
    background: url(resimtht/hayır.png);
    background-size: cover;
}

#form.valid .input-box::before {
    content: "";
    position: absolute;
    right: 0;
    top: 12px;
    width: 24px;
    height: 24px;
    background: url(resimtht/evet.png);
    background-size: cover;
}

Ve tüm adımlarımız tamamlandı gelelim nasıl gözüktüğüne ve nasıl işlediğine ;
Nasıl gözüküyor ? ;



Geçerli bir mail girdiğimizde nasıl gözüküyor ?



Geçersiz bir mail girdiğimizde nasıl gözüküyor ?



Bir değerli üyemizin isteği doğrultusunda bu şekilde bir proje oluşturduk
ilerleyen zamanlarda konularımız ve içeriklerimiz yararlı olabilecek bir şekilde devam edicektir.
İyi Forumlar Dilerim...

​
Genişletmek için tıkla ...
Elinize Sağlık
 
şıkk

şıkk

Üye
24 Eki 2023
120
57
Ogehan' Alıntı:
Değerli üyemiz @Turkuaz999 'un isteği doğrultusunda "E-Mail Kontrolünün" nasıl yazıldığını göstereceğim.





İlk öncelikle projemizi nasıl oluşturacağımıza gelelim.
Yeni bir klasör oluşturuyoruz ve "Visual Code Studio" içine atıyoruz.



Klasörümüzü "Visual Code Studio" içine attıktan sonra üstüne tıklayıp
kırmızı daire işaretlenmiş yere tıklayıp index.html yazıyoruz ve kod girinti sayfamız önümüze çıkacak ;



Sayfa önümüze açıltıktan sonra aşağıdaki HTML kodlarını yazıyoruz ve düzenlemek istediğiniz
kısımları düzenleyiniz ; ​
HTML: 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div class="box">
        <h3>E-Posta Kontrol</h3>
        <form id="form" action="#">
            <div class="input-box">
                <input type="text" id="email" onkeyup="validateEmail()" placeholder="E-POSTA ADRESİNİZİ GİRİNİZ.">
                <span id="text"></span>
            </div>
        </form>
    </div>

    <script>
        function validateEmail() {
            var form = document.getElementById("form");
            var email = document.getElementById("email").value;
            var text = document.getElementById("text");

            var pattern = /^[^ ]+@[^ ]+\.[a-z]{2,3}$/;

            if (email.match(pattern)) {
                form.classList.add("valid");
                form.classList.remove("invalid");
                text.innerHTML = "E-POSTA ADRESİ GEÇERLİ.";
                text.style.color = "green";
            } else {
                form.classList.add("invalid");
                form.classList.remove("valid");
                text.innerHTML = "E-POSTA ADRESİ GEÇERLİ DEĞİL.";
                text.style.color = "red";
            }

            if (email == "") {
                form.classList.remove("valid");
                form.classList.remove("invalid");
                text.innerHTML = "";
            }
        }
    </script>
</body>

</html>



Şimdi gelelim CSS kodlarına ama ondan önce oluşturduğumuz klasör içerisinde bir ek klasör oluşturmamız gerekiyor
e-maillerin doğru veya yanlış olduğunu belirtmek için çıkan simgeleri ekliyeceğiz ben örnek olarak
"resimtht" olarak oluşturuyorum ve içerisine görsellerimi atıyorum siz istediğiniz simgeleri kullanabilirsiniz.



Arkaplan için yine önceden bir resim seçip oluşturduğunuz klasörün içine resimimizi atıyoruz.
Arkaplan resmi kullanmak istemeyen kişiler CSS kodları içerisinden background ibaresinden color olarak seçip renk tercih
edebilirler. Ben örnek olarak Moderasyon Wallpaper resmimizi kullanmak istiyorum ve klasör içerisine atıyorum ;



Son olarak gelelim CSS kodlarımıza aşağıda vermiş olduğum kodları index.html'yi oluşturduğumuz gibi "Visual Code" üzerinden aynı simgeye tıklayıp bu sefer style.css olarak oluşturup aşağıdaki kodları yazıyoruz ve değiştirmek istediklerinizi değiştirebilirsiniz.



Aşağıdaki kodlarıda style.css içerisine yazdıktan sonra işlemlerimiz tamamlanmış olucak ve sitemizde biri kayıt olmaya çalışırken email
girmesi gerektiğinde @gmail.com @mail.com @outlook.com ve benzeri şekillerdeki mailleri girmediği sürece girdiği mail kabul edilmeyecektir. Ve doğru bir email girmesini isteycektir /
Style.css​
CSS: 
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}

body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background-image: url(moderasyon.jpg);
}

.box {
    background: white;
    padding: 15px 40px;
    box-shadow: 15px 15px rgba(0, 0, 0, 0.1);
}

.box h3 {
    position: relative;
    font-size: 1.25rem;
    color: #ccc;
    letter-spacing: 0.1em;
    font-weight: 500;
    margin-bottom: 5px;
}

.box #form {
    position: relative;
}

.box .input-box {
    position: relative;
}

.box #form #email {
    width: 400px;
    outline: none;
    border: none;
    border-bottom: 2px solid #333;
    color: #333;
    padding: 10px 0;
    font-weight: 500;
    font-size: 1.2em;
    letter-spacing: 0.1em;
}

#text {
    display: block;
    color: #999;
    font-weight: 500;
    padding: 5px 0;
    letter-spacing: 0.1em;
    font-size: 0.75em;
}

#form.invalid .input-box::before {
    content: "";
    position: absolute;
    right: 0;
    top: 12px;
    width: 24px;
    height: 24px;
    background: url(resimtht/hayır.png);
    background-size: cover;
}

#form.valid .input-box::before {
    content: "";
    position: absolute;
    right: 0;
    top: 12px;
    width: 24px;
    height: 24px;
    background: url(resimtht/evet.png);
    background-size: cover;
}

Ve tüm adımlarımız tamamlandı gelelim nasıl gözüktüğüne ve nasıl işlediğine ;
Nasıl gözüküyor ? ;



Geçerli bir mail girdiğimizde nasıl gözüküyor ?



Geçersiz bir mail girdiğimizde nasıl gözüküyor ?



Bir değerli üyemizin isteği doğrultusunda bu şekilde bir proje oluşturduk
ilerleyen zamanlarda konularımız ve içeriklerimiz yararlı olabilecek bir şekilde devam edicektir.
İyi Forumlar Dilerim...

​
Genişletmek için tıkla ...
Elinize sağlık
 
Ogehan

Ogehan

-
5 Haz 2016
2,176
271
$app->execute();
CommandBEY' Alıntı:
Eline sağlık, Bir sondaki konuda biz site verelim istek atsın status kodunu bize getirsin.
Genişletmek için tıkla ...
Tabiki teşekkürler
CH' Alıntı:
ellerine sağlık
Genişletmek için tıkla ...
Sağolasın
Carlonhack' Alıntı:
Eline sağlık
Genişletmek için tıkla ...
Teşekkürler
ByZehirx' Alıntı:
Google Apps Script ile
Otomatik mail gönderilebilir
Otomatik hedef maile cvp verilebilir vb gibi komutlar yazılabilir ancak bu bir tetikleyiceye eklenmelidir.
Genişletmek için tıkla ...
Elbette , bu temel bir örneği teşekkürler
Privarp' Alıntı:
Elinize Sağlık
Genişletmek için tıkla ...
Teşekkürler
şıkk' Alıntı:
Elinize sağlık
Genişletmek için tıkla ...
Sağolun
 
Cevap yazmak için giriş yap yada kayıt ol.
Üst

Turkhackteam.org internet sitesi 5651 sayılı kanun’un 2. maddesinin 1. fıkrasının m) bendi ile aynı kanunun 5. maddesi kapsamında "Yer Sağlayıcı" konumundadır. İçerikler ön onay olmaksızın tamamen kullanıcılar tarafından oluşturulmaktadır. Turkhackteam.org; Yer sağlayıcı olarak, kullanıcılar tarafından oluşturulan içeriği ya da hukuka aykırı paylaşımı kontrol etmekle ya da araştırmakla yükümlü değildir. Türkhackteam saldırı timleri Türk sitelerine hiçbir zararlı faaliyette bulunmaz. Türkhackteam üyelerinin yaptığı bireysel hack faaliyetlerinden Türkhackteam sorumlu değildir. Sitelerinize Türkhackteam ismi kullanılarak hack faaliyetinde bulunulursa, site-sunucu erişim loglarından bu faaliyeti gerçekleştiren ip adresini tespit edip diğer kanıtlarla birlikte savcılığa suç duyurusunda bulununuz.