vee validate Download - vee validate le code source téléchargement

vee validate

Autre code source

v4.14.7

Télécharger

Formes de Vue indolore

Caractéristiques

? Facile: validation déclarative familière et facile à configurer
? ‍♀️ Flexible: validation synchrone, asynchrone, au niveau du champ ou au niveau de la forme
⚡️ Rapide: construire des formes plus rapides plus rapidement avec une API intuitive et une petite empreinte
? Minimal: ne gère que les préoccupations de la forme compliquée, vous donne un contrôle total sur tout le reste
? UI Agnostic: Fonctionne avec des éléments HTML natifs ou vos composants de bibliothèque d'interface utilisateur préférés
? Progressif: fonctionne que vous utilisiez Vue.js comme amélioration progressive ou dans une configuration complexe
✅ Règles intégrées: LIB compagnon avec plus de 25 règles qui couvrent la plupart des besoins dans la plupart des applications Web
I18N: 45+ LOCALES POUR LES RÈGLES INTÉRIEURES Contribuées par les développeurs du monde entier

Commencer

Installation

 # Install with yarn
yarn add vee-validate

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

Prise en charge de la version Vue

La version V4 principale prend en charge Vue 3.x uniquement, pour les versions précédentes de Vue, vérifiez le tableau suivant

Version Vue	Vee-valider la version	Lien de documentation
`2.x`	`2.x` ou `3.x`	v2 ou v3
`3.x`	`4.x`	v4

Usage

Vee-Validate propose deux styles pour intégrer la validation du formulaire dans vos applications Vue.js.

API de composition

Le moyen le plus rapide de créer une forme et de gérer sa validation, son comportement et ses valeurs est avec l'API de composition.

Créez votre formulaire avec useForm , puis utilisez defineField pour créer votre modèle de champ et vos accessoires / attributs et handleSubmit pour utiliser les valeurs et les envoyer à une 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 >

Vous pouvez faire bien plus que cela, pour plus d'informations, consultez la documentation de l'API de composition.

Composants déclaratifs

Des composants d'ordre supérieur peuvent également être utilisés pour construire des formulaires. Enregistrez les composants Field et Form et créez un validateur required simple:

 < 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 >