Model data validation library for VueJs

vue-m-validator

Data Validation Library, for VueJs. Perhaps useful for other libraries/frameworks and other projects, but i created this library and using with VueJs with reactive data.

Installation

npm install --save vue-m-validator

Use case

example with components

• Required the library to your project

import validator from 'vue-m-validator';

• Make library is reactive

data () {
    return {
      isFirstRun: true,
      username: '',
      email: '',
      password: '',
      password2: '',
      validator: validator
    };
}

• If you use many forms on page in a different components, write the hook

  created () {
    validator.reset();
  }

• And validate a form

validator
    .addRule(RULE_1)
    .addRule(RULE_2)
    .addRule(RULE_N);

for the 'addRule' method, you should use as an argument the object that should have the following look:

validator
    .addRule({
      expression: !USERNAME || USERNAME === ' ',
      name: 'username',
      msg: 'username field required'
  });

• In a templates you should use v-model for data and validate form data with functions

<input
    type="text"
    v-model="username"
    @blur="checkUsername(username)">
<button
    @click="register">Registration</button>

• For showing all validation errors you can access the library object property 'errors'

<ul class="form-group">
    <li
        v-for="error in validator.errors">
          <small
              class="form-text text-muted"
              v-for="msg in error.msgs">
                  {{msg}}
          </small>
    </li>
</ul>

• To display one group message, use method 'getErrors(name)'

<ul v-if="isUsernameErrors">
    <li
        class="form-text text-danger"
        v-for="error in validator.getErrors('username')">
            &nbsp;{{ error }}
    </li>
</ul>

GitHub