vee-validate的使用

1.安装

  cnpm install vee-validate --save

2.在assets文件夹下创建一个validate.js文件

'use strict';
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);

// 自定义validate 
const dictionary = {
   zh_CN: {
      messages: {
        email: () => '请输入正确的邮箱格式',
        required: ( field )=> "请输入" + field
      },
      attributes:{
        email:'邮箱',
        password:'密码',
        name: '账号',
        phone: '手机'
      }
  }
};

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

3.在main.js中引入这个js文件

import "./assets/validata.js"

4.使用
在 HelloWord.vue文件中写入一下测试代码

<p>
          <input v-validate="'required|email'" name="email" type="text" placeholder="Email">
          <span v-show="errors.has('email')"  >{{ errors.first("email") }}</span>
        </p>
        <p>
          <input v-validate="'required|phone'" name="phone" type="text" placeholder="phone">
          <span v-show="errors.has('phone')"  >{{ errors.first("phone") }}</span>
         </p>

5.运行

npm run dev

详细信息请参阅
http://www.jianshu.com/p/bd606e194392