Проверка формы VueJs, часть 2

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

Как и в предыдущей статье, мы рассмотрим, как мы можем использовать этот пакет в форме регистрации. Это даст вам четкое представление о том, как вы можете использовать это практически в любой форме. Итак, приступим к кодированию 💻!

Установка

Чтобы установить VeeValidate, откройте терминал в корне вашего проекта Vue и выполните следующую команду:

npm install vuelidate --save

Далее мы добавим Vuelidate в Vue в качестве плагина. В src/main.js добавьте следующее:

import Vuelidate from 'vuelidate'
Vue.use(Vuelidate)

Проверка формы

Способ проверки поля зависит от вашей модели. Свойство данных в экспорте по умолчанию содержит модель (v-модель) для ваших входных данных. Импортировав пакет Vuelidate, вы получите новое свойство, которое вы можете добавить к экспорту по умолчанию, называемое «проверки».

Все, что вам нужно сделать, это импортировать нужные вам правила из Vuelidate (Доступные правила).

import { required, minLength } from "vuelidate/lib/validators";

Затем добавьте свойство в «валидацию» с тем же именем, что и свойства вашей модели. Это свяжет ваши проверки с вашей моделью.

data: () => ({
 // Your Model
 name: ""
}),
//Your model validations
validations: {
 name: {
  required,
  minLength: minLength(4)
 }
}

Затем вам нужно будет создать форму в шаблоне с вашими входными данными и ошибками.

<template>
 <div>
  <h2>Vuelidate Form</h2>
  <form @submit.prevent="submitForm">
   <input type="text" v-model="name" />
   <!-- display errors -->
   <div 
    class="error" 
    v-if="!$v.name.required && $v.name.$dirty">
     Field is required
   </div>
   <div
    class="error"
    v-if="!$v.name.minLength && $v.name.$dirty"
   >
    Name must have at least {{$v.name.$params.minLength.min}}
    letters.
   </div>
   <input type="submit" />
  </form>
 </div>
</template>

Наконец, мы создадим наш метод для отправки формы. Внутри экспорта по умолчанию мы добавим свойство методов с нашим методом отправки формы.

methods: {
 //Form submission handler
 submitForm() {
  //fire validations on all fields
  this.$v.$touch();
  
  //check to see if form is valid before continuing
  if (!this.$v.$invalid) {
   console.log(this.name);
  }
 }
}

Проверка формы регистрации

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

Имя — Обязательная и единственная буква (альфа)
Электронная почта — обязательная и действующая электронная почта,
Пароль — требуется, минимальная длина 6, максимальная длина 8
Пол — обязательно
Принятие условий обслуживания — обязательно

Для стиля я буду использовать Bootstrap.

Пользовательские валидаторы

Иногда вам понадобится валидатор, которого Vuelidate не предлагает. В этой ситуации вы можете написать свои собственные валидаторы как таковые:

const mustBeCool = (value) => value.indexOf('cool') >= 0
// ...

validations: {
  myField: {
    mustBeCool
  }
}

Если вы хотите объединить их валидаторы со своей собственной логикой, вы можете написать их так:

import { helpers } from 'vuelidate/lib/validators'
const mustBeCool = (value) => !helpers.req(value) || value.indexOf('cool') >= 0

// ...

validations: {
  myField: {
    mustBeCool
  }
}

Видеоурок

Вывод

Как видите, Vuelidate — это надежный пакет проверки, который вы можете использовать в своих формах. Это позволяет вам легко и быстро добавить валидацию практически без кода валидации. Надеюсь, эта статья дала вам хорошее представление о том, чего вы можете достичь. До следующего раза, удачного кодирования!

Проверка формы VueJs, часть 2 — Vuelidate