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

2024-04-20 22:59:48

综述

名称：vee-validate

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

官网：地址

github:地址

特别提示

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

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

安装

单页安装

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)的使用教程详解，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

vue中使用element-ui进行表单验证的实例代码

element-ui 中验证一.简单逻辑验证(直接使用rules) 实现思路 •html中给el-form增加 :rules="rules" •html中在el-form-item 中增加属性 prop="名称" •js中直接在data中定义rules:{} •html部分 <el-form ref="form" :rules="rules" :model="form" label-width=&q
vue+element-ui集成随机验证码+用户名+密码的form表单验证功能

在登入页面,我们往往需要通过输入验证码才能进行登入,那我们下面就详讲一下在vue项目中如何配合element-ui实现这个功能第一步:自定义一个生产随机验证码的组件,其本质是使用canvas绘制,详细代码如下: <template> <div class="s-canvas"> <canvas id="s-canvas" :width="contentWidth" :height="contentHeig
Vue中使用vee-validate表单验证的方法

Vue项目遇到要表单验证了吧,对我来说表单验证是个很纠(dan)结(teng)的内容,各种判断凌乱到飞起.往常使用jquery的validate插件做表单验证方便吧,你也可以在Vue里引入jquery的validate插件(如何引入jquery在我上一篇博文有介绍,点击查看).但是我们是做vue项目也,不到实在解决不了还是建议不要引入,因为Vue自己就有表单验证的插件,那就是vee-validate. 我在这并不是详细讲解vee-validate的使用功能,只是快速了解如何在项目里使用vee-v
Vue ElementUI之Form表单验证遇到的问题

首先说一下我在form表单里面遇见的坑: 1.例如我要给后台传的不是对象,而是一个数组,怎么写验证? 2.比如我有四个弹出框,都要做验证,这个时候就要注意了,每一个弹出框的ref都不能给的一样,并且一定要与当前弹框的确定或者保存按钮一一对应,例如:第一个弹框的ref='number',按钮的click比如为xxxxxx('number'),第二个弹出框的ref='number2',对应的按钮>>xxxxxx('number2').如果ref用的都一样,就会出现,点击下一步我没有去做验证,我再
详解vue表单验证组件 v-verify-plugin

verify github:https://github.com/liuyinglong/verify npm:https://www.npmjs.com/package/vue-verify-plugin install npm install vue-verify-plugin use html <div> <div> <input type="text" placeholder="姓名" v-verify.grow1="
element 结合vue 在表单验证时有值却提示错误的解决办法

绑定的值与规则指定的值一定要相同------- 第一步: <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm"> 加上rules ref 第二部: <el-form-item label="活动名称" prop="na
Vue2.0表单校验组件vee-validate的使用详解

vee-validate使用教程本文适合有一定Vue2.0基础的同学参考,根据项目的实际情况来使用,关于Vue的使用不做多余解释.本人也是一边学习一边使用,如果错误之处敬请批评指出* 一.安装 npm install vee-validate@next --save 注意:@next,不然是Vue1.0版本 bower install vee-validate#2.0.0-beta.13 --save 二.引用 import Vue from 'vue'; import VeeValidate
vue.js表单验证插件(vee-validate)的使用教程详解

综述名称:vee-validate 用途:简单的 Vue.js 表单验证插件官网:地址 github:地址特别提示配合laravel使用特别好使因为验证规则和laravel后端的验证规则一样插件既可以应用于SPA也可以应用于多页面,通用性强安装单页安装 npm install vee-validate --save 浏览器安装  <script src="https://unpkg.com/vee-validate@2.0.0-rc.
快速学习jQuery插件 jquery.validate.js表单验证插件使用方法

最常使用JavaScript的场合就是表单的验证,而jQuery作为一个优秀的JavaScript库,也提供了一个优秀的表单验证插件----Validation.Validation是历史最悠久的jQuery插件之一,经过了全球范围内不同项目的验证,并得到了许多Web开发者的好评.作为一个标准的验证方法库,Validation拥有如下特点: 1.内置验证规则: 拥有必填.数字.Email.URL和信用卡号码等19类内置验证规则 2.自定义验证规则: 可以很方便地自定义验证规则 3.简单强大的验证
jQuery.validate.js表单验证插件的使用代码详解

Validate Validate是基于jQuery的一款轻量级验证插件,内置丰富的验证规则,还有灵活的自定义规则接口,HTML.CSS与JS之间的低耦合能让您自由布局和丰富样式,支持input,select,textarea的验证. 效果: 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="vi
JS表单验证插件之数据与逻辑分离操作实例分析【策略模式】

本文实例讲述了JS表单验证插件之数据与逻辑分离操作.分享给大家供大家参考,具体如下: 之前已经写过一个表单验证插件了,为什么还会重复造轮子呢?第一个问题是代码结构比较乱,虽然通过原型继承的写法将处理分层,但业务逻辑和数据结构混杂在一起,导致第二个问题--可扩展性和灵活性差. 认真分析表单验证的过程,可以分为两步:怎么验证和如何验证.怎么验证是数据层面的问题,如何验证是业务逻辑层面的问题. 点击:这里查看源码策略模式将对象和规则区分如何让算法(数据层)和对象(逻辑层)分开来,使得算法可以独立
自己编写的支持Ajax验证的JS表单验证插件

自己编写了一个表单验证插件,支持ajax验证,使用起来很简单. 每个需要验证的表单元素下面有一个span标签,这个标签的class有一个valid表示需要验证,如果有nullable则表示可为空:rule表示验证规则,msg表示错误提示信息:to表示要验证的元素的name值,如果元素是单个的,to可以不写.该插件会遍历每个有valid的span标签,找出它前面需要验证的元素,根据rule验证,如果验证不通过,则显示边框为红色,鼠标放在元素上时显示错误信息. 验证时机:1.点击提交按钮时显式调用验
bootstrapValidator.min.js表单验证插件

本文实例为大家分享了bootstrapValidator.min.js表单验证的具体代码,供大家参考,具体内容如下注意:下载后全选复制并粘贴到新建js文件名为bootstrapValidator.min.js下即可. 测试代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <
Vue.js 表单校验插件

Vuerify 是一个简单轻量的数据校验插件.内置基础的校验规则和错误提示.可自定义规则,规则类型支持正则.函数或者字符串.校验规则可全局注册也可以组件内注册.插件会给 vm 添加 $vuerify 对象,同时 watch 数据并校验合法性,如果有错误会存入 vm.$vuerify.$errors. 安装 npm i vuerify -S 使用安装插件 import Vue from 'vue' import Vuerify from 'vuerify' Vue.use(Vuerify, /*
Vue表单验证插件Vue Validator使用方法详解

Vue-validator 是Vue的表单验证插件,供大家参考,具体内容如下 Vue版本: 1.0.24 Vue-validator版本: 2.1.3 基本使用 <div id="app"> <validator name="validation"> <form novalidate> <div class="username-field"> <label for="username
JS实现的通用表单验证插件完整实例

本文实例讲述了JS实现的通用表单验证插件.分享给大家供大家参考.具体如下: 这里演示一个通用的JS表单验证插件代码.使用方法:第一步:需设定表单项数据类型,第二步:实例表单验证,验证错误提示说明(程序有自带相关错误提示,可自定义每项验证错误提示时文本,只需添加msg). 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-normal-table-check-plug-codes/ 具体代码如下: <!DOCTYPE html PUBLIC &qu
jQuery.Validate表单验证插件的使用示例详解

jQuery Validate 插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求. 请在这里查看示例 validate示例示例包含验证错误时,显示红色错误提示自定义验证规则引入中文错误提示重置表单需要执行2句话源码示例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <

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

相关推荐

随机推荐