Начало работы с проверкой форм Vue с Vee-Validate

Проверка формы - это функция, которая не встроена в Vue.js.

Однако нам все еще очень нужна эта функция.

В этой статье мы рассмотрим, как добавить базовую проверку формы с помощью библиотеки Vee-Validate.

Начиная

Мы можем начать с установки пакета.

Для его установки запускаем:

npm install vee-validate --save

Затем мы можем зарегистрировать плагин ValidationProvider, написав:

import Vue from "vue";
import App from "./App.vue";
import { ValidationProvider } from "vee-validate";
Vue.component("ValidationProvider", ValidationProvider);
Vue.config.productionTip = false;
new Vue({
  render: h => h(App)
}).$mount("#app");

in main.js .

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

Мы также можем импортировать extend для создания наших собственных правил проверки:

import Vue from "vue";
import App from "./App.vue";
import { ValidationProvider, extend } from "vee-validate";
extend("secret", {
  validate: value => value === "secret",
  message: "wrong word"
});
Vue.component("ValidationProvider", ValidationProvider);
Vue.config.productionTip = false;
new Vue({
  render: h => h(App)
}).$mount("#app");

value имеет введенное значение, и мы возвращаем true, если оно действительно, и false в противном случае.

message - это сообщение об ошибке проверки формы, которое мы будем отображать.

Vue.component(“ValidationProvider”, ValidationProvider);

сделает компонент ValidationProvider доступным глобально.

Основное использование

Мы можем добавить компонент ValidationProvider в наше приложение, написав:

<template>
  <div>
    <ValidationProvider rules="secret" v-slot="{ errors }">
      <input v-model="email" type="text">
      <span>{{ errors[0] }}</span>
    </ValidationProvider>
  </div>
</template>
<script>
export default {
  data(){
    return {
      email: ''
    }
  }
};
</script>

Если мы введем «секрет», то ничего не увидим.

В противном случае мы увидим сообщение об ошибке «неправильное слово», которое мы установили ранее.

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

Регистрация компонентов

Если мы просто хотим использовать компонент ValidationProvider в одном компоненте, мы можем написать:

import { ValidationProvider } from 'vee-validate';
export default {
  components: {
    ValidationProvider
  }
};

прописать ValidationProvider в компоненте.

Аргументы правила

Мы можем добавлять аргументы в правила.

Например, мы можем написать:

extend("minLength", {
  validate(value, args) {
    return value.length >= args.length;
  },
  params: ["length"],
  message: "too short"
});

У нас есть validate метод с параметром args.

args может иметь любое свойство, указанное свойством params.

Следовательно, в этом случае мы можем иметь свойство length ion args.

Чтобы использовать его, мы можем написать:

<template>
  <div>
    <ValidationProvider rules="minLength:5" v-slot="{ errors }">
      <input v-model="value" type="text">
      <span>{{ errors[0] }}</span>
    </ValidationProvider>
  </div>
</template>
<script>
export default {
  data() {
    return {
      value: ""
    };
  }
};
</script>

У нас есть:

minLength:5

установить args.length на 5.

Таким образом, мы получим сообщение об ошибке, если длина value меньше 5.

Множественные аргументы

У нас может быть несколько аргументов в нашем validate методе.

Например, мы можем написать:

extend("length", {
  validate(value, { min, max }) {
    return value.length >= min && value.length <= max;
  },
  params: ["min", "max"],
  message: "too short"
});

Затем мы можем использовать его, написав:

<template>
  <div>
    <ValidationProvider rules="length:5,10" v-slot="{ errors }">
      <input v-model="value" type="text">
      <span>{{ errors[0] }}</span>
    </ValidationProvider>
  </div>
</template>
<script>
export default {
  data() {
    return {
      value: ""
    };
  }
};
</script>

Мы реструктурировали args в min и max в аргументах.

Затем мы передаем аргументы через запятую.

Затем, если мы введем что-то, длина которого меньше 5 или больше 10 символов, мы увидим сообщение об ошибке.

Vee-Validate автоматически передаст любое количество параметров и поместит их в args.

Но размещение имен свойств в params позволит нам получить их по ключу, а не в виде массива.

Итак, мы можем написать что-то вроде:

rules="one_of:1,2,3,4,5,6,7,8"

и args будет [1, 2, 3, 4, 5, 6, 7, 8], если мы определили метод validate для правила one_of.

Сообщения

Мы можем вернуть сообщение в функции проверки в качестве альтернативы установке их в message.

Например, мы можем написать:

import Vue from "vue";
import App from "./App.vue";
import { ValidationProvider, extend } from "vee-validate";
extend("positive", value => {
  if (value >= 0) {
    return true;
  }
  return "please enter a positive number";
});
Vue.component("ValidationProvider", ValidationProvider);
Vue.config.productionTip = false;
new Vue({
  render: h => h(App)
}).$mount("#app");

Тогда мы можем написать:

<template>
  <div>
    <ValidationProvider rules="positive" v-slot="{ errors }">
      <input v-model="value" type="text">
      <span>{{ errors[0] }}</span>
    </ValidationProvider>
  </div>
</template>
<script>
export default {
  data() {
    return {
      value: ""
    };
  }
};
</script>

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

Заключение

Vee-Validate - это простой в использовании пакет для добавления возможностей проверки формы в приложение Vue.

Это намного проще, чем проверять вводимые данные с помощью собственного кода.

JavaScript на простом английском языке

Вы знали, что у нас четыре публикации и канал на YouTube? Найдите их все на plainenglish.io и подпишитесь на наш канал YouTube!