如何使用VeeValidate在vue项目内进行表单校验功能

这次给大家带来如何使用VeeValidate在vue项目内进行表单校验功能，使用VeeValidate在vue项目内进行表单校验功能的注意事项有哪些，下面就是实战案例，一起来看一下。

VeeValidate是什么：

VeeValidate是Vue.js的验证库，它有很多验证规则，并支持自定义规则。它基于模板，因此它与HTML5验证API相似并且很熟悉。您可以验证HTML5输入以及自定义Vue组件。它也是以本地化为基础构建的，实际上我们有大约44种语言由精彩的社区成员支持和维护。

本文包含VeeValidate包含以下几点应用：

1、基本安装使用

2、本地化支持

3、自定义规则和错误消息

4、验证HTML5输入和自定义Vue组件

5、统一提交按钮处理

先看看页面效果：

如果要看gif效果的可以在我的github（https://github.com/HongqingCao/My-Code/tree/master/VeeValidate）观看，并提供有实例源码下载，下面步入主题：

基本安装使用

VeeValidate的使用支持两种方式： 一种是：NPM/yarn（npm install vee-validate –save）， 一种是：CDN。

本文是以CDN的方式引用：

登录后复制

注释：引入了四个js文件，前面两个略讲，后面的两个分别是vee-validata和zh_CN中文语言包文件

html页面部分：

        
请填写您要荐购的书籍信息：
        
          
            
              书 名：                          
            
{{ errors.first('title') }}
          
          
            
              作 者：                          
            
{{ errors.first('author') }}
          
          
            
              出版社：                          
            
{{ errors.first('publisher') }}
          
          
                     
              出版年：                          
            
{{ errors.first('pubYear') }}
          
          
            
              语言类型：                          
            
{{ errors.first('type') }}
          
          
            
              ISBN号：                          
            
{{ errors.first('isbn') }}
          
          
            
              推荐理由：                          
            
{{ errors.first('remark') }}
          
           
             
提交
           
         
      

登录后复制

注释：这边包含以下几个VeeValidate知识点：

1、input/textarea标签中的 v-validate、data-vv-as、name 属性。（v-model我这里是双向绑定，方便把这些参数传递给接口请求，不做过多介绍） 2、错误提示标签里面的 v-show=”errors.has(‘remark’)” 和**{{ errors.first(‘remark’) }}**

v-validate：

v-validate指令添加到您希望验证的输入中，并确保您的输入具有name用于生成错误消息的属性。 然后，传递给指令一个rules字符串，其中包含由管道’ |’ 分隔的验证规则列表。比如上面的 出版年 份的校验，使用 required 这个选项是必填项， pubYear 以表明该字段必须为年的格式（当然这里是自定义的），digits:4，数字长度是4。要结合这两个规则，我们指定字符串值required|pubYear|digits:4的v-validate表达式的值。

data-vv-as：

当为这个输入生成任何错误消息时，它将使用该data-vv-as值而不是实际的字段名称，默认的错误提示都是英文，如果你设置了这个，错误提示字段名称它会提示data-vv-as值

v-show=”errors.has(‘remark’)

默认错误提示的标签不加载出来

errors.first(‘remark’)

获取关于当前remark的第一个错误信息

js部分：

    var IndexPage = "http://localhost:8080/xxxx.html"    var AuthCode = "12131";    $(function () {      recommend(AuthCode);    })    VeeValidate.Validator.localize('zh_CN');    Vue.use(VeeValidate);    VeeValidate.Validator.localize({      zh_CN: {        messages: {          required: function (name) { return name + '不能为空' },        }      }    })    VeeValidate.Validator.extend('isbn',{      getMessage: function () { return " 请输入正确格式的isbn号" },      validate: function (value) { return /^[d-]*$/.test(value);}    })    VeeValidate.Validator.extend('pubYear', {      getMessage: function () { return " 请输入正确的年份" },      validate: function (value) { return /^(19|20)d{2}$/.test(value); }    })    function recommend(AuthCode) {      var classList = new Vue({        el: '#recommend-box',        data: function () {          return {            title: "",            author: "",            publisher: "",            pubYear: "",            type: "",            remark: "",            isbn: ""          }        },        methods: {          validateBeforeSubmit() {            this.$validator.validateAll().then((result) => {              if (result) {                $.ajax({                  url: '/xxxx',                  data: {                    Request: "xxxxx",                    title: this.title,                    author: this.author,                    publisher: this.publisher,                    pubYear: this.pubYear,                    type: this.type,                    remark: this.remark,                    isbn: this.isbn,                    certId: AuthCode                  },                  type: 'POST',                  dataType: "json",                  success: function (data) {                    var msg = data.msg;                    alert(msg);                    window.location.href = IndexPage;                  }                });                return;              }              alert("请输入完整推荐信息！")            });          }        }      })    }  

登录后复制

好，接下来我们一起来读一下这个代码

VeeValidate.Validator.localize('zh_CN');    Vue.use(VeeValidate);

登录后复制

注释：这以上代码的意思是 1、改变成zh_CN中午的语言环境，如果不改默认提示是英文 2、安装VeeValidate插件，也可以理解是初始化

VeeValidate.Validator.localize({      zh_CN: {        messages: {          required: function (name) { return name + '不能为空' },        }      }    })

登录后复制

注释：上代码修改默认提示语，name属性加不能为空，也就是必填项的非空判断

VeeValidate.Validator.extend('isbn',{      getMessage: function () { return " 请输入正确格式的isbn号" },      validate: function (value) { return /^[d-]*$/.test(value);}    })    VeeValidate.Validator.extend('pubYear', {      getMessage: function () { return " 请输入正确的年份" },      validate: function (value) { return /^(19|20)d{2}$/.test(value); }    })

登录后复制

注释：上代码修改自定义规则 getMessage ： 提示语。 validate： 就是匹配规则，通常就正则咯。

validateBeforeSubmit() {   this.$validator.validateAll().then((result) => {        if (result) {           //这里写具体的接口请求            alert("推荐成功！")           return;          }           alert("请输入完整推荐信息！")        }     }

登录后复制

注释：上代码创建一个提交按钮事件，监听是否正常填写选项，实现校验

一个完整的校验应用案例到这里已经讲解的差不多了，小伙伴们可以根据自己的实际情况应用在自己的项目中，如果需要深入了解，可以移步到官网https://baianat.github.io/vee-validate/guide/。

相信看了本文案例你已经掌握了方法，更多精彩请关注【创想鸟】其它相关文章！

推荐阅读：

如何操作Vue内使用vee-validate

Node.js笔记process模块使用详解

以上就是如何使用VeeValidate在vue项目内进行表单校验功能的详细内容，更多请关注【创想鸟】其它相关文章！