1 | <h1 align="center">vue-convenia-validator</h1>
|
2 |
|
3 | vue-convenia-validator is a model-based form validation library for Vue.js
|
4 | inspired by Vuelidate and VeeValidate. Unlike Vuelidate and VeeValidate,
|
5 | vue-convenia-validator is meant to be used as a mixin rather than as a plugin.
|
6 |
|
7 |
|
8 | ### Installation
|
9 |
|
10 | #### npm
|
11 |
|
12 | ```
|
13 | npm install vue-convenia-validator --save
|
14 | ```
|
15 |
|
16 | #### yarn
|
17 |
|
18 | ```
|
19 | yarn add vue-convenia-validator
|
20 | ```
|
21 |
|
22 | ### Usage
|
23 |
|
24 | vue-convenia-validator is a model-based, template-independent validation library,
|
25 | which means that it is completely decoupled from how you build your templates.
|
26 | In order to use your component has to define a `validation` option object
|
27 | defining the validation rules for your form(s):
|
28 |
|
29 | ```vue
|
30 | <template>
|
31 | <div id="vue-app">
|
32 | <form>
|
33 | <input name="fullName" type="text" v-model="fullName" />
|
34 | <input name="birthday" type="text" v-model="birthday" />
|
35 | </form>
|
36 | </div>
|
37 | <template>
|
38 |
|
39 | <script>
|
40 | import FormValidator from 'cee-validate'
|
41 |
|
42 | export default {
|
43 | mixins: [ FormValidator ],
|
44 |
|
45 | data () {
|
46 | return {
|
47 | fullName: '',
|
48 | birthday: ''
|
49 | }
|
50 | }
|
51 |
|
52 | validation: {
|
53 | fullName: 'required',
|
54 | birthday: 'required|date_format:DD/MM/YYYY'
|
55 | }
|
56 | }
|
57 | <script>
|
58 | ```
|
59 |
|
60 | The `name` attribute on the `<input />` fields here is necessary for the mixin
|
61 | to be able to listen for certain events on the form elements. The `name`
|
62 | attribute is only necessary on the `<form>` tag when using scoped forms:
|
63 |
|
64 | ```vue
|
65 | <template>
|
66 | <div id="vue-app">
|
67 | <form name="formOne">
|
68 | <input name="fullName" type="text" v-model="formOne.fullName" />
|
69 | <input name="birthday" type="text" v-model="formOne.birthday" />
|
70 | </form>
|
71 |
|
72 | <form name="formTwo">
|
73 | <input name="fullName" type="text" v-model="formTwo.fullName" />
|
74 | <input name="birthday" type="text" v-model="formTwo.birthday" />
|
75 | <input name="age" type="number" v-model="formTwo.age" />
|
76 | </form>
|
77 | </div>
|
78 | <template>
|
79 |
|
80 | <script>
|
81 | import FormValidator from 'cee-validate'
|
82 |
|
83 | export default {
|
84 | mixins: [ FormValidator ],
|
85 |
|
86 | data () {
|
87 | return {
|
88 | formOne: {
|
89 | fullName: '',
|
90 | birthday: ''
|
91 | },
|
92 | formTwo: {
|
93 | fullName: '',
|
94 | birthday: ''
|
95 | }
|
96 | }
|
97 | }
|
98 |
|
99 | validation: {
|
100 | formOne: {
|
101 | fullName: 'required',
|
102 | birthday: 'required|date_format:DD/MM/YYYY'
|
103 | },
|
104 | formTwo: {
|
105 | fullName: 'required',
|
106 | birthday: 'required|date_format:DD/MM/YYYY'
|
107 | age: 'numeric'
|
108 | }
|
109 | }
|
110 | }
|
111 | <script>
|
112 | ```
|
113 |
|
114 | ### To-do
|
115 |
|
116 | - Implement rules
|
117 | - [x] alphanumeric - Checks if all characters in a string are alphanumeric.
|
118 | - [x] custom - Executes a callback or array of callbacks with input value as argument.
|
119 | - [x] dateFormat - Checks if value is a valid date.
|
120 | - [x] numeric - Check if all characters in a string are numbers.
|
121 | - [x] regex - Tests a RegExp on value.
|
122 | - [x] required - Checks if value isn't empty.
|
123 | - [ ] dateBetween - Checks if date is in between two date values.
|
124 | - [ ] dateBefore - Checks if given date comes before another date.
|
125 | - [ ] dateAfter - Checks if given date comes after another date.
|
126 | - [ ] email - Checks if value is a valid email address.
|
127 | - [ ] url - Checks if value is a valid URL address.
|
128 | - [ ] ip - Checks if value is a valid IP address.
|
129 | - [ ] creditCard - Checks if value is a valid credit card number.
|
130 |
|
131 | - [x] Implement unit tests
|
132 | - [ ] Improve project documentation
|
133 | - [ ] Implement option to customize validation error messages
|
134 | - [ ] Implement Vue directive
|