Skip to content
Oscar edited this page Sep 3, 2018 · 11 revisions

First you need to import the mixin and then add it to your vue component.

Then just create an object in the component named "validations" imitating the data structure, with an object with the validators as value.

The included validators are:

Name Type Description Example
type String Check the type of value. Possible values are boolean, number, integer, float, string, url, email and date type: 'email'
required Boolean Check if value is empty required: true
regexp RegExp Check the value against given regular expression regexp: /^[0-9]$/
min Number Check if value is greater than the number specified min: 5
max Number Check if value is less than the number specified max: 99
minlen Number Check if value lengh is greater than the number specified minlen: 6
maxlen Number Check if value lengh is less than the number specified maxlen: 24
length Number Check if value lengh is exactly the number specified length: 9
equals String Check if value equals another value equals: 'user.passwordRepeat'
isin Array Check if value is one of an array isin: ['house', 'car', 'tree', 'clouds']

Example of usage:

<script>
   import vmv from 'vuejs-model-validator';

   export default {
      mixins: [ vmv ],

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

         register: {
            alias: null,
            email: null,
            password: null,
            passwordRepeat: null
         }
      }),

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

         register: {
            alias: { required: true, minlen: 5, checkAlias: (vm, alias) => {
               return vm.$http.post('/users/check/alias', { alias: alias });
            }},
            email: { required: true, type: 'email', checkEmail: (vm, email) => {
               return vm.$http.post('/users/check/email', { email: email });
            }},
            password: { required: true, minlen: 5 },
            passwordRepeat: { required: true, equals: 'register.password' }
         }
      }
   }
</script>