Валидация

Валидация осуществляется с помощью ресолвера (параметр resolver у ValidationProvider)

<script lang="ts">
import { ValidationField, ValidationProvider } from 'vue-validate-form';

export default {
  components: { ValidationProvider, ValidationField },
  methods: {
    resolver(values) {
      if (String(values.firstName)?.length >= 5) {
        return {
          values,
          errors: {},
        };
      }
      return {
        values: {},
        errors: {
          firstName: {
            type: 'minLength',
            message: 'min length 5',
          },
        },
      };
    },
    onSubmit(values) {},
  },
};
</script>

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

        <div>{{ errors.firstName }}</div>
      </form>
    </template>
  </ValidationProvider>
</template>

TIP

Параметр resolver - фукнция, которая принимает на вход текущее состояние формы и ожидает на выходе объект c новым состоянием формы и ошибками формы

Базовые валидаторы

Существует отдельный пакет с набором базовых валидаторов @vue-validate-form/validators

npm install @vue-validate-form/validators

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

<script lang="ts">
import { minLength } from '@vue-validate-form/validators';
import { ValidationField, ValidationProvider } from 'vue-validate-form';

export default {
  components: { ValidationProvider, ValidationField },
  resolver(values) {
    const result = {
      values,
      errors: {},
    };
    if (!minLength(values.firstName, 5)) {
      result.errors.firstName = [{ message: 'min length 5' }];
    }
    return result;
  },
  methods: {
    onSubmit(values) {},
  },
};
</script>

<template>
  <ValidationProvider
    :resolver="$options.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

По-умолчанию vue-validate-form начинает валидировать поля после первой попытки отправить форму (вызов метода handleSubmit у ValidationProvider). Это поведение может быть изменено с помощью параметра instantValidate у ValidationProvider