Каков наилучший способ проверки ввода (Skeleton + Vue.js)?

Question

Я действительно подобен этим инструментам из-за их простоты и компактности. Но иногда я сталкиваюсь отсутствием плагин/сниппетов (мои навыки JS также довольно слаб, как правило, я разработчик бэкенд), так вот один из таких случаев:

К примеру, у меня есть простая форма, как это:

<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> 

Как вы можете видеть, я хочу, чтобы эти поля были необходимы, адрес электронной почты должен быть в формате электронной почты, что-то вроде ***@***.***, поле даты может быть любым.

Каков наилучший способ реализовать это? Также я нашел 3 плагина Vue, кто ваш любимый?

• vue-validator
• vee-validate
• vue-form

Спасибо за любые примеры/фрагменты/и т.д.

Answer 1

Поскольку вы из серверной и не эксперт JS (ни я; D) Я предлагаю вам сделать это самостоятельно. Вы узнаете больше.

Это, как я хотел бы сделать это:

<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 
    }