Проверка формы с использованием Vue.js и VeeValidate

Фреймворк Vue.js имеет множество плагинов, которые можно использовать для реализации проверки формы внешнего интерфейса. Один из них - VeeValidate. VeeValidate можно использовать для создания расширенной проверки. Это связано с тем, что он имеет встроенные правила проверки для разных типов полей. В этой статье показано, как использовать VeeValidate и Vue для реализации проверки формы.

Шаг 1. Создайте новый проект Vue под названием RegisterApp. Прочтите настройку Vue Project здесь.

vue create RegisterApp

Шаг 2: Установите VeeValidate в RegisterApp. Прочтите здесь, чтобы узнать о настройке VeeValidate

cd RegisterApp
npm install vee-validate --save

Шаг 3: в файле main.js зарегистрируйте ValidationProvider глобально с помощью Vue.component () функция.

import { ValidationProvider } from 'vee-validate';
import { ValidationObserver } from 'vee-validate';
Vue.component('ValidationProvider', ValidationProvider);

Шаг 4: Затем установите все доступные правила. Прочтите здесь, чтобы найти доступные роли

import { ValidationProvider } from 'vee-validate/dist/vee-validate.full.esm';

Окончательный файл main.js должен выглядеть так.

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

Шаг 5: в папке components / создайте компонент с именем RegisterForm.vue.

<template>
 <div>
 <h2>VeeValidate Form</h2>

</div>
</template>
<script>
  export default {
   data: () => (),
  methods: {
    
  }
}}
</script>

Шаг 6: В разделе ‹script› ‹/script› создайте имя, фамилию, электронная почта и пароль как свойства данных.

<script>
  export default {
   data: () => ({
  
       name: '',
       email: '',
       password: '',
   
  }),
  methods: {
   
  }
}}
</script>

Шаг 7. В разделе ‹template› ‹/template› создайте форму и оберните ее в ValidationObserver.

<template>
 <div>
 <h2>VeeValidate Form</h2>
 <ValidationObserver v-slot="{ handleSubmit }">
    <form @submit.prevent="handleSubmit(onSubmit)">
    </form>
</ValidationObserver>
</div>
</template>

Шаг 8: Создайте поля для имени, фамилии, электронной почты и пароля. Оберните каждый ввод компонентом ValidationProvider, который действует как валидатор для ваших полей .

<template>
 <div>
 <h2>VeeValidate Form</h2>
 <ValidationObserver v-slot="{ handleSubmit }">
 <form @submit.prevent="handleSubmit(onSubmit)">
<ValidateProvider name="firstname" rules="required|alpha" v-slot="{ errors }">
<div>
  <label>Firstname</label>
  <input type="text" v-model="firstname">
  <span>{{ errors[0] }}</span>
</div>
</ValidationProvider>
<ValidateProvider name="lastname" rules="required|alpha" v-slot="{ errors }">
<div>
  <label>Lastname</label>
  <input type="text" v-model="lastname">
  <span>{{ errors[0] }}</span>
</div>
</ValidationProvider>
<ValidateProvider name="email" rules="required|email" v-slot="{ errors }">
<div>
  <label>Email</label>
  <input type="email" v-model="email">
  <span>{{ errors[0] }}</span>
</div>
</ValidationProvider>
<ValidateProvider name="password" rules="required" v-slot="{ errors }">
<div>
  <label>Password</label>
  <input type="password" v-model="password">
  <span>{{ errors[0] }}</span>
</div>
</ValidationProvider>
<input type="submit" text="Submit">
</form>
</ValidationObserver>
</div>
</template>

Окончательный вариант RegisterForm.vue должен выглядеть следующим образом.

<template>
 <div>
 <h2>VeeValidate Form</h2>
 <ValidationObserver v-slot="{ handleSubmit }">
 <form @submit.prevent="handleSubmit(onSubmit)">
<ValidateProvider name="firstname" rules="required|alpha" v-slot="{ errors }">
<div>
  <label>Firstname</label>
  <input type="text" v-model="formData.firstname">
  <span>{{ errors[0] }}</span>
</div>
</ValidationProvider>
<ValidateProvider name="lastname" rules="required|alpha" v-slot="{ errors }">
<div>
  <label>Lastname</label>
  <input type="text" v-model="formData.lastname">
  <span>{{ errors[0] }}</span>
</div>
</ValidationProvider>
<ValidateProvider name="email" rules="required|email" v-slot="{ errors }">
<div>
  <label>Email</label>
  <input type="text" v-model="formData.email">
  <span>{{ errors[0] }}</span>
</div>
</ValidationProvider>
<ValidateProvider name="password" rules="required|alpha" v-slot="{ errors }">
<div>
  <label>Password</label>
  <input type="text" v-model="formData.password">
  <span>{{ errors[0] }}</span>
</div>
</ValidationProvider>
<input type="submit" text="Submit">
</form>
</ValidationObserver>
</div>
</template>
<script>
  export default {
   data: () => ({
  
       name: '',
       email: '',
       password: '',
   
  }),
  methods: {
    onSubmit(){
      console.log(this.formData);
  }
}}
</script>

Шаг 9: Импортируйте RegisterForm.vue в App.vue.

<template>
  <div id="app">
  <RegisterForm />
  </div>
</template>
<script>
import RegisterForm from "./components/RegisterForm";
export default {
  name: "App",
  components: {
     RegisterForm
  }
}
</script>
<style></style>

Запустите приложение

И вот оно. Надеюсь, вы нашли это полезным. Я вернусь с более интересными статьями. Спасибо за чтение.

Больше контента на plainenglish.io

Проверка формы с использованием Vue.js и VeeValidate

Вопросы по теме