vee-validate表單驗證組件

vee-validate是VUE的基於模板的驗證框架，允許您驗證輸入並顯示錯誤

安裝

npm i vee-validate --save

引入

import Vue from 'vue';
import VeeValidate from 'vee-validate';

Vue.use(VeeValidate);

引入組件

import { ValidationProvider } from 'vee-validate';
Vue.component('ValidationProvider', ValidationProvider);

export default {
  components: {
    ValidationProvider
  }
};

在模板中使用

<div class="column is-12">
    <label class="label" for="email">Email</label>
    <p :class="{ 'control': true }">
        <input v-validate="'required|email'" :class="{'input': true, 'is-danger': errors.has('email') }" name="email" type="text" placeholder="Email">
        <span v-show="errors.has('email')" class="help is-danger"></span>
    </p>
</div>