vee validate Download - vee validate Quellcode Download

vee validate

Anderer Quellcode

v4.14.7

Herunterladen

Schmerzlose Vue -Formen

Merkmale

? Einfach: deklarative Validierung, die vertraut und einfach zu richten ist
?
⚡️ Schnell: Bauen Sie schneller Formen schneller mit intuitiver API und kleinem Fußabdruck
? Minimal: Nur mit den komplizierten Form von Formularbedenken handelt, gibt Ihnen die volle Kontrolle über alles andere
? UI Agnostic: Arbeitet mit nativen HTML -Elementen oder Ihren bevorzugten UI -Bibliothekskomponenten
? Progressive: Funktioniert, ob Sie Vue.js als progressive Verbesserung oder in einem komplexen Setup verwenden
✅ integrierte Regeln: Begleitlib mit 25+ Regeln, die in den meisten Webanwendungen die meisten Anforderungen abdecken
I18N: 45 mehr als Orte für integrierte Regeln, die von Entwicklern aus aller Welt beigetragen wurden

Erste Schritte

Installation

 # Install with yarn
yarn add vee-validate

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

VUE -Versionsunterstützung

Die Hauptversion von V4 unterstützt Vue 3.x nur für vorherige VUE -Versionen, die folgende Tabelle überprüfen.

Vue -Version	Vee-Validate Version	Dokumentationslink
`2.x`	`2.x` oder `3.x`	v2 oder v3
`3.x`	`4.x`	v4

Verwendung

Vee-Validate bietet zwei Stile an, um die Formularvalidierung in Ihre VUE.JS-Apps zu integrieren.

Kompositionsapi

Der schnellste Weg, um ein Formular zu erstellen und seine Validierung, sein Verhalten und seine Werte zu verwalten, ist die Kompositions -API.

Erstellen Sie Ihr Formular mit useForm und verwenden Sie defineField um Ihr Feldmodell und Ihre Requisiten/Attribute und handleSubmit zu erstellen, um die Werte zu verwenden, und senden Sie sie an eine 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 >

Sie können so viel mehr tun. Weitere Informationen finden Sie in der Kompositions -API -Dokumentation.

Deklarative Komponenten

Komponenten höherer Ordnung können auch zum Erstellen von Formularen verwendet werden. Registrieren Sie das Field und Form und erstellen Sie einen einfachen required Validator:

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