VeeValidate在vue项目里表单校验应用案例
VeeValidate是什么:
VeeValidate是Vue.js的验证库,它有很多验证规则,并支持自定义规则。它基于模板,因此它与HTML5验证API相似并且很熟悉。您可以验证HTML5输入以及自定义Vue组件。它也是以本地化为基础构建的,实际上有大约44种语言由精彩的社区成员支持和维护。
本文包含VeeValidate包含以下几点应用:
- 1、基本安装使用
- 2、本地化支持
- 3、自定义规则和错误消息
- 4、验证HTML5输入和自定义Vue组件
- 5、统一提交按钮处理
先看看页面效果:
如果要源码请老铁移步我的github里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("请输入完整推荐信息!")}}
注释:上代码创建一个提交按钮事件,监听是否正常填写选项,实现校验
一个完整的校验应用案例到这里已经讲解的差不多了,小伙伴们可以根据自己的实际情况应用在自己的项目中,
源码请老铁移步我的github里VeeValidate应用源码(厚脸皮索★star)
如果需要深入了解,可以移步到VeeValidate官网
VeeValidate在vue项目里表单校验应用案例相关推荐
- vue项目新闻消息向上滚动案例
vue项目新闻消息向上滚动案例 效果如下图所示: 代码组件如下: <template><div class="message-page"><div c ...
- activeform表单中的旧数据怎么显示_三分钟为你细数 Vue el-form 表单校验的坑点
背景 Vue 的 el-form 提供了表单校验功能,通过 :rules 属性设置校验规则,并通过 el-form-item 的 prop 属性绑定校验规则.通过封装,让前端校验更方便.具体使用过程中 ...
- 关于项目对表单校验的需求
校验框架的需求 支持js和css初始化(同等重要,至少保证js) 支持自定义校验扩展 内置丰富的校验 可通过js动态修改校验条件和校验规则 支持分步校验(即分组) 一个页面中同一个表单在不同的触发事件 ...
- Vue.js 表单校验插件
Vuerify 是一个简单轻量的数据校验插件.内置基础的校验规则和错误提示.可自定义规则,规则类型支持正则.函数或者字符串.校验规则可全局注册也可以组件内注册.插件会给 vm 添加 $vuerify ...
- VUE + Element-UI 表单校验input框数据已存在
基础校验方式实现 html代码 <el-form-item label="值名称:" style="width: 80%" prop="valu ...
- 解决: VUE 项目中表单提交中文乱码、接口请求参数中文乱码
前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家.点击跳转到教程. 1. 表单提交出现乱码: 接口请求乱码同于上图. 2. 解决: 在出现乱码的内容外面加函数:deco ...
- vue自定义表单校验
1.绑定规则 1.在form上绑定规则 :rules="formValidate" 实现规则 var jiaoyan=(rules, value,callback)=>{if ...
- vue+element表单校验
1.字母数字组合 export function numberSrting(rule, value, callback) { if (!value) { callback(); } else { le ...
- VUE项目(单页面)问题之:从详情页返回列表页时返回到上次滚动位置,并还原列表页所有点击、搜索等状态
一.问题 新增需求,点击浏览器返回按钮或者详情页的返回按钮,需要返回列表页,并保存之前所有的状态. 二.经过 刚开始,用 this.$router.push({name: 'detailsPage', ...
最新文章
- 关于数据中心Tier标准的理解误区
- Objective-C学习—UIWebView的使用
- java线程状态有哪几种,顺利拿到offer
- 阶乘之和计算_利用MULTINOMIAL函数计算参数和的阶乘与各参数阶乘乘积的比 值
- 光纤交换机的配置 光纤交换机的由来是什么
- wifiwan口速率什么意思_无线路由器怎么设置wan口速率
- doxygen 命令_doxygen使用
- HTML 元素和属性--备份
- cookie可存的最大限制_cookie、localStorage、sessionStorage、
- AutoCAD VBA创建椭圆和样条曲线
- ET99加密狗软件加密锁ET99开发工具下载
- Windows 10 打印机驱动安装(以惠普M136 MFP为例)
- 如何利用各大博客引流
- 对马的幽灵是关于人的
- 计算机中升序符号,电脑excel表格软件中的标点符号怎么快速替换
- gitlab-runner错误之:New runner. Has not connected yet(runner注册成功到了gitlab,但是前面的图标是灰色三角形)
- 开源项目之:SharpDevelop
- Redis(九)Redis的过期时间操作以及部分常用命令
- 天地孤影任我行(东邪西毒电影原声曲)铃声 天地孤影任我行(...
- 时间序列分析预测未来 Ⅰ
热门文章
- java venus_来认识一下venus-init——一个让你仅需一个命令开始Java开发的命令行工具...
- 垃圾自动分拣系统python代码_Robot recycling 垃圾分拣机器人
- PHP项目部署在tomcat,在Tomcat中部署Web项目的操作方法(必看篇)
- python 文件保存读取时不用with的问题
- 修改linq结果集_UTXO集优化
- @param注解_启用 parameters 编译选项简化 mybatis @Param 注解重复问题
- android内核编译 me525,摩托罗拉DEFY(ME525)刷Android 2.3.4变砖后的解决方法
- 数据可视化模块---Matplotlib
- 【合并区间】排序 + 双指针
- C++中基于范围的for循环