Валидация простого текстового поля с помощью vee validate 4

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

<template>
  <div>
    <form @submit="sendForm">
      <input type="text" />
      <p><input type="submit" value="Отправить"></p>
    </form>
  </div>
</template>


<script>


export default {
  name: "FormValidate",
  components: {
  },
  methods: {
    sendForm() {
      console.log('send');
    },
  }
}
</script>


<style scoped>
</style>

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

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

Первым делом, нам нужно импортировать эту библиотеку. Мы можем сделать это в элементе script, добавив конструкцию import:

import {Form, Field} from 'vee-validate';

И нам потребуется импортировать два компонента: Form и Field. Мы должны прописать эти компоненты, соответственно, в разделе components, чтобы они стали доступными в нашем template.

Теперь наша задача - заменить стандартный HTML элемент form на этот импортируемый компонент Form.

Теперь это не обычный элемент Form, а он будет отображаться как компонент библиотеки vee-validate. 

Точно также нужно сделать с элементом input. В vee-validate поля, которые нам нужно валидировать, должны находиться в компоненте Field. 

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

В methods мы создаем isRequired

  isRequired(value) {
    if (value && value.trim()) {
      return true;
    }
    return 'This is required';
  }

То есть это поле является обязательным. А в нее мы передаем то значение, которое будет находиться в нашем поле Field. Если, соответственно, в этом поле Field будет какое-то значение, и соответственно обрезаем пробелы по бокам этого значения, если это значение у нас какое-то имеется, то есть что-то там есть, мы возвращаем истину. Если же там что-то не так, то мы возвращаем, что это поле у нас является обязательным.

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

Единственное, теперь нам нужно эти правила добавить к нашему Field. Делается достаточно просто: мы просто пишем служебное слово "rules" и указываем, что правилами для этого поля у нас является правило для этого поля у нас является поле из "required". 

Давайте для нашего поля Field укажем "name": "field", чтобы у этого поля было какое-то название. Соответственно, обновим страницу, вот наша форма, и пытаемся ее отправить, не заполнив наше поле.

Как вы видите, ничего у нас консоли не происходит, ничего у нас не выводится, но если мы введем какое-то значение, то соответственно, как видите, наша форма успешно отправляется. Теперь я снова уберу это значение, жму "Отправить", и ничего у нас не отправляется.

То есть вот таким образом мы с вами сделали простейшую валидацию простого текстового поля. И соответственно, таким образом она у нас работает.