Validations beyond forms

Слайд 2

Validations beyond forms Главное отличие от всех остальных библиотек - валидация

Validations beyond forms

Главное отличие от всех остальных библиотек - валидация полностью

отделена от темплейта.
Для каждого значения, которое нужно валидировать нужно создать ключ внутри опции validations().
import Vue from 'vue'
import Validations from 'vuelidate'
import { email, required } from 'vuelidate/lib/validators'
Vue.use(Validations)
new Vue({
el: '#app',
data () {
return {
email: '',
}
},
validations: {
email: { required, email } // rules object
}
}
Слайд 3

Reserved keywords Модель $v представляет текущее состояние проверки. Это делается путем

Reserved keywords

Модель $v представляет текущее состояние проверки. Это делается путем свойств,

которые содержат выходные данные функций проверки, определенных пользователем.
1. $invalid - показывает состояние модели. True - когда один из валидаторов принимает значение false;
2. $dirty - изменение модели;
3. $error - флаг для показа сообщения. $invalid && dirty;
4. $pending - показывает true, если один из «детей» ожидает асинхронной проверки. Всегда false, если все валидаторы синхронные;
5. $params - кастомные параметры, удобно (нет), например, для добавления кастомных ошибок для валидатора;
6. $each - сохраняет все ключи исходной модели, можно безопасно использовать в циклах.
Есть зарезервированный набор стандартных методов для контроля модели валидации. Работают в связке с обработчиками событий (бинды @input и @blur):
1. $touch - устанавливает dirty flag;
2. $reset - сбрасывает валидацию;
3. $flattenParams - получает массив параметров проверки для всех валидаторов, существующих в этом объекте проверки.
Слайд 4

Usage 1. Вложенные данные. Можно проверять настолько глубоко, насколько это возможно.

Usage

1. Вложенные данные. Можно проверять настолько глубоко, насколько это возможно.
export default

{
data () {
return {
form: {
nestedA: '',
nestedB: ''
}
}
},
validations: {
form: {
nestedA: {
required
},
nestedB: {
required
}
}
}
}
2. Группы валидаций. Если хотим создать валидатор, который объединяет в себя несколько:
validationGroup: [‘form.nestedA’, ‘form.nestedB’]
Слайд 5

Usage 3. Асинхронные валидаторы. Поддержка async предоставляется из коробки, нужно просто

Usage

3. Асинхронные валидаторы.
Поддержка async предоставляется из коробки, нужно просто использовать

валидатор который возвращает промис. Значение промиса используется для проверки напрямую. Доступ к данным любого компонента должен осуществляться синхронно для правильного реактивного поведения. Нужно сохранить его как переменную в области проверки, если вам нужно использовать его в любом асинхронном обратном вызове, например, в .then.



Username is required.This username is already registered.

export default {
data () {
return {
username: ''
}
},
validations: {
username: {
required,
isUnique (value) {
if (value === '') return true
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve(typeof value === 'string' && value.length % 2 !== 0)
}, 350 + Math.random() * 300)
})
}
}
}
}