1. vee-validate 简介

veeValidate 是专用于 Vue.js 的验证库。它有很多开箱即用的验证规则，也支持自定义验证规则。它基于模板，所以它和 HTML5 的验证 API 比较类似，而且我们

也比较熟悉。我们可以验证 HTML5 input 输入框，以及我们自定义的 Vue 组件。

特点：

基于模板的验证
提供了许多开箱即用的验证规则
一流的本地化支持
可以验证 HTML5 input 输入框和自定义 Vue 组件
自定义规则和错误消息

2. 安装

npm install vee-validate --save

或者使用 CDN

<script src="https://unpkg.com/vee-validate"></script>

用npm 安装的时候要注意vue的版本和 vee-validate 版本的匹配，我们来栏官网的提示：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-impF8dD9-1650439580527)(D:\study\项目\前端\vue+elementui\VeeValidate.assets\image-20220420104436605.png)]

vue3–>安装 v4.x vue2–> 可以安装小于 v3.x。

npm install vee-validate@2--save

怎么查看vee-validate

npm view vee-validate versions --json

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-XtM7GrEO-1650439580529)(D:\study\项目\前端\vue+elementui\VeeValidate.assets\image-20220420101549747.png)]

3. 引用

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

4.参数介绍

import Vue from 'vue';
import VeeValidate from 'vee-validate';
const config = {aria: true,classNames: {},classes: false,delay: 0,dictionary: null,errorBagName: 'errors', // change if property conflictsevents: 'input|blur',fieldsBagName: 'fields',i18n: null, // vue-i18n 插件实例i18nRootKey: 'validations', // the nested key under which the validation messages will be locatedinject: true,locale: 'en',validity: false
};
Vue.use(VeeValidate, config);

参数介绍：

aria - boolean - true - 允许在 HTML inputs 输入框上设置 aria-invalid 和 aria-required 属性
classNames - object - 空 - 根据 input 输入框的状态应用的 class
classes - boolean - false - 对要验证的 HTML inputs 输入框应用自动类
delay - number - 0 - 所有 inputs 输入框默认的防抖时间(仅影响验证)
dictionary - object|null - null - 一个要与内部字典合并的字典
errorBagName - string - ‘errors’ - ErrorBag 对象的名称，会被注入到每个 Vue 实例的 data 里。用于避免与其他插件冲突。
events - string - ‘input’ - 将要被监听的、用来触发认证的、以 ‘|’ 分隔的默认事件名称列表。如果提供了空字符串，将禁用所有监听器。
fieldsBagName - string - ‘fields’ - 字段(标志)对象的名称，会被注入到每个 Vue 实例的 data 里。
fastExit - boolean - true - 对每个字段的验证，是否应在首次验证失败后停止，我们可以使用 continues 和 bails 修饰符，选择加入或退出任一设置
i18n - VueI18n|null - null - vue-i18n 实例，如果提供了，将使用 i18n 插件，集成到 vee-validate，并将使用该实例来生成错误消息，而不使用内置字典。
i18nRootKey - string - ‘validations’ - 每个语言环境的验证消息的 key 名
inject - boolean - true - 指定是否应为所有组件自动注入验证器实例
locale - string - ‘en’ - 验证消息的默认语言
validaty - boolean - false - 在本地 HTML inputs 输入框上，设置自定义有效性 Constraint Validation(约束验证)

delay 字段详解

我们可以指定一个延迟，对 input 事件进行去抖动，一个常见的场景是，我们可能希望等待用户停止键入，然后再验证字段，以限制验证触发频率。(不需要用户

每按下键盘一次，我们就触发验证，稍有个延迟)

我们可以全局配置，也可以在每个组件中设置（在要验证的字段上添加 data-vv-delay 属性来实现）：

     <el-form-item prop="username"><el-inputv-validate="'required|between:3,8'"data-vv-delay="1000"prefix-icon="el-icon-user"v-model="loginForm.username"placeholder="ID"name="username"autofocus/><span v-show="errors.has('username')" class="error-style">*  {{ errors.first('username') }} </span></el-form-item>

5.基本使用

在Vue中引用 vee-validate

怎么使用呢？

我们需要将 v-validate 指令添加到我们需要验证的 input 输入框上，一定要确保input输入框有一个name属性，用来生成错误信息。

v-validate 需要传入一个规则字符串，规则如下:

使用‘|’ 管道符分割的验证规则。例如

为了显示错误信息，我们简单的使用 errors.first 方法，来获取该字段的第一个错误。

<span> {{ errors.first('email')}} </span>

1.单个规则的设置

const single = ‘required’;

2.多个规则设置

constructormultiple = ‘required|numeric’

规则表达式，也可以是一个复杂的、可读性更好的规则对象：

const single = { required: true };
const multiple = {required: true,numeric: true,email: true,
};

规则参数：

1.逗号分隔的参数列表，适用于字符串格式

const rules = ‘included:1,2,3,4’;

2.一个包含参数值的数组(适用于对象格式)

const ruleObj = {included:[1,2,3,4]}

内置校验规则：

规则	含义
alpha	只包含英文字符
alpha_dash	可以包含英文、数字、下划线、破折号
alpha_num	可以包含英文和数字
alpha_spaces	可以包含英文和数字
between:{min},{max}	在min和max之间的数字
confirmed:{target}	必须和target一样
digits:{length}	长度为length的数字
dimensions:{width},{height}	符合宽高规定的图片
email	符合邮箱规则
excluded	排除，不包括
ext:[extensions]	后缀名
image	图片
integer	整型
is	必须是
is_not	不是
length	规定输入内容长度
max:{length}	规定输入内容的最大长度为length
min:{length}	规定输入内容的最小长度为length
max_value:{val}	规定输入最大数值为val的
min_value:{val}	规定输入最小数值为val的
mimes:[list]	文件类型
numeric	只允许数字
oneOf	其中之一

上面只是展示一部分规则，详情请参考：

内置校验的JS 的路径： node_modules/dist/vee-vadidate.js

例1：一个必填的email字段

<input v-validate="'required|email'" type="email" name="email">
<input v-validate="{ required: true, email: true }" type="email" name="email">

例2：只包含英文字符的username字段

<input v-validate="'alpha'" type="text" name="username">
<input v-validate="{ alpha: true }" type="text" name="username">

例3：校验长度的password字段

<input v-validate="'required|min:6'" type="password" name="password">
<input v-validate="{ required: true, min: 6 }" type="password" name="password">

注意:

字符串表达式两边有 “'”(单引号)。因为 Vue 指令会计算给定表达式的值，由于我们想要将它求值为一个字符串，所以需要用 “'”(单引号) 将它括起来，这意味着 v-

validate=“required” 将失败，因为 v-validate 将尝试在 Vue 实例上查找一个名为 ‘required’ 的 prop 或 method，而这很可能不存在，所以会失败。

<div class="column is-12"><label class="label" for="email">Email</label><p class="control"><input v-validate data-rules="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">{{ errors.first('email') }}</span></p>
</div>

关于errors

errors.has,errors.first,errors是组件内置的一个数据模型，用来存储和处理错误信息，可以调用以下方法：

errors.first(‘field’) - 显示字段field的第一个出错信息
collect(‘field’) - 获取关于当前field的所有错误信息(list)
errors.has(‘field’) - 判断fileds字段是否检验有误
erros.all() - 显示所有的出错信息
errors.collect(‘field’) - 显示字段field的所有出错信息
errors.any() - 判断是否有错误
errors.clear() - 清除错误
errors.count() - 错误数量
errors.remove(String field) - 清除指定field的所有错误

6. 数据的校验

this.$validator.validate(‘field’); 校验单个字段
this.$validator.validateAll(); 表单整体校验
验证代码：
this.$validator.validateAll().then(function(result) {if (result) {//成功操作} else {// 失败操作}
}

常用于校验成功后清除错误的提示信息：this.errors.clear();

7.自定义校验规则

1.直接定义

const validator = (value, args) => {// Return a Boolean or a Promise.
}
//最基本的形式，只返回布尔值或者Promise，带默认的错误提示

2.对象形式

const validator = {getMessage(field, args) { // 添加到默认的英文错误消息里面// Returns a message.},validate(value, args) {// Returns a Boolean or a Promise.}
};

3.添加到指定语言的错误消息

const validator = {messages: {en: (field, args) => {// 英文错误提示},cn: (field, args) => {// 中文错误提示}},validate(value, args) {// Returns a Boolean or a Promise.}
};

创建了规则以后，用extend 方法添加到 Validator里面

import { Validator } from 'vee-validate';
const isMobile = {messages: {en:(field, args) => field + '必须是11位手机号码',},validate: (value, args) => {return value.length == 11 && /^((13|14|15|17|18)[0-9]{1}\d{8})$/.test(value)}
}
Validator.extend('mobile', isMobile);//或者直接Validator.extend('mobile', {messages: {en:field => field + '必须是11位手机号码',},validate: value => {return value.length == 11 && /^((13|14|15|17|18)[0-9]{1}\d{8})$/.test(value)}
});
然后接可以直接把mobile当成内置规则使用了：<input v-validate data-rules="required|mobile" :class="{'input': true, 'is-danger': errors.has('mobile') }" name="mobile" type="text" placeholder="Mobile">
<span v-show="errors.has('mobile')" class="help is-danger">{{ errors.first('mobile') }}</span>

8. 实践

首先，我们先在src下创建 validate文件夹，在文件夹下创建 validate.js 和 validatorRulke.js

1. validate.js

//引入Vue
import Vue from 'vue';
//引入vee-valadiate插件
import VeeValidate,{ Validator } from 'vee-validate'
//Vue.use(VeeValidate);
Validator.locale = 'zh_CN'
// //引入进来的是vee-valadiate提供信息提示【中文的】
import zh_CN from 'vee-validate/dist/locale/zh_CN'//  // 引入英文文件
import en from 'vee-validate/dist/locale/en'import {attributesCh, attributesEn} from './validatorRule'const config = {errorBagName: 'errors',fieldsBagName: 'fieldBags',// delay: 10000,locale: 'en',strict: true,enableAutoClasses: true,events: 'input|blur',inject: true
}
//使用插件
Vue.use(VeeValidate,config)// //添加中文检验规则设置
Validator.localize('zh_CN', {messages: {...zh_CN.messages, //提示语// required: (field) => field+"不能为空！",},attributes: attributesCh
})//给VeeValidate插件提供【英文提示功能】
Validator.localize('en', {messages: {...en.messages, //提示语// required: (field) => field+"不能为空！",
},attributes: attributesEn
})//对象形式，
export function setMessage(validName, errMsgZh, errMsgEn, validate) {Validator.locale = 'en'Validator.extend(validName, {getMessage: (field, [args]) => {return errMsgEn},validate: validate})Validator.locale = 'zh_CN'Validator.extend(validName, {getMessage: (field, [args]) => {return errMsgZh},validate: validate})}

2.validatorRule.js

import {setMessage} from './validate'setMessage('password', '密码必须是11到8位', 'password error', (value, [args]) => {const reg = /^\S{6,18}$/return reg.test(value)
})setMessage('username', '姓名只能包括中文字或英文字母', 'username no yes', (value, [args]) => {const reg = /^([\u4e00-\u9fa5\s]|[a-zA-Z])*$/return reg.test(value)
})// 别名中文
export const attributesCh = {username: '用户名',password: '密码'
}
// 别名英文
export const attributesEn = {username: 'username',password: 'password',
}

3.在main.js 中引入validate.js

//加载校验器
import '@/validate/validate'

4.form表单中应用

      <el-form-item prop="username"><el-inputv-validate="'required|max:20'"data-cc-as = "账号"prefix-icon="el-icon-user"v-model="loginForm.username"placeholder="ID"name="username"autofocus/><span v-show="errors.has('username')" class="error-style">*  {{ errors.first('username') }} </span></el-form-item>
<el-form-item prop="password"><el-inputv-validate="'required|min:5|max:10'"v-model="loginForm.password"prefix-icon="el-icon-unlock"placeholder="请输入密码"name="password"/><span v-show="errors.has('password')" class="error-style">*  {{ errors.first('password') }} </span></el-form-item>

Vue 插件 vee-validate校验插件详解大全相关推荐

jenkins插件调用job_Jenkins迁移job插件Job Import Plugin流程详解
Jenkins迁移job插件Job Import Plugin流程详解由于又开了新机器所以又要重新布置Jenkins从老项目拷贝过来,发现Job Import Plugin 这个插件更新了,和以前的 ...
IDEA安装阿里巴巴编码规范插件的两种方式详解(在线安装和离线安装)
这篇文章主要介绍了IDEA安装阿里巴巴编码规范插件的两种方式详解(在线安装和离线安装),本文通过截图给大家展示的非常详细,需要的朋友可以参考下目录 1.在线安装: 2.离线安装: IDEA安装阿里巴 ...
plupload怎么设置属性_jquery上传插件：plupload事件参数说明详解
jquery上传插件:plupload事件参数说明详解 2018-12-01 本篇重点说明一下plupload的事件参数.并用2个例子说明一下绑定事件. 1.plupload参数说明: Browse_ ...
jQuery Validate验证框架详解
2019独角兽企业重金招聘Python工程师标准>>> 一.导入js库 <script type="text/javascript" src="& ...
zend framework php编码规范,Zend Framework常用校验器详解
本文实例讲述了Zend Framework常用校验器.分享给大家供大家参考,具体如下: Date日期校验器代码:<?php require_once 'Zend/Validate/Date.p ...
atitit.jQuery Validate验证框架详解与ati Validate 设计新特性
atitit.jQuery Validate验证框架详解与ati Validate 设计新特性 1. AtiValidate的目标1 2. 默的认校验规则1 2.1. 使用方式 1.metadata用 ...
Android签名与校验过程详解
原文:https://blog.csdn.net/gulinxieying/article/details/78677487 目录一.签名与校验原理概要 2 1.数字签名简介 2 2. ...
微信h5登录php,vue实现微信授权登录步骤详解
这次给大家带来vue实现微信授权登录步骤详解,vue实现微信授权登录的注意事项有哪些,下面就是实战案例,一起来看一下. 背景 vue前后端分离开发微信授权场景 app将商品分享到微信朋友圈或者分享给 ...
【Vue路由（router）进一步详解】
Vue路由(router)进一步详解 query属性具体实例代码如下: params属性具体实例代码如下: props属性 replace属性编程式路由导航路由缓存具体代码: 总结本篇文章 ...
数据列表多选 html,Vue多选列表组件深入详解
这篇文章主要介绍了Vue多选列表组件深入详解,这个是vue的基本组件,有需要的同学可以研究下多选列表 (Multi-Select) 是一种将所有选项列出,并允许用户利用 Ctrl/Shift 键进行 ...

Vue 插件 vee-validate校验插件详解大全