vee validate Download - vee validate Código Fonte Download

vee validate

Outro código-fonte

v4.14.7

Baixar

Formas de vue indolor

Características

? Fácil: Validação declarativa que é familiar e fácil de configurar
? ‍♀️ Flexível: síncrona, assíncrona, em nível de campo ou validação no nível de formulário
⚡️ rápido: construir formas mais rápidas com API intuitiva e pegada pequena
? Mínimo: apenas lida com as preocupações complicadas do formulário, oferece controle total sobre tudo o mais
? UI Agnóstico: Trabalha com elementos HTML nativos ou seus componentes favoritos da biblioteca da interface do usuário
? Progressivo: funciona se você usa o vue.js como um aprimoramento progressivo ou em uma configuração complexa
✅ Regras internas: Companheiro Lib com mais de 25 regras que abrangem a maioria das necessidades na maioria dos aplicativos da Web
I18n: 45 mais de locais para regras internas contribuídas por desenvolvedores de todo o mundo

Começando

Instalação

 # Install with yarn
yarn add vee-validate

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

Suporte da versão VUE

A versão principal V4 suporta apenas o Vue 3.x, para versões anteriores do Vue, verifique o seguinte a tabela

versão vue	Versão VEE-Validate	Link de documentação
`2.x`	`2.x` ou `3.x`	v2 ou v3
`3.x`	`4.x`	v4

Uso

O VEE-Validate oferece dois estilos para integrar a validação de formulário em seus aplicativos Vue.js.

API de composição

A maneira mais rápida de criar um formulário e gerenciar sua validação, comportamento e valores é com a API de composição.

Crie seu formulário com useForm e use defineField para criar seu modelo de campo e adereços/atributos e handleSubmit para usar os valores e enviá -los para uma 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 >

Você pode fazer muito mais do que isso, para obter mais informações, verifique a documentação da API de composição.

Componentes declarativos

Os componentes de ordem superior também podem ser usados para criar formulários. Registre o Field e Form componentes e crie um validador simples 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 >