Проверка - очень распространенная задача в веб-приложениях. Действительно, данные должны быть проверены перед отправкой формы и до того, как они будут записаны в базу данных или переданы в веб-службу.

В этой статье рассматривается проверка формы в Vue.js и, в частности, три плагина, которые выполняют эту задачу: Simple Vue Validator, VeeValidate и Vuelidate.

Прочитав эту статью, мы сможем протестировать фрагменты кода благодаря этому репозиторию github, простому проекту Vue.js, созданному с использованием официального Vue.js.

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

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

Простой валидатор Vue

Simple Vue Validator - это плагин Vue.js 2.0, который позволяет проверять поля ввода и отображать ошибки благодаря решению на основе модели для мониторинга пользовательского ввода.

Установка и настройка

Сначала установите пакет через npm или yarn.

npm install — save simple-vue-validator
yarn add simple-vue-validator

Затем добавьте библиотеку, чтобы включить ее глобально в приложении Vue.js.

// main.js
import Vue from ‘vue’;
import SimpleVueValidation from ‘simple-vue-validator’;
Vue.use(SimpleVueValidation);

Пример проверки формы

Чтобы проверить поле электронной почты, давайте рассмотрим конкретный компонент с именем TestSimpleVueValidator.vue.

// TestSimpleVueValidator.vue
<template>
  <div id="testSimpleVueValidator">
    <form @submit.prevent="onSubmit()">
      <div>
        <label for="userMail">Mail</label>
        <input id="userMail" v-model.trim="mail" :class="{error: validation.hasError('mail'), valid: validation.isTouched('mail') && !validation.hasError('mail')}"/>
      </div>
      <div class="error" v-if="validation.hasError('mail')">
        {{ validation.firstError('mail') }}
      </div>
     <button type="submit" :disabled="validation.countErrors() > 0">Submit</button>
    </form>
  </div>
</template>
<script>
  import { Validator } from 'simple-vue-validator';
  export default {
    name: 'TestSimpleVueValidator',
    data() {
      return {
        mail: '',
      };
    },
    validators: {
      mail(value) {
        return Validator.value(value).required().email();
      },
    },
    methods: {
      onSubmit() {
        this.$validate()
        .then((success) => {
          if (success) {
            // Do something
          }
        });
      },
    },
  };
 </script>

Как проверка формы работает с Simple Vue Validator?

Во-первых, правила валидации должны быть записаны в объекте валидаторов, элементе, который содержит всю логику валидации. Каждое правило должно возвращать логическое значение и использует класс Validator, предоставляемый плагином. Как мы видим, есть встроенные правила, но также можно написать собственные для более сложной логики.

Во-вторых, мы должны отображать возможные ошибки. Предоставляя объект валидаторов нашему экземпляру компонента, к нашему компоненту добавляется экземпляр ValidationBag с именем validation. Благодаря этому компоненту мы сможем отображать результат проверки, определять, был ли введен пользователем, и т. Д.

Наконец, таким же образом библиотека добавляет метод $ validate к нашему экземпляру компонента, когда мы предоставляем объект валидаторов нашему компоненту. При отправке нашей формы мы должны вызвать метод $ validate для выполнения всех валидаторов, чтобы убедиться в правильности данных перед их использованием.

Чтобы получить более подробное описание, взгляните на Компонент TestSimpleVueValidator.

VeeValidate

VeeValidate - это плагин для Vue.js, созданный на основе синтаксиса проверки PHP Framework Laravel, который позволяет проверять поля ввода и отображать ошибки, вводя правила проверки непосредственно в HTML.

Установка и настройка

Сначала установите пакет через npm или yarn.

npm install — save simple-vee-validate
yarn add simple-vee-validate

Затем добавьте библиотеку, чтобы включить ее глобально в приложении Vue.js. Также можно расширить библиотеку с помощью настраиваемых правил или наших собственных сообщений проверки.

// main.js
import Vue from ‘vue’;
import VeeValidate from ‘vee-validate’;
Vue.use(VeeValidate);// Extends VeeValidate with custom rules if needed

Пример проверки формы
Чтобы проверить поле электронной почты, давайте рассмотрим конкретный компонент с именем TestVeeValidate.vue.

// TestVeeValidate.vue
<template>
  <div id="testVeeValidate">
    <form @submit.prevent="onSubmit()">
      <div>
        <label for="userMail">Mail</label>
        <input id="userMail" name="mail" v-model.trim="mail" v-validate="'required|email'" :class="{error: errors.has('mail'), valid: !errors.has('mail') && fields['mail'].dirty}"/>
      </div>
      <div class="error" v-if="errors.has('mail')">
        {{ errors.first('mail') }}
      </div>
      <button type="submit" :disabled="errors.any()">Submit</button>
  </div>
</template>
<script>
  export default {
    name: 'TestVeeValidate',
    data() {
      return {
        mail: '',
      };
    },
    methods: {
      onSubmit() {
        this.$validator.validateAll()
        .then((success) => {
          if (success) {
            if (this.$validator.errors.any()) return;
            // Do something
          }
        });
      },
    },
  };
</script>

Как проверка формы работает с WeeValidate?

В VeeValidate директива v-validate является основным способом проверки входных данных. Эта директива принимает в качестве значения либо строку, либо объект, содержащий свойства правил. Около 30 правил, предоставляемых плагином, можно использовать, передав строку в директиву, но также можно создавать собственные правила.

Используя VeeValidate, плагин дополняет ваш экземпляр Vue частным объектом-валидатором и общедоступным объектом данных об ошибках. Таким образом, мы несем ответственность за то, как ошибки должны отображаться пользователям. Объект ошибок предоставляет простые методы, которые помогут вам отображать ошибки, такие как has (‘field’) `для проверки наличия ошибок и` first (‘field’) `для получения первого сообщения об ошибке, связанного с этим полем. Кроме того, сообщения по умолчанию для встроенных правил также могут быть заменены настраиваемыми.

Наконец, чтобы проверить входные данные и проверить, остались ли какие-то ошибки, мы можем легко использовать `$ validator`, автоматически вводимый в экземпляр Vue, и значения могут быть проверены с помощью метода` validate (field, value) `, который возвращает обещание, которое разрешает к логическому. Также возможно проверить несколько значений одновременно с помощью метода validateAll.

Чтобы пойти дальше, взгляните на Компонент TestVeeValidate.

Vuelidate

Vuelidate - это облегченная проверка на основе модели для Vue.js.

Установка и настройка
Сначала установите пакет через npm или yarn.

npm install — save simple-vuelidate
yarn add simple-vuelidate

Затем добавьте библиотеку, чтобы включить ее глобально в приложении Vue.js.

// main.js
import Vue from ‘vue’;
import Vuelidate from ‘vuelidate’;
Vue.use(Vuelidate);

Пример проверки формы
Чтобы проверить поле электронной почты, давайте рассмотрим конкретный компонент с именем TestVuelidate.vue.

// TestVuelidate.vue
<template>
  <div id="testVuelidate">
    <form @submit.prevent="onSubmit()">
      <div>
        <label for="userMail">Mail</label>
        <input id="userMail" v-model.trim="mail" @input="$v.mail.$touch" :class="{error: $v.mail.$error, valid: $v.mail.$dirty && !$v.mail.$invalid}"/>
      </div>
      <div class="error" v-if="$v.mail.$dirty && !$v.mail.required">
        Mail is required
      </div>
      <div class="error" v-if="$v.mail.$dirty && !$v.mail.email">
        Mail is not valid
      </div>
      <button type="submit" :disabled="$v.$invalid">Submit</button>
    </form>
  </div>
</template>
<script>
  import { required, email } from 'vuelidate/lib/validators';
  export default {
    name: 'TestVuelidate',
    data() {
      return {
        mail: '',
      };
    },
    validations: {
      mail: {
        required,
        email,
      },
    },
    methods: {
      onSubmit() {
        if (this.$v.$invalid) return;
        // Do something
      },
    },
  };
</script>

Как проверка формы работает с Vuelidate?

В Vuelidate присутствуют две различные структуры:
- параметры компонента проверки для определения всей проверки формы
- структура $ v, объект в нашей модели представления, который содержит состояние проверки

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

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

С помощью модели $ v мы можем получить доступ к текущему состоянию проверки для определенного поля, а также проверить действительность всей формы. Таким образом, отправляя нашу форму, мы можем убедиться, что данные верны и готовы к использованию.

Чтобы увидеть более сложный пример, перейдите в раздел Компонент TestVuelidate.

Сравнение

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

У каждого плагина есть хорошая и простая в использовании вспомогательная документация, но я считаю, что VeeValidate - самый ясный, с множеством примеров использования каждой функции.

Некоторые цифры

Все эти плагины поддерживаются правильно, поскольку новые функции появляются регулярно - от трех до шести месяцев.

VeeValidate кажется наиболее популярным плагином с более чем 5 000 звезд на Github и более чем 40 000 загрузок еженедельно на npm на момент написания этого поста.

Vuelidate также очень востребован: более 20 000 загрузок еженедельно на npm и более 2 500 звезд на Github.

Наконец, Simple Vue Validator имеет всего около 200 звезд на Github и загружается около 1000 раз в неделю на npm.

Встроенные и специальные правила

VeeValidate предлагает 34 правила валидации против примерно 20 для Simple Vue Validator и Vuelidate. Большинство этих правил допускают классическую проверку чисел или строк, но мы можем заметить, что Simple Vue Validator не предоставляет никаких правил для проверки даты.

Каждый плагин позволяет пользователю создавать свои собственные правила или расширять существующие, например, путем обновления переводов.

Управление локализацией возможно только с VeeValidate благодаря более чем 40 поддерживаемым языковым стандартам, тогда как Simple Vue Validator выдает сообщения об ошибках только на английском языке.

Vuelidate не управляет переводами, так как не выдает встроенных сообщений об ошибках. Следовательно, пользователь должен управлять переводами традиционным способом.

Дополнительные функции

Simple Vue Validator, VeeValidate и Vuelidate позволяют асинхронной проверке работать с обещаниями, а также можно выполнять отложенные проверки.

Чтобы улучшить взаимодействие с пользователем, каждый плагин предоставляет около десяти флагов для настройки рендеринга компонента, но я считаю, что VeeValidate проще в использовании.

Заключение

Если у вас есть другие вопросы, связанные с Vue.js, не стесняйтесь оставлять комментарии ниже, и мы постараемся ответить как можно быстрее, а если вас интересуют другие статьи о Vue.js, обязательно сообщите нам!