VeeValidate在vue项目里表单校验应用案例

更新时间：2018年05月09日 11:08:28 作者：codercao

这篇文章主要介绍了VeeValidate在vue项目里表单校验应用案例，VeeValidate是Vue.js的验证库，它有很多验证规则，并支持自定义规则，非常具有实用价值，需要的朋友可以参考下

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的方式引用：

<script type="text/javascript" src="js/jquery-3.2.1.min.js" ></script>
  <script type="text/javascript" src="js/vue.min.js" ></script>
  <script type="text/javascript" src="js/vee-validate.min.js" ></script>
  <script type="text/javascript" src="js/zh_CN.js" ></script>

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

html页面部分：

<div class="enroll" id="recommend-box">
        <div class="title">请填写您要荐购的书籍信息：</div>
        <div class="content">
          <div class="info infoa">
            <div class="group-input">
              <span class="a">书 名：</span>
              <input v-model="title" v-validate="'required'" data-vv-as="书名" type="text" name="title" placeholder="请输入推荐书名" />
            </div>
            <div class="errors" v-show="errors.has('title')" v-cloak>{{ errors.first('title') }}</div>
          </div>
          <div class="info infoa">
            <div class="group-input">
              <span class="a">作 者：</span>
              <input v-model="author" v-validate="'required'" data-vv-as="作者" type="text" name="author" placeholder="请输入作者" />
            </div>
            <div class="errors" v-show="errors.has('author')" v-cloak>{{ errors.first('author') }}</div>
          </div>
          <div class="info infoa">
            <div class="group-input">
              <span class="a">出版社：</span>
              <input v-model="publisher" v-validate="'required'" data-vv-as="出版社" type="text" name="publisher" placeholder="请输入出版社" />
            </div>
            <div class="errors" v-show="errors.has('publisher')" v-cloak>{{ errors.first('publisher') }}</div>
          </div>
          <div class="info infob">         
            <div class="group-input">
              <span class="a">出版年：</span>
              <input v-model="pubYear" v-validate="'required|pubYear|digits:4'" data-vv-as="出版年" type="text" name="pubYear" placeholder="请输入出版年" />
            </div>
            <div class="errors" v-show="errors.has('pubYear')" v-cloak>{{ errors.first('pubYear') }}</div>
          </div>
          <div class="info infob">
            <div class="group-input">
              <span class="a">语言类型：</span>
              <input v-model="type" v-validate="'required'" data-vv-as="语言类型" type="text" name="type" placeholder="语言类型" />
            </div>
            <div class="errors" v-show="errors.has('type')" v-cloak>{{ errors.first('type') }}</div>
          </div>
          <div class="info infob">
            <div class="group-input">
              <span class="a">ISBN号：</span>
              <input v-model="isbn" v-validate="'required|isbn'" data-vv-as="ISBN号" type="text" name="isbn" placeholder="ISBN号" />
            </div>
            <div class="errors" v-show="errors.has('isbn')" v-cloak>{{ errors.first('isbn') }}</div>
          </div>

          <div class="info infob more">
            <div class="group-input">
              <span class="a">推荐理由：</span>
              <textarea v-model="remark" v-validate="'max:200'" data-vv-as="推荐理由" type="text" name="remark" placeholder="请输入推荐理由"></textarea>
            </div>
            <div class="errors" v-show="errors.has('remark')" v-cloak>{{ errors.first('remark') }}</div>
          </div>
           <div class="info info-btn">
             <div class="btton" @click="validateBeforeSubmit()">提交</div>
           </div>
         </div>
      </div>

注释：这边包含以下几个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部分：

<script type="text/javascript">
    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("请输入完整推荐信息！")
            });
          }
        }
      })
    }
  </script>

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

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/。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

vuex状态持久化在vue和nuxt.js中的区别说明
这篇文章主要介绍了vuex状态持久化在vue和nuxt.js中的区别说明，具有很好的参考价值，希望大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-04-04
vue源码中的检测方法的实现
这篇文章主要介绍了vue源码中的检测方法的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-09-09
vue自定义表单生成器form-create使用详解
这篇文章主要介绍了vue自定义表单生成器,可根据json参数动态生成表单,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2019-07-07
VUE元素的隐藏和显示（v-show指令)
本篇文章主要介绍了VUE元素的隐藏和显示（v-show指令)，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-06-06
Vue父子组件之间的通信实例详解
在vue组件通信中其中最常见通信方式就是父子组件之中的通信，而父子组件的设定方式在不同情况下又各有不同。这篇文章主要介绍了Vue---父子组件之间的通信,需要的朋友可以参考下
2018-09-09
Vue使用axios引起的后台session不同操作
这篇文章主要介绍了Vue使用axios引起的后台session不同操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-08-08
Vue 和 Django 实现 Token 身份验证的流程
这篇文章主要介绍了Vue 和 Django 实现 Token 身份验证 ,Vue.js 和 Django 编写的前后端项目中，实现了基于 Token 的身份验证机制，其他前后端框架的 Token 实现原理与本文一致，需要的朋友可以参考下
2022-08-08
Vue3.0中Ref与Reactive的区别示例详析
在vue3中对响应式数据的声明官方给出了ref()和reactive()这两种方式,这篇文章主要给大家介绍了关于Vue3.0中Ref与Reactive区别的相关资料,需要的朋友可以参考下
2021-07-07
详解Vue的常用指令v-if, v-for, v-show,v-else, v-bind, v-on
Vue.js的指令是以v-开头的，它们作用于HTML元素，指令提供了一些特殊的特性。这篇文章主要介绍了Vue的常用指令v-if, v-for, v-show,v-else, v-bind, v-on 的相关知识,需要的朋友可以参考下
2018-10-10
el-form的model、prop属性和表单校验等使用
本文主要介绍了el-form的model、prop属性和表单校验等使用，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2022-08-08