zee-validator
v1.0.2
Published
A model-based form validation library for vue inspired by vuelidate and vee-validate.
Downloads
3
Maintainers
Readme
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
- [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