Vue Academy · Ders

Şema Tabanlı Doğrulama için VeeValidate

useForm(), useField(), yup şemaları, hata iletileri, asenkron doğrulamayı ele alma.

Şema Tabanlı Doğrulama için VeeValidate, CoddyKit'te ücretsiz bir Vue 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, 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.

VeeValidate ile Ölçeklendirme

Formlar büyüdükçe elle yazılan doğrulama zahmetli hâle gelir. VeeValidate, form durumunu yöneten, bir schema kullanarak doğrulama çalıştıran ve hataları — tümünü tepkisel olarak — sunan popüler bir Vue kütüphanesidir.

Schema Tabanlı Doğrulama

Denetimleri elle yazmak yerine kuralları bildirime dayalı olarak bir schema içinde tanımlarsınız. VeeValidate ile yup'ı birlikte kullanarak bu schema'yı akıcı bir biçimde oluşturabilirsiniz.

<script setup>
import * as yup from 'yup'
const schema = yup.object({
  name: yup.string().required(),
  email: yup.string().email().required()
})
</script>

useForm ile Formu Ayarlama

useForm form düzeyindeki durumu ve doğrulamayı başlatır. Kullandığınız schema'yı validationSchema olarak ilettiğinizde her şeyi birbirine bağlar.

<script setup>
import { useForm } from 'vee-validate'
const { handleSubmit, errors } = useForm({
  validationSchema: schema
})
</script>

useField ile Alan Bağlama

useField, bir girdiyi adıyla kaydeder. Alanın value değerini, errorMessage hatasını ve handleBlur işleyicisini döndürür.

<script setup>
import { useField } from 'vee-validate'
const { value: name, errorMessage, handleBlur } = useField('name')
</script>

Alanı Şablona Bağlama

Döndürülen value değerini v-model ile bağlayın ve odaktan çıkıldığında doğrulama yapmak için @blur olayını handleBlur'a bağlayın.

<template>
  <input v-model="name" @blur="handleBlur" />
  <span>{{ errorMessage }}</span>
</template>

Hata Mesajını Gösterme

Her alan kendi errorMessage değerini sunar; bu, tepkisel bir dizedir. Alan geçerliyken boştur, geçersiz olduğunda schema mesajını içerir.

<template>
  <input v-model="name" @blur="handleBlur" />
  <span v-if="errorMessage" class="error">{{ errorMessage }}</span>
</template>

Gönderimi Ele Alma

handleSubmit, gönderim işlevinizi sarar. Önce doğrulamayı çalıştırır ve yalnızca formun tamamı geçerliyse değerlerle geri çağrı işlevinizi çağırır.

<script setup>
const onSubmit = handleSubmit((values) => {
  console.log('valid form', values)
})
</script>

<template>
  <form @submit="onSubmit">...</form>
</template>

Form Düzeyindeki Hatalar

useForm'dan gelen errors nesnesi, alan adlarını mevcut mesajlarıyla eşler; özet veya koşullu arayüz için kullanışlıdır.

<script setup>
const { errors } = useForm({ validationSchema: schema })
// errors.name, errors.email
</script>

Kütüphane Neden Kullanılır

Bildirime dayalı schemalar, tekrarlanan elle yazılmış denetimlerin yerini alır.
Odaktan çıkma, değişiklik ve gönderim doğrulaması için yerleşik zamanlama.
Alan bazında errorMessage ve form düzeyinde errors.
yup aracılığıyla kolay eşzamansız ve alanlar arası kurallar.

Bileşenler ve Bileşim API'si

VeeValidate, şablon öncelikli bir stil için <Form> ve <Field> bileşenlerini de sunar. Bileşim işlevleri useForm ve useField, <script setup> ile daha iyi uyum sağlar ve daha fazla denetim sunar.

Elle Doğrulama ve Schema Tabanlı Doğrulama

Elle doğrulama, işleyişi öğretir ve küçük formlara uygundur. VeeValidate ve yup ile schema tabanlı doğrulama, çok daha az kod ve daha az hatayla büyük, karmaşık formlara ölçeklenir.

Hızlı Kontrol

VeeValidate bilginizi sınayın.

Özet

VeeValidate ile schema tabanlı doğrulama:

Kuralları validationSchema olarak iletilen bir yup schemasında tanımlayın.
useForm, form durumunu, errors nesnesini ve handleSubmit işlevini yönetir.
useField, her girdi için value, errorMessage ve handleBlur değerlerini döndürür.
Büyük formlarda elle doğrulamaya göre çok daha iyi ölçeklenir.

Sıkça Sorulan Sorular

“Şema Tabanlı Doğrulama için VeeValidate” dersi ücretsiz mi?

Evet — “Şema Tabanlı Doğrulama için VeeValidate” 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.

“Şema Tabanlı Doğrulama için VeeValidate” dersinde ne öğreneceğim?

useForm(), useField(), yup şemaları, hata iletileri, asenkron doğrulamayı ele alma. 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 4. dersidir.

“Şema Tabanlı Doğrulama için VeeValidate” 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