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

VeeValidate是什么:

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

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

1、基本安装使用

2、本地化支持

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

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

5、统一提交按钮处理

先看看页面效果:

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

如果要看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页面部分:

<p class="enroll" id="recommend-box"> <p class="title">请填写您要荐购的书籍信息:</p> <p class="content"> <p class="info infoa"> <p class="group-input"> <span class="a">书 名:</span> <input v-model="title" v-validate="'required'" data-vv-as="书名" type="text" name="title" placeholder="请输入推荐书名" /> </p> <p class="errors" v-show="errors.has('title')" v-cloak>{{ errors.first('title') }}</p> </p> <p class="info infoa"> <p class="group-input"> <span class="a">作 者:</span> <input v-model="author" v-validate="'required'" data-vv-as="作者" type="text" name="author" placeholder="请输入作者" /> </p> <p class="errors" v-show="errors.has('author')" v-cloak>{{ errors.first('author') }}</p> </p> <p class="info infoa"> <p class="group-input"> <span class="a">出版社:</span> <input v-model="publisher" v-validate="'required'" data-vv-as="出版社" type="text" name="publisher" placeholder="请输入出版社" /> </p> <p class="errors" v-show="errors.has('publisher')" v-cloak>{{ errors.first('publisher') }}</p> </p> <p class="info infob"> <p 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="请输入出版年" /> </p> <p class="errors" v-show="errors.has('pubYear')" v-cloak>{{ errors.first('pubYear') }}</p> </p> <p class="info infob"> <p class="group-input"> <span class="a">语言类型:</span> <input v-model="type" v-validate="'required'" data-vv-as="语言类型" type="text" name="type" placeholder="语言类型" /> </p> <p class="errors" v-show="errors.has('type')" v-cloak>{{ errors.first('type') }}</p> </p> <p class="info infob"> <p 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号" /> </p> <p class="errors" v-show="errors.has('isbn')" v-cloak>{{ errors.first('isbn') }}</p> </p> <p class="info infob more"> <p class="group-input"> <span class="a">推荐理由:</span> <textarea v-model="remark" v-validate="'max:200'" data-vv-as="推荐理由" type="text" name="remark" placeholder="请输入推荐理由"></textarea> </p> <p class="errors" v-show="errors.has('remark')" v-cloak>{{ errors.first('remark') }}</p> </p> <p class="info info-btn"> <p class="btton" @click="validateBeforeSubmit()">提交</p> </p> </p> </p>

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