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="https://www.jb51.net/js/jquery-3.2.1.min.js" ></script> <script type="text/javascript" src="https://www.jb51.net/js/vue.min.js" ></script> <script type="text/javascript" src="https://www.jb51.net/js/vee-validate.min.js" ></script> <script type="text/javascript" src="https://www.jb51.net/js/zh_CN.js" ></script>
注释:引入了四个js文件,前面两个略讲,后面的两个分别是vee-validata和zh_CN中文语言包文件
html页面部分:
<div> <div>请填写您要荐购的书籍信息:</div> <div> <div> <div> <span>书 名:</span> <input v-model="title" v-validate="'required'" data-vv-as="书名" type="text" placeholder="请输入推荐书名" /> </div> <div v-show="errors.has('title')" v-cloak>{{ errors.first('title') }}</div> </div> <div> <div> <span>作 者:</span> <input v-model="author" v-validate="'required'" data-vv-as="作者" type="text" placeholder="请输入作者" /> </div> <div v-show="errors.has('author')" v-cloak>{{ errors.first('author') }}</div> </div> <div> <div> <span>出版社:</span> <input v-model="publisher" v-validate="'required'" data-vv-as="出版社" type="text" placeholder="请输入出版社" /> </div> <div v-show="errors.has('publisher')" v-cloak>{{ errors.first('publisher') }}</div> </div> <div> <div> <span>出版年:</span> <input v-model="pubYear" v-validate="'required|pubYear|digits:4'" data-vv-as="出版年" type="text" placeholder="请输入出版年" /> </div> <div v-show="errors.has('pubYear')" v-cloak>{{ errors.first('pubYear') }}</div> </div> <div> <div> <span>语言类型:</span> <input v-model="type" v-validate="'required'" data-vv-as="语言类型" type="text" placeholder="语言类型" /> </div> <div v-show="errors.has('type')" v-cloak>{{ errors.first('type') }}</div> </div> <div> <div> <span>ISBN号:</span> <input v-model="isbn" v-validate="'required|isbn'" data-vv-as="ISBN号" type="text" placeholder="ISBN号" /> </div> <div v-show="errors.has('isbn')" v-cloak>{{ errors.first('isbn') }}</div> </div> <div> <div> <span>推荐理由:</span> <textarea v-model="remark" v-validate="'max:200'" data-vv-as="推荐理由" type="text" placeholder="请输入推荐理由"></textarea> </div> <div v-show="errors.has('remark')" v-cloak>{{ errors.first('remark') }}</div> </div> <div> <div @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: