Vue 中表单验证框架 vee-validate的安装和基本的使用

 vee-validate可以对表单进行一个全面的验证，它自带了邮箱 手机 身份证等常用类型验证，是一个Vue.js的基于模板的验证框架

官网如下 ​​​​​​​VeeValidate: Painless Vue.js forms

​​​​​​​

安装

首先我们需要进入项目目录下，比如你的项目叫Demo ，我们进入Demo目录下后 ，打开命令窗口 输入如下命令

npm install vee-validate

安装成功后进入main.js文件中引入它，main.js的vee配置如下

import VeeValidate from 'vee-validate';

Vue.use(VeeValidate);

注意，这里我是以vuecli3.0的脚手架创建的项目为例

到这里为止我们就安装完成了 然后可以开始使用

<div class="input_group" :class="{error:errors.has('cno')}">
    <input name="cno" v-validate="{required:true,max:6,min:4}" type="number"/>
</div>

我们在需要验证的表单中加入，v-validate="{required:true,max:6,min:4}" 其中验证规则很简单，使用required表明，该表单是必填的，这里我们只判断这个cno表单最大长度为6 最小长度为4，若不满足条件，则它会在errors.has中创建一个名为cno的错误信息

:class="{error:errors.has('cno')}" ，就是用于判断当前errors.has中是否存在一个名为cno的错误信息 ，若有，我们便应用error样式，否则不应用，这里这个errors是全局的，只要我们在main.js中导入它，便可以全局使用，这只是一个最普通的验证。

这里的cno指的是表单的name，所以再使用vee时，我们必须给要用的表单加上一个name，以便errors捕捉错误信息，若我们需要在js中进行判断的话 则可以使用  “this.errors.any()”

if(this.errors.any()){//用于返回全部的校验信息 若有错误则返回true 若全部校验通过没有错误 则返回false
          console.log("有错误")
          return;
 }

但是这里会有个bug，因为它的验证功能只要当我们操作这个表单时才会触发，所以当我们不操作表单时它默认验证是成功的，没有错误信息，会返回false。所以我们需要让它组件加载时就强制开启验证所有表单

mounted() {
    //组件一加载完就进行表单校验 强制校验全部表单
    this.$validator.validate();
  },

注意，这里校验的是应用过vee的表单，若没有使用vee的表单则不会被验证

这里我们只列出安装和简单的使用 它的验证功能远不止这简单 

这是vee的官方教程，可以在这里进行系统的学习

https://vee-validate.logaretm.com/v4