Vue Academy · Pelajaran

VeeValidate untuk Validasi Berbasis Skema

useForm(), useField(), skema yup, pesan kesalahan, menangani validasi asinkron.

VeeValidate untuk Validasi Berbasis Skema adalah pelajaran Vue Academy gratis di CoddyKit. Ini adalah pelajaran 4 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Vue Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Vue Academy mencakup 4 pelajaran total.

Meningkatkan Skala dengan VeeValidate

Seiring bertambahnya formulir, validasi yang ditulis manual menjadi merepotkan. VeeValidate adalah pustaka Vue populer yang mengelola status formulir, menjalankan validasi berdasarkan skema, dan menyediakan kesalahan — semuanya secara reaktif.

Validasi Berbasis Skema

Daripada menulis pemeriksaan secara manual, Anda menjelaskan aturan secara deklaratif dalam schema. Memadukan VeeValidate dengan yup memungkinkan Anda membangun skema tersebut dengan lancar.

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

Menyiapkan Formulir dengan useForm

useForm menginisialisasi status dan validasi tingkat formulir. Teruskan skema Anda sebagai validationSchema, lalu semuanya akan terhubung secara otomatis.

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

Menghubungkan Bidang dengan useField

useField mendaftarkan satu kolom masukan berdasarkan nama. Fungsi ini mengembalikan value bidang tersebut, errorMessage-nya, dan penangan handleBlur.

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

Mengikat Bidang dalam Templat

Ikat value yang dikembalikan dengan v-model dan hubungkan @blur ke handleBlur untuk validasi saat kehilangan fokus.

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

Menampilkan Pesan Kesalahan

Setiap bidang menyediakan errorMessage-nya sendiri, yang berupa string reaktif. Nilainya kosong jika valid dan berisi pesan dari skema jika tidak valid.

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

Menangani Pengiriman

handleSubmit membungkus fungsi pengiriman Anda. Fungsi ini menjalankan validasi terlebih dahulu dan hanya memanggil callback Anda dengan nilai-nilai tersebut jika seluruh formulir valid.

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

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

Kesalahan Tingkat Formulir

Objek errors dari useForm memetakan nama bidang ke pesan terkininya, sehingga berguna untuk ringkasan atau antarmuka bersyarat.

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

Mengapa Menggunakan Pustaka

Skema deklaratif menggantikan pemeriksaan manual yang berulang.
Pengaturan waktu validasi bawaan untuk kehilangan fokus, perubahan, dan pengiriman.
errorMessage per bidang dan errors tingkat formulir.
Aturan asinkron dan lintas bidang yang mudah melalui yup.

Komponen vs API Komposisi

VeeValidate juga menyediakan komponen <Form> dan <Field> untuk gaya yang mengutamakan templat. Fungsi komposisi useForm dan useField lebih cocok dengan <script setup> dan memberikan lebih banyak kendali.

Manual vs Berbasis Skema

Validasi manual mengajarkan mekanismenya dan cocok untuk formulir yang sangat kecil. Validasi berbasis skema dengan VeeValidate dan yup dapat diterapkan pada formulir besar dan kompleks dengan jauh lebih sedikit kode serta lebih sedikit kesalahan.

Pemeriksaan Singkat

Uji pengetahuan Anda tentang VeeValidate.

Ringkasan

Validasi berbasis skema dengan VeeValidate:

Jelaskan aturan dalam skema yup yang diteruskan sebagai validationSchema.
useForm mengelola status formulir, errors, dan handleSubmit.
useField mengembalikan value, errorMessage, dan handleBlur untuk setiap kolom masukan.
Metode ini jauh lebih mudah ditingkatkan skalanya daripada validasi manual untuk formulir besar.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “VeeValidate untuk Validasi Berbasis Skema” gratis?

Ya — teks lengkap “VeeValidate untuk Validasi Berbasis Skema” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Vue Academy, upgrade ke CoddyKit PRO. Kursus Vue Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “VeeValidate untuk Validasi Berbasis Skema”?

useForm(), useField(), skema yup, pesan kesalahan, menangani validasi asinkron. Kamu berlatih Vue Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai Vue Academy?

Tidak diperlukan pengalaman sebelumnya. Vue Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 4 dari 4.

Berapa lama pelajaran “VeeValidate untuk Validasi Berbasis Skema” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran Vue Academy ini?

Ya. Setiap pelajaran Vue Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

v-model pada Semua Elemen Formulir
Pengiriman dan Pengaturan Ulang Formulir
Pola Validasi Manual
VeeValidate untuk Validasi Berbasis Skema

← Kembali ke Vue Academy