vue-convenia-validator
A model-based form validation library for vue inspired by vuelidate and vee-validate.
Last updated 5 months ago by guibarscevicius .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install vue-convenia-validator 
SYNC missed versions from official npm registry.

vue-convenia-validator

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

Installation

npm

npm install vue-convenia-validator --save

yarn

yarn add vue-convenia-validator

Usage

vue-convenia-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 'cee-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 'cee-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

    • [x] alphanumeric - Checks if all characters in a string are alphanumeric.
    • [x] custom - Executes a callback or array of callbacks with input value as argument.
    • [x] dateFormat - Checks if value is a valid date.
    • [x] numeric - Check if all characters in a string are numbers.
    • [x] regex - Tests a RegExp on value.
    • [x] required - Checks if value isn't empty.
    • [x] 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.
    • [x] 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.
  • [x] Implement unit tests

  • [ ] Improve project documentation

  • [ ] Implement option to customize validation error messages

  • [ ] Implement Vue directive

Current Tags

  • 0.1.53                                ...           latest (5 months ago)

29 Versions

  • 0.1.53                                ...           5 months ago
  • 0.1.51                                ...           5 months ago
  • 0.1.50                                ...           a year ago
  • 0.1.49                                ...           a year ago
  • 0.1.48                                ...           a year ago
  • 0.1.47                                ...           a year ago
  • 0.1.46                                ...           a year ago
  • 0.1.45                                ...           a year ago
  • 0.1.44                                ...           a year ago
  • 0.1.43                                ...           a year ago
  • 0.1.42                                ...           a year ago
  • 0.1.41                                ...           a year ago
  • 0.1.40                                ...           a year ago
  • 0.1.39                                ...           a year ago
  • 0.1.38                                ...           a year ago
  • 0.1.37                                ...           a year ago
  • 0.1.36                                ...           a year ago
  • 0.1.35                                ...           a year ago
  • 0.1.34                                ...           a year ago
  • 0.1.33                                ...           a year ago
  • 0.1.32                                ...           a year ago
  • 0.1.31                                ...           a year ago
  • 0.1.30                                ...           a year ago
  • 0.1.29                                ...           a year ago
  • 0.1.28                                ...           a year ago
  • 0.1.27                                ...           2 years ago
  • 0.1.26                                ...           2 years ago
  • 0.1.25                                ...           2 years ago
  • 0.1.24                                ...           2 years ago
Downloads
Today 0
This Week 0
This Month 0
Last Day 0
Last Week 0
Last Month 0
Dependencies (3)
Dev Dependencies (19)
Dependents (0)
None

Copyright 2014 - 2016 © taobao.org |