JavaScript Academy · Ders

Kısıt Doğrulama API'si

Yerleşik geçerlilik denetimini kullanın.

Kısıt Doğrulama API'si, CoddyKit'te ücretsiz bir JavaScript Academy dersidir. Bu, 4 dersinin 4. 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.

Yerleşik Doğrulama

HTML form alanları required, min, max, pattern ve type="email" gibi öznitelikleri destekler. Constraint Validation API, JavaScript'in bu yerleşik doğrulamayı incelemesine ve denetlemesine olanak tanır.

checkValidity

checkValidity bir boole değeri döndürür ve başarısız olan her denetim öğesinde invalid olayını tetikler; ancak tarayıcının baloncuk bildirimini göstermez.

const email = document.querySelector("#email");
console.log(email.checkValidity());

reportValidity

reportValidity, checkValidity ile benzer şekilde çalışır; ancak geçersiz alanlar için tarayıcının doğrulama mesajı arayüzünü de görüntüler.

if (!form.reportValidity()) {
  console.log("show built-in errors");
}

validity Nesnesi

Her denetim öğesinde, tam olarak neyin yanlış olduğunu açıklayan boole bayraklarından oluşan bir validity nesnesi vardır.

console.log(email.validity.valueMissing);  // empty required
console.log(email.validity.typeMismatch);  // wrong format
console.log(email.validity.tooShort);

validity.valid

validity.valid, yalnızca alan tüm kısıtlamaları geçtiğinde true değerindedir ve diğer bayrakların özetini sunar.

if (email.validity.valid) {
  console.log("ok");
}

validationMessage

validationMessage, tarayıcının geçerli hata için göstereceği yerelleştirilmiş mesajı içerir.

console.log(email.validationMessage);

setCustomValidity

setCustomValidity, kendi mesajınızı kullanarak bir alanı geçersiz olarak işaretler. Boş olmayan bir dize geçersiz anlamına gelir; boş bir dize ise bunu temizler.

function checkMatch() {
  if (pass.value !== confirm.value) {
    confirm.setCustomValidity("Passwords must match");
  } else {
    confirm.setCustomValidity("");
  }
}

Özel Hataları Her Zaman Temizleyin

Özel bir mesaj ayarlarsanız, alan geçerli olduğunda onu boş bir dizeyle temizlemeniz gerekir; aksi takdirde alan sonsuza kadar geçersiz kalır.

confirm.addEventListener("input", () => {
  confirm.setCustomValidity("");
  checkMatch();
});

invalid Olayı

Doğrulama başarısız olduğunda bir alanı biçimlendirmek gibi özel işlemler yapmak için invalid olayını dinleyin.

email.addEventListener("invalid", () => {
  email.classList.add("error");
});

Yerel Baloncukları Devre Dışı Bırakma

Kendi mesajlarınız için API'yi kullanmaya devam ederken yerel açılır bildirimleri bastırmak üzere forma novalidate ekleyin.

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

:valid ve :invalid ile Biçimlendirme

CSS sözde sınıfları :valid ve :invalid, alanları geçerlilik durumlarına göre otomatik olarak biçimlendirir.

Hızlı Kontrol

Özel doğrulama kuralı.

Özet

Constraint Validation API, HTML kısıtlama öznitelikleriyle birlikte çalışır. Hataları denetlemek ve isteğe bağlı olarak göstermek için checkValidity/reportValidity kullanın; validity bayraklarını ve validationMessage değerini inceleyin; setCustomValidity ile özel kurallar ekleyin ve bunları boş bir dizeyle temizleyin. invalid olayı ile :valid/:invalid CSS sınıfları biçimlendirmeye yardımcı olur.

Sıkça Sorulan Sorular

“Kısıt Doğrulama API'si” dersi ücretsiz mi?

Evet — “Kısıt Doğrulama API'si” 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.

“Kısıt Doğrulama API'si” dersinde ne öğreneceğim?

Yerleşik geçerlilik denetimini kullanı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 4. dersidir.

“Kısıt Doğrulama API'si” 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