Vue.js Form Validation example with VeeValidate
vuejs
17
validation
3
veevalidate
1
Male avatar

loveprogramming viết ngày 04/05/2021

https://grokonez.com/frontend/vue-js/vue-form-validation-example-with-veevalidate

Vue.js Form Validation example with VeeValidate

In this tutorial, we're gonna make a Vuejs Form Validation example with VeeValidate.

Example Overview

Our form has 3 fields:

  • Username: check existence
  • Email: check existence, then check email format
  • Password: check existence, then check if at least 6 characters

vue-form-validation-demo

Practice

Add VeeValidate to Vue Project

  • with npm
    npm install vee-validate

  • with yarn
    yarn add vee-validate

package.json after installation:


{
  "name": "vue-form-validation",
  ...
  "dependencies": {
    "vee-validate": "^2.1.1",
    "vue": "^2.5.17"
  },
  ...
}

Use VeeValidate

main.js


import Vue from "vue";
import App from "./App.vue";
import VeeValidate from "vee-validate";

Vue.use(VeeValidate);

new Vue({
  render: h => h(App),
}).$mount('#app');

Form Validation Component

We use v-validate directive for input tag we want to validate (make sure that it has a name attribute -> for error messages).

More at:

https://grokonez.com/frontend/vue-js/vue-form-validation-example-with-veevalidate

Vue.js Form Validation example with VeeValidate

Bình luận


White
{{ comment.user.name }}
Bỏ hay Hay
{{comment.like_count}}
Male avatar
{{ comment_error }}
Hủy
   

Hiển thị thử

Chỉnh sửa

Male avatar

loveprogramming

444 bài viết.
77 người follow
Kipalog
{{userFollowed ? 'Following' : 'Follow'}}
Cùng một tác giả
Male avatar
1 0
Tutorial Link: (Link) (Ảnh) Django is a Pythonbased free and opensource web framework that follows the modeltemplateview architectural pattern. A...
loveprogramming viết 6 tháng trước
1 0
Male avatar
1 0
https://loizenai.com/angular11nodejspostgresqlcrudexample/ Angular 11 Node.js PostgreSQL Crud Example (Ảnh) Tutorial: “Angular 11 Node.js Postg...
loveprogramming viết 5 tháng trước
1 0
Male avatar
1 0
Angular Spring Boot jwt Authentication Example Github https://loizenai.com/angularspringbootjwt/ (Ảnh) Tutorial: ” Angular Spring Boot jwt Authe...
loveprogramming viết 5 tháng trước
1 0
Bài viết liên quan
White
4 2
Validate dữ liệu là một công việc đơn giản mà hầu hết các lập trình viên làm mỗi ngày. Tuy nhiên, khi đối mặt với nhiều thay đổi về requirements ho...
Tu Huynh viết hơn 1 năm trước
4 2
{{like_count}}

kipalog

{{ comment_count }}

bình luận

{{liked ? "Đã kipalog" : "Kipalog"}}


Male avatar
{{userFollowed ? 'Following' : 'Follow'}}
444 bài viết.
77 người follow

 Đầu mục bài viết

Vẫn còn nữa! x

Kipalog vẫn còn rất nhiều bài viết hay và chủ đề thú vị chờ bạn khám phá!