Для начала установим Vuelidate в свой проект, введем команду установки в консоли - npm install @vuelidate/core @vuelidate/validators.
Теперь, в том компоненте, в котором мы будем использовать Vuelidate нам нужно будет его импортировать, как показано в примерах ниже.
main.js
/* jshint ignore:start */
import Vue from "vue"
import App from "./App.vue"
new Vue({
el: "#app",
render: h => h(App)
})
App.vue
<template>
<div>
<div class="container">
<form class="pt-3">
<div class="form-group">
<label for="email">Email</label>
<input
type="email"
id="email"
class="form-control"
@input="v$.email.$touch()"
v-model="email">
</div>
<pre>{{ v$.email }}</pre>
</form>
</div>
</div>
</template>
<script>
import { useVuelidate } from '@vuelidate/core'
import { required, email } from '@vuelidate/validators'
export default {
setup () {
return { v$: useVuelidate() }
},
data() {
return {
email: ""
}
},
validations() {
return {
email: { required, email }
}
}
}
</script>
<style scoped></style>
Инициализацию валидации лучше всего делать на событие "blur", поэтому желательно сменить строку "@input="v$.email.$touch()"" на "@blur="v$.email.$touch()"".
Приведу все на примере.
App.vue
<template>
<div>
<div class="container">
<form class="pt-3">
<div class="form-group">
<label for="email">Email</label>
<input
type="email"
id="email"
class="form-control"
:class="{'is-invalid': v$.email.$error}"
@blur="v$.email.$touch()"
v-model="email">
<div class="invalid-feedback" v-if="!v$.email.required.$response">
Поле email обязательное
</div>
<div class="invalid-feedback" v-if="!v$.email.email.$response">
Введите email пожалуйста
</div>
</div>
<pre>{{ v$.email }}</pre>
</form>
</div>
</div>
</template>
<script>
import { useVuelidate } from '@vuelidate/core'
import { required, email } from '@vuelidate/validators'
export default {
setup () {
return { v$: useVuelidate() }
},
data() {
return {
email: ""
}
},
validations() {
return {
email: { required, email }
}
}
}
</script>
<style scoped></style>
Пример валидации пароля.
Пример
<template>
<div>
<div class="container">
<form class="pt-3">
<div class="form-group">
<label for="email">Email</label>
<input
type="email"
id="email"
class="form-control"
:class="{'is-invalid': v$.email.$error}"
@blur="v$.email.$touch()"
v-model="email">
<div class="invalid-feedback" v-if="!v$.email.required.$response">
Поле email обязательное
</div>
<div class="invalid-feedback" v-if="!v$.email.email.$response">
Введите email пожалуйста
</div>
</div>
<div class="form-group">
<label for="password">Password</label>
<input
type="password"
id="password"
class="form-control"
:class="{'is-invalid': v$.password.$error}"
@blur="v$.password.$touch()"
v-model="password">
<div class="invalid-feedback" v-if="!v$.password.required.$response">
Поле password обязательное
</div>
<div class="invalid-feedback" v-if="!v$.password.minLength.$response">
Пароль должен содержать минимум {{ v$.password.minLength.$params.min }} символов, сейчас у вас {{ password.length }}
</div>
</div>
<!-- <pre>{{ v$.password }}</pre> -->
</form>
</div>
</div>
</template>
<script>
import { useVuelidate } from '@vuelidate/core'
import { required, email, minLength } from '@vuelidate/validators'
export default {
setup () {
return { v$: useVuelidate() }
},
data() {
return {
email: "",
password: "",
}
},
validations() {
return {
email: { required, email },
password: {
required,
minLength: minLength (6)
}
}
}
}
</script>
<style scoped></style>
Пример отправки формы.
Пример
<template>
<div>
<div class="container">
<form class="pt-3" @submit.prevent="onSubmit">
<div class="form-group">
<label for="email">Email</label>
<input
type="email"
id="email"
class="form-control"
:class="{'is-invalid': v$.email.$error}"
@blur="v$.email.$touch()"
v-model="email">
<div class="invalid-feedback" v-if="!v$.email.required.$response">
Поле email обязательное
</div>
<div class="invalid-feedback" v-if="!v$.email.email.$response">
Введите email пожалуйста
</div>
</div>
<div class="form-group">
<label for="password">Password</label>
<input
type="password"
id="password"
class="form-control"
:class="{'is-invalid': v$.password.$error}"
@blur="v$.password.$touch()"
v-model="password">
<div class="invalid-feedback" v-if="!v$.password.required.$response">
Поле password обязательное
</div>
<div class="invalid-feedback" v-if="!v$.password.minLength.$response">
Пароль должен содержать минимум {{ v$.password.minLength.$params.min }} символов, сейчас у вас {{ password.length }}
</div>
</div>
<br>
<button
class="btn btn-success"
type="submit"
:disabled="v$.$invalid"
>Отправить</button>
<!-- <pre>{{ v$.password }}</pre> -->
</form>
</div>
</div>
</template>
<script>
import { useVuelidate } from '@vuelidate/core'
import { required, email, minLength } from '@vuelidate/validators'
export default {
setup () {
return { v$: useVuelidate() }
},
data() {
return {
email: "",
password: "",
}
},
methods: {
onSubmit() {
console.log (this.email)
console.log (this.password)
}
},
validations() {
return {
email: { required, email },
password: {
required,
minLength: minLength (6)
}
}
}
}
</script>
<style scoped></style>