Overview

This is a Vue data validator, trying to cover all needs and built on top of ES6 to achieve the best architecture.

Demo

You can view a demo and examples here.

Features

Feature	Description
Template agnostic	No matter what template library you use, this validator will simply work
Simplicity	Focused in developer easiness to save time and code
Dynamic	Validations can be run on defined circumstances
Reactivity persistance	When data is replaced there is no worring, it will restore the watchers
Data tree	If you have nested data objects to validate, this mixin will deal with it without trouble
Maximum customization	Trying always to be as open and configurable as possible, validations, messages and behaviour
Performance	It is developed with performance in mind, reducing time and processing considerably
Promises	Will detect promises and handle properly without need of external packages
Real time	Some validators show the results in next tick, so they are not displayed. This component updates the template once the validations are finished
Async validations	If multiple validations are done it will control the times
Revalidations	It controls whether a validation is performed or not and needs to revalide
Dependencies free	Its just ~46 KB minified and served as mixin just with vue as dependency
Community open	Feel free to contribute or bring suggestions, any improvement will be at least taken in mind, discussed and accepted if reasonable, just keep the the previous rules in mind

Quickstart

npm install --save vue-daval

<form @submit.prevent="doLogin">
   <input v-model="login.email">
   <input type="password" v-model="login.password">

   <button type="submit">Login</button>
</form>

<form @submit.prevent="doRegister">
   <input v-model="register.alias">
   <input type="email" v-model="register.email">
   <input type="password" v-model="register.password">

   <button type="submit">Register</button>
</form>

import VueDaval from 'vue-daval';

export default {
   mixins: [ VueDaval ],

   data: () => ({
      login: {
         email: undefined,
         password: undefined
      },

      register: {
         alias: undefined,
         email: undefined,
         password: undefined
      }
   }),

   vdRules: {
      login: {
         email: { required: true, type: 'email' },
         password: { required: true, minlen: 5 }
      },

      register: {
         alias: { required: true, minlen: 5, checkAlias: (alias) => {
            return alias === 'admin'? 'Alias already in use' : true;
         }},
         email: { required: true, type: 'email', checkEmail: (email) => {
            return this.$http.post('/users/check/email', { email: email });
         }},
         password: { required: true, minlen: 5 }
      }
   },

   methods: {
      doLogin() {
         this.$vd.login.$validate().then(() => {
            this.$http.post('/users/login', this.login);

         }).catch(() => {
            alert('Error in login form');
         });
      },

      doRegister() {
         this.$vd.register.$validate().then(() => {
            this.$http.post('/users/register', this.register);

         }).catch(() => {
            alert('Error in register form');
         });
      }
   }
}

Performance

Weight is just 46 KB so is pretty light and is tweaked to be as fast as possible keeping code readability, developed with ES6 syntax and built with Vue CLI 3.

Included validatiors

• Type: check the type of value, supporting boolean, number, integer, float, string, url, email and date.
• Required: check if value is empty.
• Regular expression: check the value against regular expression.
• Minimum: check if value is greater than the number specified.
• Maximum: check if value is less than the number specified.
• Minimum length: check if value lengh is greater than the number specified.
• Maximum length: check if value lengh is less than the number specified.
• Length: check if value lengh is exactly the number specified.
• Equals: check if value equals another value.
• Is: check if value is a given one.
• Is not: check if value is not a given one.
• Is in: check if value is in a string or one element of an array.

Troubleshooting

If you find yourself running into issues during installation or running the validator, please check our Wiki. If still need help open an issue. We would be happy to discuss how they can be solved.

Documentation

You can view the full documentation at the project's Wiki with examples and detailed information.

Contributing

Contributions, questions and comments are all welcome and encouraged.