Validations beyond forms - презентация, доклад, проект скачать

Нажмите для полного просмотра!

Содержание ▲

Вы можете ознакомиться и скачать презентацию на тему Validations beyond forms. Доклад-сообщение содержит 6 слайдов. Презентации для любого класса можно скачать бесплатно. Если материал и наш сайт презентаций Mypresentation Вам понравились – поделитесь им с друзьями с помощью социальных кнопок и добавьте в закладки в своем браузере.

Слайды и текст этой презентации

Слайд 1

Описание слайда:

Vuelidate

Слайд 2

Описание слайда:

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 представляет текущее состояние проверки. Это делается путем свойств, которые содержат выходные данные функций проверки, определенных пользователем. 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. Вложенные данные. Можно проверять настолько глубоко, насколько это возможно. export default { data () { return { form: { nestedA: '', nestedB: '' } } }, validations: { form: { nestedA: { required }, nestedB: { required } } } } 2. Группы валидаций. Если хотим создать валидатор, который объединяет в себя несколько: validationGroup: [‘form.nestedA’, ‘form.nestedB’]

Слайд 5

Описание слайда:

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) }) } } } }

Слайд 6

Описание слайда:

Usage 4. Dynamic parameters. export default { data () { return { name: '', minLength: 3, valName: 'validatorName' } }, validations () { return { name: { [this.valName]: minLength(this.minLength) } } } }