1 安装：

npm install vee-validate --save


2.mian.js 填写

import Vue from 'vue'

import VeeValidate, {Validator}  from 'vee-validate';

import zh from 'vee-validate/dist/locale/zh_CN';

Validator.addLocale(zh);

const config = {

  locale: 'zh_CN'

};

Vue.use(VeeValidate,config);

 1 <form @submit.prevent="validateBeforeSubmit">

 2             <div class="column is-12">

 3                 <label class="label">手机：</label>

 4                 <p class="control has-icon has-icon-right">

 5                     <input name="phone" v-model="phone" v-validate="'required|phone'" data-first-as="Firsts Name" :class="{'input': true, 'is-danger': errors.has('phone') }" type="text" placeholder="手机">

 6                     <i v-show="errors.has('phone')" class="fa fa-warning"></i>

 7                     <span v-show="errors.has('phone')" class="help is-danger">{{ errors.first('phone') }}</span>

 8                 </p>

 9             </div>

10             <div class="column is-12">

11                 <label class="label">邮箱：</label>

12                 <p class="control has-icon has-icon-right">

13                     <input name="email" v-model="email" v-validate="'required|email'" data-first-as="Firsts Name" :class="{'input': true, 'is-danger': errors.has('email') }" type="text" placeholder="邮箱">

14                     <i v-show="errors.has('email')" class="fa fa-warning"></i>

15                     <span v-show="errors.has('email')" class="help is-danger">{{ errors.first('email') }}</span>

16                 </p>

17             </div>

18             <div class="column is-12">

19                 <label class="label">密码：</label>

20                 <p class="control has-icon has-icon-right">

21                     <input name="pwd" v-model="pwd" v-validate="'required|pwd|min:10'" data-first-as="Firsts Name" :class="{'input': true, 'is-danger': errors.has('pwd') }" type="password" placeholder="密码">

22                     <i v-show="errors.has('pwd')" class="fa fa-warning"></i>

23                     <span v-show="errors.has('pwd')" class="help is-danger">{{ errors.first('pwd') }}</span>

24                 </p>

25             </div>

26             <div class="column is-12">

27                 <label class="label">确认密码：</label>

28                 <p class="control has-icon has-icon-right">

29                     <input name="chepwd" v-model="chepwd" v-validate="'required|chepwd|min:10'" data-first-as="Firsts Name" :class="{'input': true, 'is-danger': errors.has('chepwd') }" type="password" placeholder="密码">

30                     <i v-show="errors.has('chepwd')" class="fa fa-warning"></i>

31                     <span v-show="errors.has('chepwd')" class="help is-danger">{{ errors.first('chepwd') }}</span>

32                 </p>

33             </div>

34             <div class="column is-12">

35                 <p class="control">

36                     <button class="button is-primary" type="submit">Submit</button>

37                 </p>

38             </div>

39         </form>

<script>

	import { Validator } from 'vee-validate';

	export default {

		components: {},

		name: 'form-example',

		data: () => ({

			phone: '',

			email: '',

			pwd: '',

			chepwd: ''

		}),

		created() {

			const dictionary = {

				zh_CN: {

					messages: {

						email: () => '邮箱格式错误。',

						required: (field) => "不能为空" + field, //替换 “ 必须  ” 关键字

					},

					attributes: {

						//email: '不能为空'

					}

				}

			};

			this.$validator.updateDictionary(dictionary);

			Validator.extend('phone', {

				messages: {

					zh_CN: field => field + '必须是11位手机号码',

				},

				validate: value => {

					return value.length == 11 && /^((13|14|15|17|18)[0-9]{1}\d{8})$/.test(value)

				}

			});

			Validator.extend('pwd', {

				messages: {

					zh_CN: field => field + '密码不能少于十位数',

				},

				validate: value => {

					return value;

				}

			});

			Validator.extend('chepwd', {

				messages: {

					zh_CN: field => field + '两次密码不一致',

				},

				validate: value => {

					if(this.chepwd == this.pwd){

						return value

					}else{

						return false;

					}

				}

			});

		},

		methods: {

			validateBeforeSubmit() {

				this.$validator.validateAll().then((result) => {

					if(result) { // eslint-disable-next-line

						alert('From Submitted!');

						return;

					}

					alert('Correct them errors!');

				});

			}

		}

	};

</script>

推荐阅读：

文档：http://vee-validate.logaretm.com/localization.html

官方例子：http://vee-validate.logaretm.com/examples.html

参考出处：http://www.jianshu.com/p/2a456e31c581