Descargar vee validate - Descargar el código fuente vee validate

vee validate

Otro código fuente

v4.14.7

Descargar

Formas de vue sin dolor

Características

? Fácil: validación declarativa que es familiar y fácil de configurar
? ‍♀️ Flexible: Validación sincrónica, asíncrona, a nivel de campo o a nivel de forma
⚡️ Rápido: construya formas más rápidas con API intuitiva y huella pequeña
? Mínimo: solo maneja las complicadas preocupaciones de forma, le brinda control total sobre todo lo demás
? UI Agnostic: funciona con elementos HTML nativos o sus componentes favoritos de la biblioteca de interfaz de usuario
? Progressive: funciona si usa Vue.js como una mejora progresiva o en una configuración compleja
✅ Reglas incorporadas: LIB de compañía con más de 25 reglas que cubren la mayoría de las necesidades en la mayoría de las aplicaciones web
i18n: 45+ locales para reglas integradas aportadas por desarrolladores de todo el mundo

Empezando

Instalación

 # Install with yarn
yarn add vee-validate

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

Soporte de versión VUE

La versión principal de V4 es compatible con Vue 3.x, para versiones anteriores de Vue, verifique la siguiente tabla

versión vue	Versión de Validato Vee	Enlace de documentación
`2.x`	`2.x` o `3.x`	V2 o V3
`3.x`	`4.x`	v4

Uso

Vee-Validate ofrece dos estilos para integrar la validación de formulario en sus aplicaciones Vue.js.

API de composición

La forma más rápida de crear una forma y administrar su validación, comportamiento y valores es con la API de composición.

Cree su formulario con useForm y luego use defineField para crear su modelo de campo y accesorios/atributos y handleSubmit para usar los valores y enviarlos a una 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 >

Puede hacer mucho más que esto, para obtener más información, consulte la documentación de la API de composición.

Componentes declarativos

Los componentes de orden superior también se pueden usar para construir formularios. Registre los componentes Field y Form y cree un validador simple required :

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