Как мне сделать валидацию поля passwordConfirm через библиотеку vue-validate?

Не могу понять как сделать валидацию поля passwordConfirm. Т.е. Подтверждения такого же поля, что и password и ошибку в случаи не совпадения полей. Использую вот такую библиотеку БИБЛИОТЕКА

Компонент 1

<template>
  <div class="container mt-4 mx-auto ">
    <div class="bg-white">
      <div class="flex min-h-screen bg-white">
        <div class="md:w-1/2 max-w-lg mx-auto my-24 px-4 py-5 shadow-none">
          <div class="text-left p-0 font-sans">
            <h1 class=" text-gray-800 text-3xl font-medium text-center">
              Sign in
            </h1>
          </div>
          <form @submit.prevent="onSubmit" class="p-0">
            <div :class="['mt-5', { invalid: eError }]">
              <input
                name="email"
                type="email"
                id="email"
                v-model="email"
                class="block w-full p-2 border rounded border-gray-300 focus:outline-none focus:ring-1 focus:ring-gray-400 focus:border-transparent "
                placeholder="Email"
                @blur="eBlur"
              />
              <small class="text-red-500" v-if="eError">{{ eError }}</small>
            </div>

            <div :class="['mt-5', { invalid: pError }]">
              <input
                name="password"
                type="password"
                id="password"
                v-model="password"
                class="block w-full p-2 border rounded border-gray-300 focus:outline-none focus:ring-1 focus:ring-gray-400 focus:border-transparent "
                placeholder="Password"
                @blur="pBlur"
              />
              <small class="text-red-500" v-if="pError">{{ pError }}</small>
            </div>

            <div :class="['mt-5', { invalid: pError }]">
              <input
                name="passwordConfirm"
                type="password"
                id="passwordConfirm"
                v-model="passwordConfirm"
                class="block w-full p-2 border rounded border-gray-300 focus:outline-none focus:ring-1 focus:ring-gray-400 focus:border-transparent "
                placeholder="password confirm"
                @blur="pBlur"
              />
              <small class="text-red-500" v-if="pError">{{ pError }}</small>
            </div>

            <div class="wrapper-btn flex">
              <div class="mt-10 m-auto">
                <button
                  type="submit "
                  class=" focus:outline-none text-white text-sm py-2.5 px-5 rounded-md bg-green-500 hover:bg-green-600 hover:shadow-lg "
                >
                  Sign in
                </button>
              </div>
            </div>
            <div class="hr mt-5">
              <hr />
            </div>
          </form>
          <p class="text-center mt-5">
            Don't have an account?
            <router-link class="router text-yellow-400" to="/register">
              Register
            </router-link>
          </p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { values } from "lodash";
import { useLoginForm } from "../use/loginForm";

export default {
  setup() {
    return { ...useLoginForm() };
  },
};
</script>

логика валидации

import { useField, useForm } from "vee-validate";
import * as yup from "yup";
import { useStore } from "vuex";
import {useRouter} from 'vue-router'

export function useLoginForm() {
  const store = useStore()
  const router = useRouter()
  const { handleSubmit, isSubmitting } = useForm();

  const { value: email, errorMessage: eError, handleBlur: eBlur } = useField(
    "email",
    yup
      .string()
      .trim()
      .required()
      .email()
  );

  const onSubmit = handleSubmit(async values => {
    console.log("Form: ", values);
    console.log('STORE', store);
    await store.dispatch("auth/login", values)
    router.push('/')
  });

  const { value: password, errorMessage: pError, handleBlur: pBlur } = useField(
    "password",
    yup
      .string()
      .trim()
      .required()
      .min(8)
  );

  return {
    email,
    password,
    eError,
    pError,
    eBlur,
    pBlur,
    onSubmit,
    isSubmitting,
    passwordConfirm,
    
  };
 
  
}

Ответы (0 шт):