Валидация форм с vuelidate во VueJS

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

Сайт Vuelidate

Для начала установим Vuelidate в свой проект, введем команду установки в консоли - npm install @vuelidate/core @vuelidate/validators.

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

main.js

/* jshint ignore:start */
import Vue from "vue"

import App from "./App.vue"

new Vue({
  el: "#app",
  render: h => h(App)
})

App.vue

<template>
  <div>
    <div class="container">
      <form class="pt-3">
        <div class="form-group">
          <label for="email">Email</label>
          <input
          type="email"
          id="email"
          class="form-control"
          @input="v$.email.$touch()"
          v-model="email">
        </div>

        <pre>{{ v$.email }}</pre>
      </form>
    </div>
  </div>
</template>

<script>
  import { useVuelidate } from '@vuelidate/core'
  import { required, email } from '@vuelidate/validators'

  export default {
    setup () {
    return { v$: useVuelidate() }
    },
    data() {
      return {
        email: ""
      }
    },
    validations() {
      return {
        email: { required, email }
      }
    }
  }
</script>

<style scoped></style>

Инициализацию валидации лучше всего делать на событие "blur", поэтому желательно сменить строку "@input="v$.email.$touch()"" на "@blur="v$.email.$touch()"".

Визуальное отображение ошибок

Приведу все на примере.

App.vue

<template>
  <div>
    <div class="container">
      <form class="pt-3">
        <div class="form-group">
          <label for="email">Email</label>
          <input
          type="email"
          id="email"
          class="form-control"
          :class="{'is-invalid': v$.email.$error}"
          @blur="v$.email.$touch()"
          v-model="email">

          <div class="invalid-feedback" v-if="!v$.email.required.$response">
            Поле email обязательное
          </div>
          <div class="invalid-feedback" v-if="!v$.email.email.$response">
            Введите email пожалуйста
          </div>
        </div>

        <pre>{{ v$.email }}</pre>
      </form>
    </div>
  </div>
</template>

<script>
  import { useVuelidate } from '@vuelidate/core'
  import { required, email } from '@vuelidate/validators'

  export default {
    setup () {
    return { v$: useVuelidate() }
    },
    data() {
      return {
        email: ""
      }
    },
    validations() {
      return {
        email: { required, email }
      }
    }
  }
</script>

<style scoped></style>

Валидация пароля

Пример валидации пароля.

Пример

<template>
  <div>
    <div class="container">
      <form class="pt-3">
        <div class="form-group">
          <label for="email">Email</label>
          <input
          type="email"
          id="email"
          class="form-control"
          :class="{'is-invalid': v$.email.$error}"
          @blur="v$.email.$touch()"
          v-model="email">

          <div class="invalid-feedback" v-if="!v$.email.required.$response">
            Поле email обязательное
          </div>
          <div class="invalid-feedback" v-if="!v$.email.email.$response">
            Введите email пожалуйста
          </div>
        </div>

        <div class="form-group">
          <label for="password">Password</label>
          <input
          type="password"
          id="password"
          class="form-control"
          :class="{'is-invalid': v$.password.$error}"
          @blur="v$.password.$touch()"
          v-model="password">

          <div class="invalid-feedback" v-if="!v$.password.required.$response">
            Поле password обязательное
          </div>

          <div class="invalid-feedback" v-if="!v$.password.minLength.$response">
            Пароль должен содержать минимум {{ v$.password.minLength.$params.min }} символов, сейчас у вас {{ password.length }}
          </div>
        </div>

        <!-- <pre>{{ v$.password }}</pre> -->
      </form>
    </div>
  </div>
</template>

<script>
  import { useVuelidate } from '@vuelidate/core'
  import { required, email, minLength } from '@vuelidate/validators'

  export default {
    setup () {
    return { v$: useVuelidate() }
    },
    data() {
      return {
        email: "",
        password: "",
      }
    },
    validations() {
      return {
        email: { required, email },
        password: {
          required,
          minLength: minLength (6)
        }
      }
    }
  }
</script>

<style scoped></style>

Отправка форм во VueJS

Пример отправки формы.

Пример

<template>
  <div>
    <div class="container">
      <form class="pt-3" @submit.prevent="onSubmit">
        <div class="form-group">
          <label for="email">Email</label>
          <input
          type="email"
          id="email"
          class="form-control"
          :class="{'is-invalid': v$.email.$error}"
          @blur="v$.email.$touch()"
          v-model="email">

          <div class="invalid-feedback" v-if="!v$.email.required.$response">
            Поле email обязательное
          </div>
          <div class="invalid-feedback" v-if="!v$.email.email.$response">
            Введите email пожалуйста
          </div>
        </div>

        <div class="form-group">
          <label for="password">Password</label>
          <input
          type="password"
          id="password"
          class="form-control"
          :class="{'is-invalid': v$.password.$error}"
          @blur="v$.password.$touch()"
          v-model="password">

          <div class="invalid-feedback" v-if="!v$.password.required.$response">
            Поле password обязательное
          </div>

          <div class="invalid-feedback" v-if="!v$.password.minLength.$response">
            Пароль должен содержать минимум {{ v$.password.minLength.$params.min }} символов, сейчас у вас {{ password.length }}
          </div>
        </div>

        <br>
        <button
        class="btn btn-success"
        type="submit"
        :disabled="v$.$invalid"
        >Отправить</button>

        <!-- <pre>{{ v$.password }}</pre> -->
      </form>
    </div>
  </div>
</template>

<script>
  import { useVuelidate } from '@vuelidate/core'
  import { required, email, minLength } from '@vuelidate/validators'

  export default {
    setup () {
    return { v$: useVuelidate() }
    },
    data() {
      return {
        email: "",
        password: "",
      }
    },
    methods: {
      onSubmit() {
        console.log (this.email)
        console.log (this.password)
      }
    },
    validations() {
      return {
        email: { required, email },
        password: {
          required,
          minLength: minLength (6)
        }
      }
    }
  }
</script>

<style scoped></style>