vue.js表单验证插件(vee-validate)的使用教程详解


Posted in Javascript onMay 23, 2019

综述

名称:vee-validate

用途:简单的 Vue.js 表单验证插件

官网:地址

github:地址

特别提示

配合laravel使用特别好使 因为验证规则和laravel后端的验证规则一样

插件既可以应用于SPA也可以应用于多页面,通用性强

vue.js表单验证插件(vee-validate)的使用教程详解

安装

单页安装

npm install vee-validate --save

浏览器安装

<!-- unpkg -->
 <script src="https://unpkg.com/vee-validate@2.0.0-rc.7"></script>

引入项目

单页引入

import Vue from 'vue';
import VeeValidate from 'vee-validate';
Vue.use(VeeValidate);

浏览器引入

<script src="path/to/vue.js"></script>
 <script src="https://unpkg.com/vee-validate@2.0.0-rc.7"></script>
 <script>
 Vue.use(VeeValidate); // good to go.
 </script>

基础使用

<div class="column is-12">
 <label class="label" for="email">Email</label>
 <p :class="{ 'control': true }">
 <input v-validate="'required|email'" :class="{'input': true, 'is-danger': errors.has('email') }" name="email" type="text" placeholder="Email">
 <span v-show="errors.has('email')" class="help is-danger"></span>
 </p>
</div>

代码解析

v-validate=”‘required email'”

v-validate 是由该插件提供的指令 作用于html上

“‘required email'” 字段验证的规则,注意双引号之内必须有单引号,多个规则之间用 连接

errors.first(‘email') email字段验证不通过时显示相关联的提示信息

验证规则

地址

进一步学习

本地化

使用本地化功能可以让错误提示换成中文

单页中使用

浏览器中使用

var dict = {
 zh_CN: {
 messages: {
 required: function(field){
 return '请输入' + field ;
 },
 confirmed: function(field) {
 return '两次输入的密码不一致';
 }
 },
 attributes: {
 OldPassword: '旧密码',
 NewPassword: '新密码',
 ConfirmNewPassword: '确认密码',
 }
 }
};
VeeValidate.Validator.localize('zh_CN', dict.zh_CN);
Vue.use(VeeValidate);
var app = new Vue({
// 省略
});

代码解析

VeeValidate(浏览器引入js后建立了一个全局对象)

dict 翻译的内容,其中attributes对象表示字段,messages对象表示提示信息

本地化进一步参考

常用方法

出错渲染

字段验证不通过时渲染提示信息时使用

errors.first(‘field') 显示字段field的第一个出错信息
errors.collect(‘field') 显示字段field的所有出错信息
errors.has(‘field') 判断fileds字段是否检验有误
erros.all() 显示所有的出错信息
errors.any() 判断是否有错误

手动检验

常用于数据提交(写在vue的方法内部)

this.$validator.validate(‘field'); 校验单个字段
this.$validator.validateAll(); 表单整体校验

代码片段

this.$validator.validateAll().then(function(result) {
  if (result) {
  //成功操作
  } else {
  // 失败操作
  }
 })

检验信息清除

常用于校验成功后清除错误的提示信息

this.errors.clear();

API进一步学习

总结

以上所述是小编给大家介绍的vue.js表单验证插件(vee-validate)的使用教程详解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JS控件autocomplete 0.11演示及下载 1月5日已更新
Jan 09 Javascript
国外大牛IE版本检测!现在IE都到9了,IE检测代码
Jan 04 Javascript
JavaScript中的prototype和constructor简明总结
Apr 05 Javascript
js实现的页面矩阵图形变换特效
Jan 26 Javascript
JavaScript暂停和继续定时器的实现方法
Jul 18 Javascript
jQuery实现底部浮动窗口效果
Sep 07 Javascript
浅谈javascript:两种注释,声明变量,定义函数
Sep 29 Javascript
概述javascript在Google IE中的调试技巧
Nov 24 Javascript
微信JS SDK接入的几点注意事项(必看篇)
Jun 23 Javascript
jQuery开源组件BootstrapValidator使用详解
Jun 29 jQuery
Iphone手机、安卓手机浏览器控制默认缩放大小的方法总结(附代码)
Aug 18 Javascript
vue实现滑动到底部加载更多效果
Oct 27 Javascript
使用vue自定义指令开发表单验证插件validate.js
May 23 #Javascript
微信小程序开发实现消息推送
Nov 18 #Javascript
jQuery操作attr、prop、val()/text()/html()、class属性
May 23 #jQuery
js打开word文档预览操作示例【不是下载】
May 23 #Javascript
仿iPhone通讯录制作小程序自定义选择组件的实现
May 23 #Javascript
判断js数据类型的函数实例详解
May 23 #Javascript
JS定义函数的几种常用方法小结
May 23 #Javascript
You might like
PHP语法速查表
2007/01/02 PHP
thinkphp微信开之安全模式消息加密解密不成功的解决办法
2015/12/02 PHP
PHP实现断点续传乱序合并文件的方法
2018/09/06 PHP
PHP如何根据文件头检测文件类型实例代码
2018/10/14 PHP
javascript 表单规则集合对象
2009/07/21 Javascript
jQuery获取css z-index在各种浏览器中的返回值
2010/09/15 Javascript
js获取IP和PcName(IE)在vs中可用
2013/08/02 Javascript
JavaScript人脸识别技术及脸部识别JavaScript类库Tracking.js
2015/09/14 Javascript
JavaScript中Textarea滚动条不能拖动的解决方法
2015/12/15 Javascript
jquery删除数组中重复元素
2016/12/05 Javascript
MUI实现上拉加载和下拉刷新效果
2017/06/30 Javascript
Angular浏览器插件Batarang介绍及使用
2018/02/07 Javascript
JavaScript实现世界各地时间显示
2020/09/07 Javascript
python妙用之编码的转换详解
2017/04/21 Python
python中import reload __import__的区别详解
2017/10/16 Python
详解K-means算法在Python中的实现
2017/12/05 Python
详解Python中的动态属性和特性
2018/04/07 Python
python写入并获取剪切板内容的实例
2018/05/31 Python
python opencv对图像进行旋转且不裁剪图片的实现方法
2019/07/09 Python
基于python实现自动化办公学习笔记(CSV、word、Excel、PPT)
2019/08/06 Python
在pycharm中为项目导入anacodna环境的操作方法
2020/02/12 Python
flask项目集成swagger的方法
2020/12/09 Python
蹦床仓库:Trampoline Warehouse
2018/12/06 全球购物
迪卡侬波兰体育用品商店:Decathlon波兰
2020/03/31 全球购物
什么是URL
2015/12/13 面试题
学校教师读书活动总结
2014/07/08 职场文书
环保项目建议书
2014/08/26 职场文书
2014年办公室个人工作总结
2014/11/12 职场文书
大学团日活动总结书
2015/05/11 职场文书
2015年学校图书室工作总结
2015/05/19 职场文书
党支部综合考察意见
2015/06/01 职场文书
小学教师教学随笔
2015/08/14 职场文书
毕业生的自我鉴定表范文
2019/05/16 职场文书
MySQL中连接查询和子查询的问题
2021/09/04 MySQL
nginx刷新页面出现404解决方案(亲测有效)
2022/03/18 Servers
LeetCode189轮转数组python示例
2022/08/05 Python