There are already good validator libraries dedicated for Vue.js like vue-validator or vee-validate.

Both those libraries work quite similarly in that they require you to write the rules inside the template. Often this is all you actually need for your application. Let’s take a look at this example from vee-validate:

<input v-model="email" v-validate data-rules="required|email" :class="{'input': true, 'is-danger': errors.has('email') }" type="text" placeholder="Email">

The problem

However, if you work on a more data oriented application you’ll notice that you’re validating much more than just your inputs. Then you have to combine the above approach with custom validation methods or computed values. This introduces additional noise both in the templates and in your code. I also believe that templates are not the best place for declaring application logic.

This becomes even more visible when you want to validate collections or values combined from different sources like Vuex getters, user inputs and computed values. Or when your validation rules depend on other validation results etc.

#vue.js #vuelidate #development