Vue2.0表单校验组件vee-validate的使用

import Vue from 'vue'
import App from './App.vue'
import VeeValidate, { Validator } from 'vee-validate';

import messages from './assets/js/zh_CN'

Validator.updateDictionary({
    zh_CN:{
        messages
    }
})

const config = {
    errorBagName:'errors',
    delay:0,
    locale:'zh_CN',
    messages:null,
    strict:true
}

Vue.use(VeeValidate,config);

new Vue({
  el: '#app',
  render: h => h(App)
})

 

<template>
  <div id="app">

     <label class="label" for="email">email </label>
      <p class="control">
          <input v-validate.initial="'required|email'" v-model="email" type="text" placeholder="email" name="email">
          <span v-show="errors.has('email')" class="help is-danger">{{ errors.first('email') }}</span>

      </p>
       <label class="label">Email (1s delay)</label>
        <p class="control has-icon has-icon-right">
            <input name="email" v-validate="'required|email'"  :class="{'input': true, 'is-danger': errors.has('email') }" type="text" placeholder="Email">
            <i v-show="errors.has('email')" class="fa fa-warning"></i>
            <span v-show="errors.has('email')" class="help is-danger">{{ errors.first('email') }}</span>
        </p>
  </div>
</template>

<script>


export default {
  data () {
    return {
      email:''
    }
  },

}
</script>

 

 

 

https://www.bbsmax.com/A/n2d9X8RY5D/         有问题，   示例看下个链接

 

http://vee-validate.logaretm.com/examples.html

转载于:https://www.cnblogs.com/yang-C-J/p/6971570.html