VeeValidate2.0校验插件

VeeValidate3.0用法和2.0不一致，详看文档。

1.VeeValidate2.0安装

yarn add vee-validate@"<3.0.0"

2.创建实例之前，进行use操作

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

3.使用

// 标签上使用 name属性很关键
v-validate="{ required: true, max: 6, min: 4 }"
name="cno"

// 配合样式展示校验结果
// veevalidate会给父容器返回一个errors样式类。

// 如果返回的errors样式类包含name属性则说明校验不通过
:class="{ error: errors.has('cno') }"

// 判断当前校验是否全部通过
this.errors.any(); // true 为有错误 false 为没有错误
if (this.errors.any()) {
  console.log("有错误");
  return;
}
console.log("没错误");

// 如果不输入值，validate默认是不校验的
// 所以需要强行校验
// 在页面挂载完之后通过$validator实例来强行校验
mounted() {
    this.$validator.validate();
  },