Самоучитель № 30 от JL

Серия [Истории самообучения JL]

[Net Ninja] JS Regular Expressions
[Net Ninja] Vue JS2 (Part1, Part2, Part3)
[Net Ninja] Vuex
[Net Ninja] Python3 (Part1, Part2, Part3)
[Net Ninja] Django (Part1, Part2, Part3)
[Net Ninja] Sass (Part1, Part2)
[Sean Larkin] Webpack4 (Part1, Part2, Part3, Part4)
[Sarah Drasner] VueJS (Part1, Part2, Part3, Part4, 
                       Part5, Part6, Part7)
[Evan You] Advanced VueJS (Part1, Part2, Part3,  
                           Part4, Part5, Part6(current), Part7)

🌲 Это шестая часть моего обзора Расширенные возможности Vue.js с нуля Эвана Ю на FrontendMasters.

[6. Form Validation]
    6-1. Markup-based vs Model-based
    6-2. Challenge 17: Validation Library

[6–1. На основе разметки и на основе модели]

На основе разметки №1 (плагин VeeValidate):

Непосредственно объявленные правила проверки формы в шаблоне вместе с самим элементом.

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

# 2 Модельно-ориентированный (плагин Vuelidate):

Объявите правила проверки внутри JavaScript.

Преимущества:

  1. Шаблоны выглядят чище.
  2. Поскольку вы используете правила, объявленные в JavaScript, проще реализовать собственные правила проверки.

›› Вы можете комбинировать существующие библиотеки проверки на чистом JavaScript и комбинировать их с вашим подключаемым модулем проверки.

[6–2. Задача 17: Библиотека проверки]

Давайте рассмотрим, как создать простую версию библиотеки проверки, которая очень похожа на то, как Vuelidate работает на практике.

ЦЕЛЬ:

Обеспечить проверку ввода текста в реальном времени

ИНСТРУКЦИЯ И ШАБЛОН:

Создайте validationPlugin, который разрешает следующее использование:

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<div id="app">  
  <form @submit="validate">
    <input v-model="text">
    <br>
    <input v-model="email">
    <ul v-if="!$v.valid" style="color:red">
      <li v-for="error in $v.errors">
        {{ error }}
      </li>
    </ul>
    <input type="submit" :disabled="!$v.valid">
  </form>
</div>
<script>
const validationPlugin = {
  // Implement this!
}
Vue.use(validationPlugin)
// whether the string is an e-mail
const emailRE = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
new Vue({
  el: '#app',
  data: {
    text: 'foo',
    email: ''
  },
  validations: {
    text: {
      validate: value => value.length >= 5,
      message: (key, value) => `${key} should have a min length of 5, but got ${value.length}`
    },
    email: {
      validate: value => emailRE.test(value),
      message: key => `${key} must be a valid email`
    }
  },
  methods: {
    validate (e) {
      if (!this.$v.valid) {
        e.preventDefault()
        alert('not valid!')
      }
    }
  }
})
</script>
  • <form @submit=”validate”>: Когда форма будет отправлена, мы вызовем функцию проверки. Итак, мы можем предотвратить перезагрузку страницы.
  • <input v-model=“text”> & <input v-model=“email”> синхронизировать вводимые данные с нашими онлайн-данными.
  • <ul v-if=”!$v.valid” style=”color:red”></ul>: Это та часть, где мы отображаем ошибки проверки. <li v-for=”error in $v.errors”></li> отображается, только если форма недействительна.

›› Мы сами несем ответственность за ошибки рендеринга форм. Плагин предоставляет только некоторое состояние. Как представить состояние полностью зависит от вас. Это дает вам больше возможностей для настройки и гибкости.

››› $v.errors: $v показывает множество ошибок, которые могут быть просто строками.

  • Если какое-либо поле не прошло проверку, this.$v.valid будет ложным.

›› $v будет своего рода большим объектом, который будет содержать все состояние вашего текущего состояния проверки.

РЕШЕНИЕ:

›Наше состояние по умолчанию уже вызывает предупреждения.

›Поскольку я выполнил инструкции, сообщение об ошибке исчезло.

const validationPlugin = {
  install(Vue) {
    Vue.mixin({
      beforeCreate () {
        const rules = this.$options.validations
        if (rules) {
          this.$options.computed =
            Object.assign({}, this.$options.computed, {
              $v(){
              }
            }
          })
        }
      } 
    })
  }
}
  • Vue.mixin(): Для обработки настраиваемого объекта проверки нам нужен глобальный миксин, который внедряет beforeCreate ловушку в каждый компонент.
  • beforeCreate(): Система реактивности еще не настроена.
  • this.$options.computed: Нам нужно сохранить то, что там уже объявлено. Это могло быть неопределенным.
  • Object.assign может обрабатывать неопределенные значения.
  • Клонируйте все (если есть) в пустой объект {}, а затем добавьте к нему $v функциональность.
$v() { 
  let valid = true
  const errors = []
  Object.keys(rules).forEach(key => {
    const rule = rules[key]
    const value = this[key]
    const result = rule.validate(value)
    if (!result) {
      valid = false
      errors.push(rule.message(key, value))
    }
  })
  return {
    errors,
    valid
  }
}

›const value = this[key]: Здесь регистрируется реактивность. При изменении любого поля наше вычисленное свойство будет правильно обновлено.

›Все, что мы делаем, - это вычисляем текущий статус на основе исходных данных, а затем возвращаем его из вычисляемого свойства. С помощью этого вычисляемого свойства мы можем выполнять произвольный стиль рендеринга и решать, как представлять эти сообщения об ошибках пользователю (например, предотвращать отправку форм, отключать кнопки).

›› Все управляется государством. Это очень похоже на то, как работает Vuelidate (простая, облегченная проверка на основе модели для Vue).

const validationPlugin = {
  install(Vue) {
    Vue.mixin({
      beforeCreate () {
        const rules = this.$options.validations
        if (rules) {
          this.$options.computed =
            Object.assign({}, this.$options.computed, {
              $v(){
                let valid = true
                const errors = [] 
                Object.keys(rules).forEach(key => {
                })
                return {
                  errors,
                  valid
                }
              }
            }
          })
        }
      } 
    })
  }
}

›Это можно заменить следующим:

const validationPlugin = {
  install(Vue) {
    Vue.mixin({
      computed: {
        $v(){
          let valid = true
          const errors = []
          const rules = this.$options.validations
          Object.keys(rules || {}).forEach(key => {
          })
          return {
            errors,
            valid
          }
        }
      }
    })
  }
}

Инструктор класса Эван Ю является создателем и руководителем проекта Vue.js.

Его можно найти на его личном веб-сайте, GitHub, LinkedIn, Twitter, Medium (Evan You) и Frontend Masters.

Спасибо за чтение! 💕 Если вам понравился этот пост в блоге, пожалуйста, хлопайте в ладоши👏