Vue Academy · Pelajaran

Pola Validasi Manual

Objek kesalahan reaktif, validasi saat blur vs submit, mencocokkan konfirmasi kata sandi.

Pola Validasi Manual adalah pelajaran Vue Academy gratis di CoddyKit. Ini adalah pelajaran 3 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.

Memvalidasi Tanpa Pustaka

Untuk formulir sederhana, Anda dapat melakukan validasi secara manual menggunakan status reaktif. Anda melacak kesalahan, menjalankan pemeriksaan saat pengiriman atau saat kehilangan fokus, dan menampilkan pesan dengan direktif. Ini mengajarkan dasar-dasar yang menjadi landasan setiap pustaka.

Objek Kesalahan

Simpan objek reaktif errors dengan kunci berupa nama bidang. String kosong (atau kunci yang tidak ada) berarti tidak ada kesalahan.

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

Fungsi Validasi

Tulis fungsi validate yang memeriksa setiap bidang dan menetapkan pesan pada objek kesalahan. Kembalikan apakah formulir valid.

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

Memvalidasi Saat Pengiriman

Panggil validate di awal penangan pengiriman dan hentikan proses jika validasi gagal. Dengan demikian, data yang tidak valid tidak akan dikirim.

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

Validasi Per Bidang Saat Kehilangan Fokus

Validasi hanya saat pengiriman dapat terasa lambat. Validasi satu bidang ketika pengguna meninggalkannya menggunakan @blur untuk mendapatkan umpan balik seketika.

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

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

Menampilkan Pesan Kesalahan

Gunakan v-if untuk menampilkan pesan hanya ketika bidang tersebut memiliki kesalahan. Letakkan pesan di dekat kolom masukan.

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

Memberi Gaya pada Bidang Tidak Valid

Ikat kelas dengan sintaks objek untuk menambahkan garis tepi merah saat terdapat kesalahan. Kelas tersebut hanya diterapkan selama errors.name bernilai benar.

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

Gaya Kesalahan

Aturan CSS kecil melengkapi tampilannya — garis tepi merah menandakan bahwa bidang tersebut perlu diperhatikan.

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

Validitas Terhitung

Turunkan penanda validitas keseluruhan dengan computed untuk mengaktifkan atau menonaktifkan tombol pengiriman secara reaktif.

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

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

Kelebihan dan Keterbatasan

Validasi manual bersifat transparan dan bebas dependensi, sehingga ideal untuk formulir kecil. Namun, ketika aturan bertambah — pemeriksaan antarb idang, validasi asinkron, dan banyak bidang — kode berulang semakin banyak. Itulah alasan pustaka tersedia.

Ringkasan Alur Validasi

Polanya adalah: kesalahan reaktif, fungsi validasi, menjalankannya saat pengiriman (dan bila perlu saat kehilangan fokus), menampilkan pesan dengan v-if, serta memberi gaya dengan kelas bersyarat.

Pemeriksaan Singkat

Uji pengetahuan Anda tentang validasi manual.

Ringkasan

Pola validasi manual:

Simpan objek reaktif errors dengan kunci berupa bidang.
Fungsi validate menetapkan pesan dan mengembalikan validitas.
Lakukan validasi saat pengiriman, dan per bidang saat @blur untuk mendapatkan umpan balik dengan cepat.
Tampilkan pesan dengan v-if="errors.x" dan beri gaya dengan :class="{ error: errors.x }".

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Pola Validasi Manual” gratis?

Ya — teks lengkap “Pola Validasi Manual” 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 “Pola Validasi Manual”?

Objek kesalahan reaktif, validasi saat blur vs submit, mencocokkan konfirmasi kata sandi. 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 3 dari 4.

Berapa lama pelajaran “Pola Validasi Manual” 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