Vee-Validate的使用方法详解

引入：

npm install vee-validate --save

vue代码：

import VeeValidate from 'vee-validate';
import zh_CN from 'vee-validate/dist/locale/zh_CN'; //引入中文包，提示信息可以以中文形式显示
import { Validator } from 'vee-validate';

Validator.addLocale(zh_CN); // 设置提示信息中文方式显示

const config = {
 errorBagName: 'errors',
 fieldsBagName: 'fields',
 delay: 100,
 locale: 'zh_CN',
 strict: true,
 enableAutoClasses: true,
 events: 'blur',
 inject: true
};

// 自定义提示信息
const dictionary = {
 zh_CN: {
  messages: {
   ip: () => 'ip格式不正确😯 >.<'
  }
 }
};
Validator.updateDictionary(dictionary);

// 自定义规则
Validator.extend('qq', {
 messages: {
  zh_CN:field => 'qq号码输入不正确'
 },
 validate: value => {
  return /^[1-9][0-9]{4,14}$/.test(value);
 }
});
Vue.use(VeeValidate, config); //一般插件都要use一下

使用

<label><span>ip：</span><input v-validate="'required|email'" name="email" type="text" v-model="ip"/></label>
<span v-show="errors.first('ip')">{{ errors.first('ip') }}</span>

注意 ： name一定要写，否则不会进行验证

config配置信息

插件的一些功能可以自定义，需要编写config，然后Vue.use(VeeValidate, config)来使用
一下为配置信息的意思（可能不全面）

errorBagName： 'erroers'

所有的错误信息都是放在这个里面的，如果名称和页面上的变量名字冲突，需要修改成其他的，当是errors.fist的时候，error就是字符串，当使用error.all()/error.collect()的时候就是数组

fieldsBagName: 'fields'

字段的名称（标志）的对象，将在每个Vue的实例数据注入。如果在页面上使用了ip的验证，那么，可以通过如下获取一个对象:

this.fileds.ip
 >> 获取到的对象：
{
  dirty :true
  invalid:false
  pending:false
  pristine:false
  required:true
  touched:true
  untouched:false
  valid:true
  validated:true
}

delay : 100 表示获取输入信息的时间

locale： ‘zh_CN' 验证消息的默认语言。

strict: true 表示没有设置规则的表单不进行验证

classes (不懂)

events: 'blur|input' 默认是input|blur 就是在用户输入和表单失去焦点的时候都进行验证，blue表示失去焦点的时候进行验证

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 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

  • 详解vee-validate的使用个人小结

    学习vee-validate,首先可以去阅读官方文档,更为详细可以阅读官网中的规则.英文文档可能会有不理解的地方,推荐大家看这篇博客 下面来简单总结一下我的使用: 一.安装 npm install vee-validate@next --save 后面加@next是为了安装vue2.0的版本 二.引入 我使用的是vue-cli脚手架工具,需要在main.js中 import VeeValidate from 'vee-validate' Vue.use(VeeValidate); 三.简单的使用

  • Struts中使用validate()输入校验方法详解

    Struts中使用validate()输入校验方法详解

    1.在ActionSupport中有一个validate()方法,这个方法是验证方法,它会在execute()方法执行之前执行,所以能够起到很好的验证的作用. @Override //重写Action中的validate()方法 public void validate() { if(null==this.username||this.username.length()<4||this.username.length()>6){ this.addActionError("userna

  • PHP中filter函数校验数据的方法详解

    介绍PHP中filter函数校验数据的方法详解,PHP过滤器包含两种类型:Validation用来验证验证项是否合法 .Sanitization用来格式化被验证的项目,因此它可能会修改验证项的值,将不合法的字符删除. input_filters_list() 用来列出当前系统所支持的所有过滤器. 复制代码 代码如下: <?php foreach(filter_list() as $id => $filter) {     echo $filter.' '.filter_id($filter).

  • Java实现大文件的分割与合并的方法详解

    Java实现大文件的分割与合并的方法详解

    目录 一.题目描述-合并多个文本文件 1.题目 2.解题思路 3.代码详解 二.题目描述-对大文件进行分割处理 1.题目 2.解题思路 3.代码详解 三.题目描述-分割后又再次合并 1.题目 2.解题思路 3.代码详解 4.多学一个知识点 一.题目描述-合并多个文本文件 1.题目 题目:做一个合并多个文本文件的工具. 2.解题思路 创建一个类:TextFileConcatenation 使用TextFileConcatenation继承JFrame构建窗体 读取文本文件时,用的是Buffered

  • node后端与Vue前端跨域处理方法详解

    目录 node.js后端跨域解决方案 前端vue项目 前端axios请求 node.js后端跨域解决方案 先看后端的入口文件: app.js const express = require('express'); const bodyParser = require('body-parser'); const cors = require('cors') const expressJWT = require('express-jwt') const app = express(); const

  • Java利用StampedLock实现读写锁的方法详解

    目录 概述 StampedLock介绍 演示例子 性能对比 总结 概述 想到读写锁,大家第一时间想到的可能是ReentrantReadWriteLock.实际上,在jdk8以后,java提供了一个性能更优越的读写锁并发类StampedLock,该类的设计初衷是作为一个内部工具类,用于辅助开发其它线程安全组件,用得好,该类可以提升系统性能,用不好,容易产生死锁和其它莫名其妙的问题.本文主要和大家一起学习下StampedLock的功能和使用. StampedLock介绍 StampedLock的状态

  • Asp.net MVC scheduler的实现方法详解

    Asp.net MVC scheduler的实现方法详解 本例使用了fullcalendar js : https://fullcalendar.io/ 1. view : @{ ViewBag.Title = "Index"; Layout = "~/Views/Shared/_Layout.cshtml"; } @section PageContent{ <style> .modal-backdrop { z-index: 9; } </sty

  • shell脚本无密码登录 expect的使用方法详解

    shell脚本无密码登录 expect的使用方法详解 今天需要做一个定时任务脚本将最新的数据包文件传到远程的服务器上,虽然有密钥但也是要求输入密码的那种,所以只能另想办法实现让脚本自动输入密码了. 从网上查到使用expect可以,简单研究了一下,效果不错. 因为我的操作系统没有安装expect,所以直接"yum -y install expect",你可以根据你的操作系统安装expect,或者源码编译. 安装好之后就可以使用了,这里有几种方法: 一.单独写一个脚本 如 auto_scp

  • MySQL数据库设计之利用Python操作Schema方法详解

    弓在箭要射出之前,低声对箭说道,"你的自由是我的".Schema如箭,弓似Python,选择Python,是Schema最大的自由.而自由应是一个能使自己变得更好的机会. Schema是什么? 不管我们做什么应用,只要和用户输入打交道,就有一个原则--永远不要相信用户的输入数据.意味着我们要对用户输入进行严格的验证,web开发时一般输入数据都以JSON形式发送到后端API,API要对输入数据做验证.一般我都是加很多判断,各种if,导致代码很丑陋,能不能有一种方式比较优雅的验证用户数据呢

  • AngularJS的$location使用方法详解

    AngularJS的$location使用方法详解 一.配置config app.config([ '$locationProvider', function($locationProvider) { $locationProvider.html5Mode({ //设置为html5Mode(模式),当为false时为Hashbang模式 enabled : true, //是否需要加入base标签,这里设置为false,设置为true时,需在html的head配置<base href="&

  • 优化Tomcat配置（内存、并发、缓存等方面）方法详解

    Tomcat有很多方面,我从内存.并发.缓存等方面介绍优化方法. 一.Tomcat内存优化 Tomcat内存优化主要是对 tomcat 启动参数优化,我们可以在 tomcat 的启动脚本 catalina.sh 中设置 java_OPTS 参数. JAVA_OPTS参数说明 server 启用jdk 的 server 版: -Xms java虚拟机初始化时的最小内存: -Xmx java虚拟机可使用的最大内存: -XX: PermSize 内存永久保留区域 -XX:MaxPermSize 内存最

随机推荐