VeeValidate在vue项目表单验证中的应用案例

什么是虚拟验证：

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/veevaluate)中观看，并提供示例源代码下载。进入下面的主题：

基本安装和使用

使用VeeValidate有两种方法：一种是NPM/纱(NPM安装vee-validate-save)，另一种是CDN。

CDN引用了这篇文章：

脚本类型=' text/JavaScript ' src=' http : js/jquery-3 . 2 . 1 . min . js '/脚本脚本类型=' text/JavaScript ' src=' http : js/vue . min . js '/script script类型=' text/JavaScript ' src=' http : js/vee-validate . min . js '/脚本脚本类型=' text/JavaScript ' src=' https

Html页面部分：

' div class='注册id='推荐-框' div class='标题'请填写您要荐购的书籍信息：/div class=' content ' div class=' info infoa ' div class=' group-input ' span class=' a '书名：/span输入v-model=' title ' v-validate=' required ' ' data-vv-as='书名type=' text ' name=' title ' placeholder='请输入推荐书名//div div class=' errors ' v-show=' errors。have(' title ')v-斗篷{ {错误。first(' title ')}/div/div class=' info infoa ' div class=' group-input ' span class=' a '作者：/span输入v-model=' author ' v-validate=' required ' ' data-vv-as='作者type=' text ' name=' author ' placeholder='请输入作者//div div class=' errors ' v-show=' errors。have(' author ')' v-斗篷{ {错误。first(' author ')}/div/div class=' info infoa ' div class=' group-input ' span class=' a '出版社：/span输入v-model=' publisher ' v-validate=' required ' ' data-vv-as='出版社type=' text ' name=' publisher ' placeholder='请输入出版社//div class=' errors ' v-show=' errors。have(' publisher ')' v-斗篷{ { errors . first(' publisher ')} }/div/div class=' info infob ' div class=' group-input ' span class=' a '出版年：/span输入v-model='pubYear' v-validate=' '必选|pubYear|digits:4 ' '数据-vv-as='出版年type='text' name='pubYear '占位符='请输入出版年//div div class=' errors ' v-show=' errors。有(' Pubyear ')v-斗篷{ {错误。第一个(' Pubyear ')} }/div/div class=' info infob ' div class=' group-input ' span class=' a '语言类型：/span输入v-model=' type ' v-validate=' required ' ' data-vv-as='语言类型type=' text ' name=' type ' placeholder='语言类型//div div class=' errors ' v-show=' errors。have(' type ')' v-斗篷{ {错误。第一个(' type ')}/div/div class=' info infob ' div class=' group-input ' span class=' a ' ISBN号：/span输入v-model='isbn' v-validate=' '必需|isbn“”数据-vv-as='ISBN号type='text' name='isbn '占位符='isbn '号//div class=' errors ' v-show=' errors。has(' ISBN ')' v-斗篷{ { errors . first(' ISBN ')} }/div/div class=' info infob more ' div class=' group-input ' span class=' a '推荐理由：/span textarea v-model='备注v-validate=' max :200 ' ' data-vv-as='推荐理由type='text' name='备注占位符='请输入推荐理由/text area/div class=' errors ' v-show=' errors。“has(”备注)”v—斗篷{{ errors.first('备注)} }/div/div class=' info-BTN ' div class=' btton ' @单击='validateBeforeSubmit()'提交/div /div /div注释：这边包含以下几个VeeValidate知识点：

1、输入/文本区标签中的v-validate、data-vv-as、name属性型)我这里是双向绑定，方便把这些参数传递给接口请求，不做过多介绍) 2、错误提示标签里面的v-show='errors.has '(备注)和**{{ errors.first('备注')}}**

v-验证：

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

数据-vv-as:

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

v-show='errors.has '(备注)

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

errors.first('备注)

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

射流研究…部分：

脚本类型=' text/JavaScript ' var index page=' http://localhost :8080/xxxx。html ' var AuthCode=' 12131$(function(){ recommend(AuthCode))；}) VeeValidate .验证器。本地化(' zh _ CN ')；vue。使用(VeeValidate)；VeeValidate .验证器。本地化({ zh _ CN: { messages : {必需的d :函数(名称){ return name })不能为空}，} } }) VeeValidate .Validator.extend('isbn '，{ getmessage : function(){ return '请输入正确格式的isbn号}，validate:函数（值){返回/^[\d-]*$/.测试（值);} })veevaluate .Validator.extend('pubYear '，{ getmessage : function(){ return '请输入正确的年份}，validate:函数（值){返回/^(19|20)\d{2}$/.测试（值);} })函数recommend(AuthCode){ var class list=new Vue({ El : ' # recommend-box '，data : function(){ return { title : ' '，author: ' '，publisher: ' '，pubYear: ' '，type: ' '，备注： ' ' }，方法3: { validate before submit(){ this .$validator.validateAll().然后((结果)={ if(结果){ $)。ajax({ url: '/xxxx '，data: { Request: '