вступление

VeeValidate — одна из самых популярных библиотек форм Vue.js, которая помогает вам проверять входные данные формы — в настоящее время доступна в версии 4. Библиотека упрощает проверку полей ввода формы при отправке формы. Однако иногда вы хотите сообщить пользователю, что форма еще не полностью заполнена и проверена, отключив кнопку отправки.

В этом руководстве

Проект Vue 3 настраивается с помощью Vite до установки VeeValidate 4. В то время как Composition API с синтаксисом <script setup> используется для самого приложения, базовая форма создается с использованием компонентов <Form / и <Field /> VeeValidate, а не композиции useForm() и useField(). функции. Окончательная форма будет содержать пользовательский компонент кнопки отправки, который отключен, пока форма не будет полностью заполнена и проверена с помощью функций композиции useIsFormValid() и useIsFormDirty().

Обратите внимание, что это решение — только одно из многих!

Предпосылки

  • Базовое понимание того, как работать с Vue 3 + Vite, Composition API и синтаксисом <script setup>
  • Базовое понимание того, как работать с VeeValidate 4, например с компонентами <Form />, <Field /> и <ErrorMessage />.
  • node.js установлен на вашем компьютере

Установите Vue 3 и VeeValidate 4.

Откройте свой терминал в нужном рабочем каталоге и инициализируйте новое приложение Vue 3 с помощью Vite, выполнив следующую команду, как описано в документации:

npm init vue@latest

Вас могут попросить установить create-vue@latest, официальный инструмент создания каркаса проекта Vue. Подтвердите установку, введя y и нажав enter. Далее вы можете ввести имя проекта и выбрать дополнительные функции, которые не нужны в контексте этого руководства. Поэтому отвечайте на все из них No.

Теперь перейдите в корневую папку проекта, добавьте VeeValidate и установите все зависимости:

cd vue3_vite_i18n
npm add vee-validate
npm install

Примечание, чтобы избежать путаницы: компоненты и файлы CSS, созданные create-vue@latest внутри каталогов src/components/ и src/assets/, не нужны в контексте этого руководства и могут быть удалены.

Базовая форма

В демонстрационных целях мы заменяем содержимое компонента App.vue следующим содержимым:

<template> содержит форму с двумя полями ввода, двумя полями для сообщений об ошибках и компонентом кнопки для отправки формы. Вместо использования элементов <input> HTML5 для полей ввода firstName и lastName мы используем компоненты <Field /> из VeeValidate. Оба будут отображаться как текстовые поля ввода, как указано в атрибуте type attribute.

Правила, определенные с помощью атрибута :rules, используются VeeValidate для проверки ввода. В приведенном выше примере мы только проверяем, содержит ли поле какое-либо значение (строки с 9 по 11). Если нет, мы возвращаем сообщение об ошибке. Затем сообщение об ошибке отображается в соответствующем компоненте <ErrorMessage />. Для корректной работы значения атрибутов name компонента <Field /> и соответствующего компонента <ErrorMessage /> должны совпадать.

Вместо использования элемента HTML5 <button> для отправки формы мы используем компонент <CustomButton />, который будет создан и объяснен на следующем шаге.

Элементы формы обернуты компонентом VeeValidate <Form />, а не стандартным элементом HTML5 <form>. При отправке VeeValidate проверяет поля ввода формы в соответствии с определенными правилами перед вызовом функции-обработчика onSubmit() (строки 5–7), как определено в начальном теге (строка 15). Функция обработчика просто записывает значения формы в консоль.

Кнопка отправки

В src/components/ создайте новый файл CustomButton.vue со следующим содержимым:

Шаблон содержит элемент <button>, чей атрибут :disabled привязан к вспомогательным функциям useIsFormValid() и useIsformDirty() из VeeValidate через вычисляемое свойство isDisabled (строки 8–9). Обе вспомогательные функции возвращают вычисленные ссылки на значения свойств valid и dirty из состояния meta формы, которые можно получить с помощью valid.value и dirty.value соответственно. valid становится true, когда форма успешно проверена, и false в противном случае. dirty становится истинным, если значение хотя бы одного поля было изменено. Поэтому isDisabled возвращает false только в том случае, если оба значения isDirty и isValid равны true. На этом этапе форма полностью заполнена и проверена, и кнопка отправки может быть активирована.

Причина использования valid и свойства dirty, а не просто valid заключается в том, что valid может быть true в ситуациях, когда форма еще не проверена.

Из документации на useIsFormValid():

Создание отключенных кнопок на основе атрибута valid не является точным, потому что, если форма еще не проверена, свойство valid будет иметь значение true, что неверно. Вы должны комбинировать valid проверки с dirty состоянием, чтобы получить максимальную точность.

Еще одна вещь, на которую следует обратить внимание, это то, что вспомогательные функции useIsFormValid() и useIsFormDirty() доступны для дочерних компонентов компонента <Form />. Вот почему кнопка отправки реализована не в App.vue, а в отдельном компоненте, который, в свою очередь, предназначен для использования в качестве дочернего компонента компонента <Form />.

Из документации:

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

Результат

Перестройте проект с помощью

npm run dev

и перейдите к http://localhost1:5173.

Как видите, кнопка отправки отключена, если оба поля ввода недействительны.

Краткое содержание

При использовании VeeValidate 4 для проверки формы кнопка отправки может быть отключена для недопустимых форм различными способами. В этом руководстве мы использовали вспомогательные функции VeeValidate useIsFormDirty() и useIsFormValid() для включения/отключения кнопки отправки. Поскольку вспомогательные функции предоставляют состояние проверки <Form /> дочерним компонентам, кнопка отправки реализована как отдельный компонент, который, в свою очередь, используется как дочерний компонент <Form />.

Исходный код

"Суть"