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

Vue 2019-01-07

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('author') }}

{{ errors.first('publisher') }}

{{ errors.first('pubYear') }}

{{ errors.first('type') }}

{{ errors.first('isbn') }}

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

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

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("请输入完整推荐信息！")
        });
      }
    }
  })
}

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

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

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

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

{ if (result) { //这里写具体的接口请求 alert("推荐成功！") return; } alert("请输入完整推荐信息！") } }

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

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

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

VeeValidate vue vue vue.js 表单校验

相关文章

Vuex- Action的 { commit }的写法

https://segmentfault.com/a/1190000022018995 https://www....

ES6模块之export和import详解

ES6 （ECMAScript 6）中的模块是一个包含 JavaScript 代码的...

Vue知识点汇总（含Vue3）

from https://mp.weixin.qq.com/s/-rc1lYYlsfx-wR4mQmIIQQ V...

npm init vite@latest vue3study --template vue

D:\Temp>npm init vite@latest vue3study --temp...

Vue 中使用消息总线让两个滚动条同步滚动

文章浏览阅读1.2k次。最近自己从零撸起的甘特图组件需要子组...

Vue + lodop 静默打印

文章浏览阅读3.3k次，点赞3次，收藏16次。静默打印是什么？简...