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 相关文章推荐
IE、FF浏览器下修改标签透明度
Jan 28 Javascript
jquery实现红色竖向多级向右展开的导航菜单效果
Aug 31 Javascript
JQueryEasyUI之DataGrid数据显示
Nov 23 Javascript
JS插件plupload.js实现多图上传并显示进度条
Nov 29 Javascript
谈谈第三方App接入微信登录 解读
Dec 27 Javascript
jQuery实现可拖拽3D万花筒旋转特效
Jan 03 Javascript
微信小程序 template模板详解及实例代码
Mar 09 Javascript
vue 父组件调用子组件方法及事件
Mar 29 Javascript
jquery.param()实现数组或对象的序列化方法
Oct 08 jQuery
JS中注入eval, Function等系统函数截获动态代码
Apr 03 Javascript
原生js实现的移动端可拖动进度条插件功能详解
Aug 15 Javascript
js函数和this用法实例分析
Mar 13 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
一个简单计数器的源代码
2006/10/09 PHP
PHP项目开发中最常用的自定义函数整理
2010/12/02 PHP
PHP 利用Mail_MimeDecode类提取邮件信息示例
2014/01/26 PHP
php自定义函数截取汉字长度
2014/05/15 PHP
PHP copy函数使用案例代码解析
2020/09/01 PHP
在网页中屏蔽快捷键
2006/09/06 Javascript
IE8对JS通过属性和数组遍历解析不一样的地方探讨
2013/05/06 Javascript
轻松创建nodejs服务器(6):作出响应
2014/12/18 NodeJs
JavaScript 事件入门知识
2015/04/13 Javascript
JavaScript正则表达式中的ignoreCase属性使用详解
2015/06/16 Javascript
Vuejs第八篇之Vuejs组件的定义实例解析
2016/09/05 Javascript
微信小程序 支付后台java实现实例
2017/05/09 Javascript
AngularJS全局警告框实现方法示例
2017/05/18 Javascript
使用typescript构建Vue应用的实现
2019/08/26 Javascript
vue中实现回车键登录功能
2020/02/19 Javascript
javascript使用正则表达式实现注册登入校验
2020/09/23 Javascript
[47:38]Optic vs VGJ.S 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
低版本中Python除法运算小技巧
2015/04/05 Python
Python实现查找系统盘中需要找的字符
2015/07/14 Python
Python 基础知识之字符串处理
2017/01/06 Python
mysql 之通过配置文件链接数据库
2017/08/12 Python
python特性语法之遍历、公共方法、引用
2018/08/08 Python
Python Pillow Image Invert
2019/01/22 Python
pytorch 在网络中添加可训练参数,修改预训练权重文件的方法
2019/08/17 Python
Python列表切片常用操作实例解析
2019/12/16 Python
css3 transform及原生js实现鼠标拖动3D立方体旋转
2016/06/20 HTML / CSS
Java里面StringBuilder和StringBuffer有什么区别
2016/06/06 面试题
安全技术说明书
2014/05/09 职场文书
银行求职自荐信
2014/06/30 职场文书
2015年父亲节活动总结
2015/02/12 职场文书
英语专业毕业论文答辩开场白
2015/05/27 职场文书
初中历史教学反思
2016/02/19 职场文书
导游词之舟山普陀山
2019/11/06 职场文书
Python基础之函数嵌套知识总结
2021/05/23 Python
Python通过loop.run_in_executor执行同步代码 同步变为异步
2022/04/11 Python
以MySQL5.7为例了解一下执行计划
2022/04/13 MySQL