Simple Vue Validator
lightweight yet flexible model based vue validation.
Simple Vue validator is a lightweight yet flexible plugin for Vue.js 2.0 that allows you to validate input fields, and display errors. It watches changes of your model data, validates them and informs you with the validation result.
It uses a model-based solution for monitoring user input, this means all your validation rules can be put together in one place in javascript code, while the HTML template simply displays validation status and result, this IMO results in a better separation of business logic and presentation. Placing validation rules in code also means you can leverage the full power of javascript to implement complex logic.
This plugin strives to achieve both simplicity and flexibility for form validation, basic validation should require only the minimal amount of codes, at the same time, it should also be able to support complex validation cases like:
Fully customized validation rules.
Cross field validation.
Async/ajax validation (with supports of loading indicator, result caching, debounced user input).
Validating custom component.
Dynamic form / multiple validation instances.
Installation
Package is installable via npm.
npm install --save simple-vue-validator
You can also install it via bower.
bower install --save simple-vue-validator
NOTE: for bower package, please use /dist/plugin.js.
Configuration
var Vue = require('vue');
var SimpleVueValidation = require('simple-vue-validator');
Vue.use(SimpleVueValidation);
Basic Usage
Define the validators object in your vue / component instance:
validators: {
email: function (value) {
return Validator.value(value).required().email();
}
}
In the template HTML use the validation object injected by the library to display validation status / results.
<div class="message">{{ validation.firstError('email') }}</div>
Live Demo
http://simple-vue-validator.maijin.info/
