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和firefox中img对象区别的困惑
Dec 27 Javascript
基于Jquery的开发个代阴影的对话框效果代码
Jul 28 Javascript
IE6下拉框图层问题探讨及解决
Jan 03 Javascript
javascript数据结构之二叉搜索树实现方法
Nov 25 Javascript
jquery 无限极下拉菜单的简单实例(精简浓缩版)
May 31 Javascript
javascript中使用未定义变量或值的情况分析
Jul 19 Javascript
基于JS+Canves实现点击按钮水波纹效果
Sep 15 Javascript
JS中作用域和变量提升(hoisting)的深入理解
Oct 31 Javascript
在原生不支持的旧环境中添加兼容的Object.keys实现方法
Sep 11 Javascript
浅谈Node异步编程的机制
Oct 18 Javascript
在Angular中实现一个级联效果的下拉框的示例代码
May 20 Javascript
Vue 封装防刷新考试倒计时组件的实现
Jun 05 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
第四节 构造函数和析构函数 [4]
2006/10/09 PHP
ThinkPHP学习笔记(一)ThinkPHP部署
2014/06/22 PHP
PHP代码实现表单数据验证类
2015/07/28 PHP
php仿微信红包分配算法的实现方法
2016/05/13 PHP
详解使用php调用微信接口上传永久素材
2017/04/11 PHP
PHP实现通过二维数组键值获取一维键名操作示例
2019/10/11 PHP
javascript 检测浏览器类型和版本的代码
2009/09/15 Javascript
jquery分页插件AmSetPager(自写)
2013/04/15 Javascript
js或jquery实现页面打印可局部打印
2014/03/27 Javascript
js动态创建标签示例代码
2014/06/09 Javascript
javascript使用正则控制input输入框允许输入的值方法大全
2014/06/19 Javascript
jquery实现保存已选用户
2014/07/21 Javascript
EasyUI中combobox默认值注意事项
2015/03/01 Javascript
AngularJS的表单使用详解
2015/06/17 Javascript
Bootstrap字体图标无法正常显示的解决方法
2016/10/08 Javascript
简单实现jQuery级联菜单
2017/01/09 Javascript
jquery dataTable 获取某行数据
2017/05/05 jQuery
尝试自己动手用react来写一个分页组件(小结)
2018/02/09 Javascript
jQuery实现监听下拉框选中内容发生改变操作示例
2018/07/13 jQuery
vue webpack开发访问后台接口全局配置的方法
2018/09/18 Javascript
小程序实现新用户判断并跳转激活的方法
2019/05/20 Javascript
原生JS使用Canvas实现拖拽式绘图功能
2019/06/05 Javascript
从Node.js事件触发器到Vue自定义事件的深入讲解
2020/06/26 Javascript
js+canvas实现五子棋小游戏
2020/08/02 Javascript
微信小程序实现打卡签到页面
2020/09/21 Javascript
介绍Python中的__future__模块
2015/04/27 Python
Jupyter notebook远程访问服务器的方法
2018/05/24 Python
python 获取键盘输入,同时有超时的功能示例
2018/11/13 Python
使用tensorflow实现矩阵分解方式
2020/02/07 Python
Idea安装python显示无SDK问题解决方案
2020/08/12 Python
总经理司机岗位职责
2014/02/06 职场文书
工商管理本科生求职信
2014/07/13 职场文书
公司更名通知函
2015/04/24 职场文书
我的中国梦主题班会
2015/08/14 职场文书
关于食品安全的演讲稿范文(三篇)
2019/10/21 职场文书
MySQL CHAR和VARCHAR该如何选择
2021/05/31 MySQL