JavaScript Academy · Ders

İstemci Taraflı Doğrulama

Girdiyi herhangi bir yere göndermeden önce doğrulayın.

İstemci Taraflı Doğrulama, CoddyKit'te ücretsiz bir JavaScript Academy dersidir. Bu, 4 dersinin 3. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, JavaScript Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. JavaScript Academy kursu toplamda 4 dersten oluşur.

İstemci Tarafında Neden Doğrulama Yapılır

İstemci tarafı doğrulama, anında geri bildirim ve daha akıcı bir deneyim sağlar. Bunun güvenlik değil, kolaylık olduğunu unutmayın: sunucuda da her zaman doğrulama yapın.

Gönderme Sırasında Doğrulama

Yaygın bir yaklaşım, form gönderildiğinde alanları denetlemek ve geçersiz bir şey varsa gönderme işlemini iptal etmektir.

form.addEventListener("submit", (e) => {
  if (!isValid()) {
    e.preventDefault();
  }
});

Zorunlu Alanı Denetleme

Değeri kırpın ve boş girdiyi reddedin. Kırpma, yalnızca boşluklardan oluşan dizelerin kabul edilmesini önler.

function checkName() {
  const v = nameInput.value.trim();
  return v.length > 0;
}

Uzunluk Kuralları

Parola gibi alanlarda kırpılmış uzunluğu, asgari ve azami sınırlarla karşılaştırın.

function checkPassword() {
  const v = passwordInput.value;
  return v.length >= 8 && v.length <= 64;
}

Desen Eşleştirme

Düzenli ifadeler, e-posta biçimleri gibi kalıpları denetler. Desenleri basit tutun ve sunucu denetimleriyle birlikte kullanın.

function checkEmail() {
  const v = emailInput.value.trim();
  return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(v);
}

Hata Mesajlarını Gösterme

Geri bildirimi alana yakın bir yerde, özel bir hata öğesi ve XSS saldırılarına karşı güvenli kalmak için textContent kullanarak görüntüleyin.

function showError(field, msg) {
  const err = field.nextElementSibling;
  err.textContent = msg;
}

Hataları Temizleme

Alan geçerli olduğunda mesajı sıfırlayın; böylece eski hatalar kalıcı olmaz.

function clearError(field) {
  field.nextElementSibling.textContent = "";
}

Canlı Doğrulama

Kullanıcı yazarken veya bir alandan ayrılırken gerçek zamanlı geri bildirim sağlamak için input ya da blur olayında doğrulama yapın.

emailInput.addEventListener("blur", () => {
  if (!checkEmail()) showError(emailInput, "Invalid email");
  else clearError(emailInput);
});

aria-invalid ile Erişilebilirlik

Yardımcı teknolojilerin sorunları duyurabilmesi için aria-invalid değerini ayarlayın ve hataları aria-describedby ile ilişkilendirin.

emailInput.setAttribute("aria-invalid", "true");

İlk Hataya Odaklanma

Gönderme başarısız olduğunda odağı ilk geçersiz alana taşıyın; böylece kullanıcılar hatayı hemen düzeltebilir.

function focusFirstError(fields) {
  const bad = fields.find((f) => !f.valid);
  if (bad) bad.el.focus();
}

Sunucu Tarafında da Doğrulayın

JavaScript devre dışı bırakılarak veya özel istekler oluşturularak istemci doğrulaması aşılabilir. Doğrunun kaynağı olarak sunucuyu kabul edin.

Hızlı Kontrol

Güvenlik bakış açısı.

Özet

Elle yapılan doğrulama; zorunluluk, uzunluk ve desen gibi alan kurallarını denetler, başarısızlık durumunda preventDefault ile göndermeyi iptal eder. Mesajları textContent ile güvenli biçimde gösterip temizleyin, input/blur olaylarında canlı doğrulama yapın, aria-invalid ile erişilebilirliği iyileştirin ve ilk hataya odaklanın. Sunucuda her zaman yeniden doğrulama yapın.

Sıkça Sorulan Sorular

“İstemci Taraflı Doğrulama” dersi ücretsiz mi?

Evet — “İstemci Taraflı Doğrulama” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve JavaScript Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. JavaScript Academy kursu toplamda 4 dersten oluşur.

“İstemci Taraflı Doğrulama” dersinde ne öğreneceğim?

Girdiyi herhangi bir yere göndermeden önce doğrulayın. JavaScript Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

JavaScript Academy öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te JavaScript Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 3. dersidir.

“İstemci Taraflı Doğrulama” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu JavaScript Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her JavaScript Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

Bu kursun tüm dersleri

← JavaScript Academy Sayfasına Dön