Как мне сделать валидацию поля 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,
};
}