vee validate Скачать

vee validate

Другой исходный код

v4.14.7

Скачать

Безболезненные формы VUE

Функции

? Легко: декларативная проверка, которая является знакомым и простым в настройке
?
⚡ Быстро: строить более быстрее формируется с интуитивно понятным API и небольшим следствием
? Минимально: только обрабатывает сложные проблемы формы, дает вам полный контроль над всем остальным
? UI Agnostic: работает с нативными элементами HTML или вашими любимыми компонентами библиотеки пользовательского интерфейса
? Прогрессивный: работает, используете ли вы VUE.JS в качестве прогрессивного улучшения или в сложной настройке
✅ Встроенные правила: Companion Lib с 25+ правилами, которые охватывают большинство потребностей в большинстве веб-приложений
I18N: 45+ локалов для встроенных правил, внесенных разработчиками со всего мира

Начиная

Установка

 # Install with yarn
yarn add vee-validate

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

Vue Version Support

Основная версия V4 поддерживает Vue 3.x только для предыдущих версий Vue, проверьте следующую таблицу.

Версия VUE	Vee-Validate версия	Ссылка на документацию
`2.x`	`2.x` или `3.x`	V2 или V3
`3.x`	`4.x`	V4

Использование

VEE-Validate предлагает два стиля для интеграции валидации форм в приложения Vue.js.

Композиция API

Самый быстрый способ создать форму и управление его проверкой, поведением и значениями - это композиционный API.

Создайте свою форму с помощью useForm , а затем используйте defineField для создания модели поля и реквизита/атрибутов и handleSubmit чтобы использовать значения и отправить их в 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 >

Вы можете сделать гораздо больше, чем это, для получения дополнительной информации проверьте документацию по API композиции.

Декларативные компоненты

Компоненты высшего порядка также могут быть использованы для создания форм. Зарегистрируйте компоненты Field и Form и создайте простой 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 >