Vue Academy · Ders

Elle Doğrulama Kalıpları

Reaktif hata nesneleri, bulanıklaştırma ve gönderme sırasında doğrulama karşılaştırması, parola onayını eşleştirme.

Elle Doğrulama Kalıpları, CoddyKit'te ücretsiz bir Vue 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, Vue Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Vue Academy kursu toplamda 4 dersten oluşur.

Kütüphane Kullanmadan Doğrulama

Basit formlar için tepkisel durumu kullanarak elle doğrulama yapabilirsiniz. Hataları izler, gönderimde veya odaktan çıkıldığında denetimleri çalıştırır ve mesajları yönergelerle gösterirsiniz. Bu, her kütüphanenin üzerine kurulduğu temelleri öğretir.

Hata Nesnesi

Alan adlarını anahtar olarak kullanan tepkisel bir errors nesnesi tutun. Boş bir dize (veya eksik anahtar), hata olmadığı anlamına gelir.

<script setup>
import { reactive } from 'vue'
const form = reactive({ name: '', email: '' })
const errors = reactive({ name: '', email: '' })
</script>

Bir <code>validate</code> İşlevi

Her alanı denetleyen ve hata nesnesine mesajlar atayan bir validate işlevi yazın. Formun geçerli olup olmadığını döndürün.

<script setup>
function validate() {
  errors.name = form.name ? '' : 'Name is required'
  errors.email = form.email.includes('@') ? '' : 'Invalid email'
  return !errors.name && !errors.email
}
</script>

Gönderimde Doğrulama

Gönderim işleyicinizin başında validate çağırın ve başarısız olursa işlemi durdurun. Böylece geçersiz verilerin gönderilmemesi garanti edilir.

<script setup>
function onSubmit() {
  if (!validate()) return
  // proceed to send
}
</script>

Odaktan Çıkıldığında Alan Bazında Doğrulama

Yalnızca gönderimde doğrulama yapmak yavaş hissettirebilir. Anında geri bildirim için kullanıcı alandan ayrıldığında @blur kullanarak tek bir alanı doğrulayın.

<script setup>
function validateName() {
  errors.name = form.name ? '' : 'Name is required'
}
</script>

<template>
  <input v-model="form.name" @blur="validateName" />
</template>

Hata Mesajlarını Gösterme

Bir alan hata içerdiğinde yalnızca mesaj göstermek için v-if kullanın. Mesajı girdinin yakınına yerleştirin.

<template>
  <input v-model="form.name" @blur="validateName" />
  <span v-if="errors.name" class="msg">{{ errors.name }}</span>
</template>

Geçersiz Alanları Biçimlendirme

Hata olduğunda kırmızı kenarlık eklemek için nesne söz dizimiyle bir sınıf bağlayın. Sınıf yalnızca errors.name doğru kabul edilen bir değer taşıdığında uygulanır.

<input
  v-model="form.name"
  :class="{ error: errors.name }"
  @blur="validateName"
/>

Hata Stili

Küçük bir CSS kuralı görünümü tamamlar — kırmızı kenarlık, alanın ilgilenilmesi gerektiğini belirtir.

<style>
.error { border: 1px solid red; }
.msg { color: red; font-size: 12px; }
</style>

Hesaplanan Geçerlilik

Gönder düğmesini tepkisel olarak etkinleştirmek veya devre dışı bırakmak için computed ile genel bir geçerlilik göstergesi türetin.

<script setup>
import { computed } from 'vue'
const isValid = computed(() => !errors.name && !errors.email)
</script>

<template>
  <button :disabled="!isValid">Submit</button>
</template>

Güçlü Yönler ve Sınırlar

Elle doğrulama şeffaf ve bağımlılıksızdır; küçük formlar için idealdir. Ancak kurallar — alanlar arası denetimler, eşzamansız doğrulama, çok sayıda alan — arttıkça tekrar eden temel kod birikir; kütüphaneler bu nedenle vardır.

Doğrulama Akışının Özeti

Yaklaşım şöyledir: tepkisel hatalar, bir doğrulama işlevi, bunu gönderimde (ve isteğe bağlı olarak odaktan çıkıldığında) çalıştırma, mesajları v-if ile gösterme ve koşullu bir sınıfla biçimlendirme.

Hızlı Kontrol

Elle doğrulama bilginizi sınayın.

Özet

Elle doğrulama yaklaşımları:

Alanları anahtar olarak kullanan tepkisel bir errors nesnesi tutun.
Bir validate işlevi mesajları ayarlar ve geçerlilik durumunu döndürür.
Gönderimde, hızlı geri bildirim için de her alanı @blur ile doğrulayın.
Mesajları v-if="errors.x" ile gösterin ve :class="{ error: errors.x }" ile biçimlendirin.

Sıkça Sorulan Sorular

“Elle Doğrulama Kalıpları” dersi ücretsiz mi?

Evet — “Elle Doğrulama Kalıpları” 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 Vue Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Vue Academy kursu toplamda 4 dersten oluşur.

“Elle Doğrulama Kalıpları” dersinde ne öğreneceğim?

Reaktif hata nesneleri, bulanıklaştırma ve gönderme sırasında doğrulama karşılaştırması, parola onayını eşleştirme. Vue 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.

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

Önceden deneyim gerekmez. CoddyKit'te Vue 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.

“Elle Doğrulama Kalıpları” 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 Vue Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her Vue 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

← Vue Academy Sayfasına Dön