What is the best way to validate input (Skeleton + Vue.js)? - css

Question

I realy like this tools, because of their simplicity and compactness. But sometimes I face lack of plugins / snippets (my JS skills also pretty weak, usually I'm backend developer), so here's one of those cases:
For example, I have simple form like this one:
<div class="row">
<div class="six columns">
<label for="email">Contact email*</label>
<input v-model="email" class="u-full-width" type="email" id="email" placeholder="admin#exchange.com" name="email">
</div>
<div class="six columns">
<label for="date">Launch date*</label>
<input v-model="date" class="u-full-width" type="text" id="date" placeholder="June, 2014">
</div>
</div>
As you can see, I want to make this fields required, email input should be in email format, something like ***#***.***, date field can be anything.
What is the best way to realize it? Also I've found 3 Vue plugins, who's your favorite?
vue-validator
vee-validate
vue-form
Thanks for any examples/snippets/etc

Answer 1

Since you come from backend and are not expert with JS ( neither am I :D ) I suggest you do it yourself. You will learn more.
This is how I would do it:
<input name="email" v-model="email" #keyup="validateEmail()" />
... vue component or instance ...
data: function() { // if you are doing this on Vue instance and not component then data property will look differently but if in component it has to be a function that returns an object
return {
email: ""
}
},
methods: {
validateEmail: function() {
console.log(this.email)
// here you have access to email input as it changes so you can use either regex or substring or some other string manipulation to determine if the string satisfies your criteria
}