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

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

#vue #form #veevalidate #validation