Basit doğrulama

Zorunlu alan ve uzunluk kontrolü ile basit doğrulama yapmayı öğrenirsin.

Zorunlu alan denetimi

Bir alanın boş bırakılmadığını denetlemek için trim ile temizleyip boş dizeyle karşılaştırırsın. Bu en temel doğrulama adımıdır.

const name = input.value.trim();
if (name === '') {
  console.log('İsim gerekli');
}

Boşluktu dolu alanlar bu denetimde yakalanır. Hata iletisini kullanıcıya göstermek için sonraki derslerde görsel geri bildirim öğreneceğiz.

Uzunluk denetimi

Daha uzun bir değer istemek için length özelliğini kullanırsın. Dizenin uzunluğu sayı olarak döner ve karşılaştırma işleçleriyle denetlenir.

const value = input.value.trim();
if (value.length < 3) {
  console.log('En az 3 karakter');
}

>= 'en az', > 'çok', <= 'en çok', < 'az' anlamı taşır. Doğrulama iletisini kullanıcıya gösterirken kısa ve net tut.

Uygulama İsim alanını doğrula

nameInput değişkeni bir giriş alanını gösteriyor. Değeri trim ile temizle. Boşsa 'İsim gerekli', 3 karakterden kısaysa 'En az 3 karakter' yazdır; değilse 'Tamam' yazdır.

Örnek çözümü göster

const name = nameInput.value.trim();
if (name === '') {
  console.log('İsim gerekli');
} else if (name.length < 3) {
  console.log('En az 3 karakter');
} else {
  console.log('Tamam');
}

Kendini test et

Doğrulama desenlerini eşleştir

value.trim() === ''

Boş alan denetimi
value.length >= 3

En az 3 karakter
value.length < 3

Çok kısa değer

Hangisi 'en az 3 karakter' koşulunu doğru uygular?

const value = input.value.trim();
// A
if (value.length >= 3) { console.log('OK'); }
// B
if (value.length = 3) { console.log('OK'); }
// C
if (value.length > 3) { console.log('OK'); }
// D
if (value = 3) { console.log('OK'); }

Cevabı göster

A — Doğru! >= 3, '3 veya daha fazla' anlamına gelir; tam 3 karakteri de kabul eder.

Uzunluk denetimini tamamla

const value = input.value.trim();
if (3 > value.____) {
  console.log('Çok kısa');
}

Cevabı göster

const value = input.value.trim();
if (3 > value.length) {
  console.log('Çok kısa');
}

Sıradaki ders: Checkbox ve radio

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler