This branch has reached its EOL.

You can get the new improved, revamped and powerful version at vue-daval.

The basics are the same but now it has more options and much more improvements. Here is a small list of them:

• Validating now uses promises instead of passing callbacks as parameters.
• The path to validate is not a string anymore.
• You can add you own validators and messages.
• It also validates computed values.
• Custom rules now just return true, false, or an error message.
• You can use links to concat validations.
• Performance improved.
• Better handling of wrong paths.
• Error messages more customizable.
• Clever dynamic data handling.
• Added options: validateOnType, skipValidationsOnError and skipRulesOnError.
• Added path properties
• Rules can be dynamic

Because of all new features and easier reach, I renamed the component to vue-daval (Vue Data Validation)

So this version will not be updated anymore and you have to switch to the new branch. But do not worry, update will be easy and straight as the simplicity is maintained and even increased.

This is a Vue data validator, developed with the lack of other valiadtors in mind.

You can view a demo here.

npm install --save vuejs-model-validator

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

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

<form @submit.prevent="validateRegister" class="register">
   <input name="alias" v-model="register.alias">
   <input type="email" name="email" v-model="register.email">
   <input type="password" name="password" v-model="register.password">
   <input type="password" name="passwordRepeat" v-model="register.passwordRepeat">

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

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' }
      }
   },

   methods: {
      validateLogin() {
         this.$vmv.$validate('login', () => {
            this.$http.post('/users/login', this.login);

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

      validateRegister() {
         this.$vmv.$validate('register', () => {
            this.$http.post('/users/register', this.register);

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

Weight is just 25KB so is pretty light and is tweaked to be as fast as possible.

• 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 in: check if value is one of an array.

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

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

This slider was inspired by async-validator.

Contributions, questions and comments are all welcome and encouraged.