Unduh vee validate - vee validate source code download

vee validate

Kode sumber lainnya

v4.14.7

Unduh

Bentuk vue tanpa rasa sakit

Fitur

? Mudah: validasi deklaratif yang akrab dan mudah diatur
?
⚡️ Cepat: Bangun bentuk lebih cepat lebih cepat dengan API intuitif dan jejak kecil
? Minimal: Hanya menangani masalah bentuk yang rumit, memberi Anda kendali penuh atas yang lainnya
? UI Agnostik: Bekerja dengan elemen HTML asli atau komponen perpustakaan UI favorit Anda
? Progresif: Bekerja apakah Anda menggunakan vue.js sebagai peningkatan progresif atau dalam pengaturan yang kompleks
✅ Aturan bawaan: lib pendamping dengan 25+ aturan yang mencakup sebagian besar kebutuhan di sebagian besar aplikasi web
I18N: 45+ Lokal untuk aturan bawaan yang disumbangkan oleh pengembang dari seluruh dunia

Memulai

Instalasi

 # Install with yarn
yarn add vee-validate

# Install with npm
npm install vee-validate --save

Dukungan Versi Vue

Versi V4 utama hanya mendukung Vue 3.x, untuk versi Vue sebelumnya, periksa tabel berikut

Versi Vue	Versi Vee-Validate	Tautan dokumentasi
`2.x`	`2.x` atau `3.x`	V2 atau V3
`3.x`	`4.x`	v4

Penggunaan

Vee-Validate menawarkan dua gaya untuk mengintegrasikan validasi formulir ke dalam aplikasi Vue.js Anda.

API Komposisi

Cara tercepat untuk membuat formulir dan mengelola validasi, perilaku, dan nilainya adalah dengan API komposisi.

Buat formulir Anda dengan useForm dan kemudian gunakan defineField untuk membuat model lapangan dan alat peraga/atribut dan handleSubmit untuk menggunakan nilai -nilai dan mengirimkannya ke API.

 < script setup >
import { useForm } from ' vee-validate ' ;

// Validation, or use `yup` or `zod`
function required ( value ) {
  return value ? true : ' This field is required ' ;
}

// Create the form
const { defineField , handleSubmit , errors } = useForm ({
  validationSchema : {
    field : required,
  },
});

// Define fields
const [ field , fieldProps ] = defineField ( ' field ' );

// Submit handler
const onSubmit = handleSubmit ( values => {
  // Submit to API
  console . log (values);
});
</ script >

< template >
  < form @ submit = " onSubmit " >
    < input v-model = " field " v-bind = " fieldProps " />
    < span >{{ errors . field }}</ span >

    < button >Submit</ button >
  </ form >
</ template >

Anda dapat melakukan lebih dari ini, untuk info lebih lanjut, periksa dokumentasi API komposisi.

Komponen deklaratif

Komponen tingkat tinggi juga dapat digunakan untuk membangun bentuk. Daftarkan komponen Field dan Form dan buat validator required sederhana:

 < script setup >
import { Field , Form } from ' vee-validate ' ;

// Validation, or use `yup` or `zod`
function required ( value ) {
  return value ? true : ' This field is required ' ;
}

// Submit handler
function onSubmit ( values ) {
  // Submit to API
  console . log (values);
}
</ script >

< template >
  < Form v-slot = " { errors } " @ submit = " onSubmit " >
    < Field name = " field " : rules = " required " />

    < span >{{ errors . field }}</ span >

    < button >Submit</ button >
  </ Form >
</ template >