Vue.js Form Validation example with VeeValidate
vuejs
17
validation
4
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

545 bài viết.
98 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 7 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 6 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 6 tháng trước
1 0
{{like_count}}

kipalog

{{ comment_count }}

bình luận

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


Male avatar
{{userFollowed ? 'Following' : 'Follow'}}
545 bài viết.
98 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á!