JavaScript ile Form İşleme ve Doğrulama

Form Verilerini Alma

<form id="kayitForm">
    <input type="text" id="ad" placeholder="Adınız" required>
    <input type="email" id="email" placeholder="E-posta" required>
    <input type="password" id="sifre" placeholder="Şifre" required>
    <div id="hatalar"></div>
    <button type="submit">Kayıt Ol</button>
</form>

const form = document.getElementById("kayitForm");
const hatalarDiv = document.getElementById("hatalar");

form.addEventListener("submit", (e) => {
    e.preventDefault(); // Sayfanın yenilenmesini engelle
    
    const ad = document.getElementById("ad").value.trim();
    const email = document.getElementById("email").value.trim();
    const sifre = document.getElementById("sifre").value;
    
    const hatalar = [];
    
    // Doğrulama kuralları
    if (ad.length < 2) hatalar.push("Ad en az 2 karakter olmalı");
    if (!email.includes("@")) hatalar.push("Geçerli e-posta girin");
    if (sifre.length < 6) hatalar.push("Şifre en az 6 karakter olmalı");
    if (!/[A-Z]/.test(sifre)) hatalar.push("Şifrede en az 1 büyük harf olmalı");
    if (!/[0-9]/.test(sifre)) hatalar.push("Şifrede en az 1 rakam olmalı");
    
    if (hatalar.length > 0) {
        hatalarDiv.innerHTML = hatalar.map(h => \`<p style="color:red">❌ ${h}</p>\`).join("");
    } else {
        hatalarDiv.innerHTML = '<p style="color:green">✅ Kayıt başarılı!</p>';
        console.log({ ad, email, sifre });
    }
});

Canlı Şifre Gücü Göstergesi

const sifreInput = document.getElementById("sifre");
const gosterge = document.getElementById("guc");

sifreInput.addEventListener("input", (e) => {
    const sifre = e.target.value;
    let guc = 0;
    
    if (sifre.length >= 6) guc++;
    if (sifre.length >= 10) guc++;
    if (/[A-Z]/.test(sifre)) guc++;
    if (/[0-9]/.test(sifre)) guc++;
    if (/[^A-Za-z0-9]/.test(sifre)) guc++;
    
    const renkler = ["#ef4444", "#f59e0b", "#eab308", "#22c55e", "#06d6a0"];
    const mesajlar = ["Çok Zayıf", "Zayıf", "Orta", "Güçlü", "Çok Güçlü"];
    
    gosterge.style.width = (guc * 20) + "%";
    gosterge.style.background = renkler[guc - 1] || "#ef4444";
    gosterge.textContent = mesajlar[guc - 1] || "";
});