Валидация с помощью вспомогательных библиотек

Существует отдельный пакет с набором ресолверов @vue-validate-form/resolvers (пока поддерживается только yup)

npm install @vue-validate-form/resolvers yup

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

<script lang="ts">
import { yupResolver } from '@vue-validate-form/resolvers';
import { ValidationField, ValidationProvider } from 'vue-validate-form';
import { object, string } from 'yup';

export default {
  components: { ValidationProvider, ValidationField },
  computed: {
    resolver() {
      return yupResolver(
        object({
          firstName: string().required(),
        }),
      );
    },
  },
  methods: {
    onSubmit(values) {},
  },
};
</script>

<template>
  <ValidationProvider
    :resolver="resolver"
    @submit="onSubmit"
  >
    <template #default="{ handleSubmit }">
      <form
        novalidate
        @submit.prevent="handleSubmit"
      >
        <ValidationField name="firstName">
          <template #default="{ modelValue, onChange }">
            <input
              :value="modelValue"
              type="text"
              @input="onChange($event.target.value)"
            >
          </template>
        </ValidationField>
      </form>
    </template>
  </ValidationProvider>
</template>

TIP

Почему параметр resolver computed? yupResolver возвращает функцию для валидации, но при этом схема может быть динамической и зависеть от состояния компонента (data, props и т.п.).

Например: У вас общая схема для создания и редактирования, для редактировать параметр id обязателен, а вот для создания его нет

<script lang="ts">
import { yupResolver } from '@vue-validate-form/resolvers';
import { ValidationField, ValidationProvider } from 'vue-validate-form';
import { number, object, string } from 'yup';

export default {
  components: { ValidationProvider, ValidationField },
  props: {
    isNew: Boolean,
  },
  computed: {
    resolver() {
      const fields = {
        firstName: string().required(),
      };
      if (this.isNew) {
        fields.id = number().required();
      }
      return yupResolver(object(fields));
    },
  },
  methods: {
    onSubmit(values) {},
  },
};
</script>

<template>
  <ValidationProvider
    :resolver="resolver"
    @submit="onSubmit"
  >
    <template #default="{ handleSubmit }">
      <form
        novalidate
        @submit.prevent="handleSubmit"
      >
        <ValidationField name="firstName">
          <template #default="{ modelValue, onChange }">
            <input
              :value="modelValue"
              type="text"
              @input="onChange($event.target.value)"
            >
          </template>
        </ValidationField>
      </form>
    </template>
  </ValidationProvider>
</template>