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>