在项目中安装

npm install vee-validate@2.0.0-rc.25 --save

注意：如果不指定版本直接安装，会出错，是因为版本不存在

在项目中引入

// main.js
import VeeValidate from 'vee-validate';
Vue.use(VeeValidate);

自定义校验规则

1、在项目根目录新建_rules.js 文件
2、在main.js 中引入  import './_rule.js'

// 下面是_rules.js中的代码
import { Validator } from 'vee-validate';

Validator.extend('userName',{
    getMessage:field => '不能以_开头',
    validate: value => {
        return /\^[-]/.test(value)
    }
})
Validator.extend('password',{
    getMessage:field => '只能包含字母、数字、下划线、长度 6-20',
    validate: value => {
        return /^(\w){6,20}$/.test(value) // 只能包含字母、数字、下划线、长度 6-20
    }
})

在表单中使用

<template>
    <div>
        <div>
            <label>用户名：</label>
            <input v-validate="'required|userName'" type="text" name="userName" data-vv-as="user name">
            <span v-show="errors.has('userName')">{{ errors.first('userName') }}</span>
        </div>
        <div>
            <label>密 码：</label>
            <input v-validate="'required|password'" type="password" name="password" data-vv-as="password">
            <span v-show="errors.has('password')">{{ errors.first('password') }}</span>
        </div>
        <div>
            <button @click="submitForm">提交</button>
        </div>
    </div>
</template>

在点击提交按钮时进行表单校验

 submitForm() {
 	this.$validator.validateAll().then(res => {
 		console.log('提交表单',res)
	})
 }

data-vv-as：

当为这个输入生成任何错误消息时，默认使用 name 对应的值，但是当 data-vv-as 存在的时候，data-vv-as 的值，将取代name的值

v-validate

将验证添加到指定的表单输入框中，并确保您的输入具有name用于生成错误消息的属性。然后，传递给指令一个rules字符串

该文章仅用于帮助初次接触 VeeValidate的朋友们，有任何不足之处，请指正