1，安装

npm install vee-validate --save

2，引入

importVuefrom'vue';

importVeeValidatefrom'vee-validate';

Vue.use(VeeValidate，config);

//config配置（如果跟其他配置冲突，可以在这里更改，一般不需要写config在main.js里面）

配置的链接https://baianat.github.io/vee-validate/configuration.html

图

下面就可以在项目里面用了，做一个简单的验证吧。

input

//required为必填

需要验证的写法（请注意这个加粗部分，这个是验证，跟后面的name="email",没关系哦）

<inputv-validate="'required|email'"name="email"type="text">

错误提示(errors的样式最好不要在行内写哦)

<div class="errors" style="color: red;" v-show="errorBags.has('couponCode')" v-cloak>{{ errorBags.first('couponCode') }}</div>

可以看到errorBags，这个我在config里面修改了(因为我的项目产生了冲突)

errorBagName: 'errorBags',//默认是errors

first，是显示单个错误消息

all()将所有字段错误收集到单个平面数组中

...展示错误的方法还有很多，可以看下文档

可以this.$validator.validate()在用户提交表单后调用触发验证：