zee-validator
TypeScript icon, indicating that this package has built-in type declarations

1.0.2 • Public • Published

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

Package Sidebar

Install

npm i zee-validator

Weekly Downloads

1

Version

1.0.2

License

MIT

Unpacked Size

230 kB

Total Files

30

Last publish

Collaborators

  • ierik