zee-validator

zee-validator

zee-validator is a model-based form validation library for Vue.js inspired by Vuelidate and VeeValidate. Unlike Vuelidate and VeeValidate, zee-validator is meant to be used as a mixin rather than as a plugin.

Installation

npm

npm install zee-validator --save

yarn

yarn add zee-validator

Usage

zee-validator is a model-based, template-independent validation library, which means that it is completely decoupled from how you build your templates. In order to use your component has to define a validation option object defining the validation rules for your form(s):

<template>
  <div id="vue-app">
    <form>
      <input name="fullName" type="text" v-model="fullName" />
      <input name="birthday" type="text" v-model="birthday" />
    </form>
  </div>
<template>

<script>
import FormValidator from 'zee-validate'

export default {
  mixins: [ FormValidator ],

  data () {
    return {
      fullName: '',
      birthday: ''
    }
  }

  validations: {
    fullName: 'required',
    birthday: 'required|date_format:DD/MM/YYYY'
  }
}
<script>

The name attribute on the <input /> fields here is necessary for the mixin to be able to listen for certain events on the form elements. The name attribute is only necessary on the <form> tag when using scoped forms:

<template>
  <div id="vue-app">
    <form name="formOne">
      <input name="fullName" type="text" v-model="formOne.fullName" />
      <input name="birthday" type="text" v-model="formOne.birthday" />
    </form>

    <form name="formTwo">
      <input name="fullName" type="text" v-model="formTwo.fullName" />
      <input name="birthday" type="text" v-model="formTwo.birthday" />
      <input name="age" type="number" v-model="formTwo.age" />
    </form>
  </div>
<template>

<script>
import FormValidator from 'zee-validate'

export default {
  mixins: [ FormValidator ],

  data () {
    return {
      formOne: {
        fullName: '',
        birthday: ''
      },
      formTwo: {
        fullName: '',
        birthday: ''
      }
    }
  }

  validations: {
    formOne: {
      fullName: 'required',
      birthday: 'required|date_format:DD/MM/YYYY'
    },
    formTwo: {
      fullName: 'required',
      birthday: 'required|date_format:DD/MM/YYYY'
      age: 'numeric'
    }
  }
}
<script>

To-do

• Implement rules

  • alphanumeric - Checks if all characters in a string are alphanumeric.
  • custom - Executes a callback or array of callbacks with input value as argument.
  • dateFormat - Checks if value is a valid date.
  • numeric - Check if all characters in a string are numbers.
  • regex - Tests a RegExp on value.
  • required - Checks if value isn't empty.
  • hour - Checks if value is a valid hour
  • dateBetween - Checks if date is in between two date values.
  • dateBefore - Checks if given date comes before another date.
  • dateAfter - Checks if given date comes after another date.
  • email - Checks if value is a valid email address.
  • url - Checks if value is a valid URL address.
  • ip - Checks if value is a valid IP address.
  • creditCard - Checks if value is a valid credit card number.

• Implement unit tests

• Improve project documentation

• Implement option to customize validation error messages

• Implement Vue directive