Vue 插件 vee-validate校验插件详解大全
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} | 符合宽高规定的图片 |
符合邮箱规则 | |
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 键进行 ...
最新文章
- JDK 序列化, 碰到serialVersionUID 不一致问题,怎么处理?
- 皮一皮:师太请自重...
- 如何在linux下判断web服务是否开启?
- 方法练习1_比较两个数字是否相同
- 11、mysql数据表中数据的查询(3)
- AntDesign Form表单字段校验的三种方式
- 前端学习(3150):react-hello-react之DoM的diff算法
- mysqldump 定时备份数据(全量)
- 如何修改远程桌面3389端口
- 【编程科普】服务器的软件和硬件
- windows netstat taskkill命令 操作进程
- PCB设计之3W规则和20H原则
- c语言下列编程段的错误,C语言编程题目(有错误)
- Android Material Design调色板
- ubuntu 16.04 运行php,乌班图Ubuntu 16.04下安装PHP 7过程详解
- Hybrid APP基础篇(一)-什么是Hybrid App
- 数据结构与算法分析(C++版) 张铭 等译
- matlab求两向量夹角_MATLAB基础练习(一)
- date time 分开存储如何合并_关于TDateTime的TDate与TTime合并的问题 | 菲菲的家
- Excel表格转换为MarkDown表格工具
热门文章
- C#学习-数值与日期的ToString()格式汇总
- linux系统调用过程
- AttributeError: module transformers has no attribute LLaMATokenizer解决方案
- 单词搜索(给定一个二维网格和一个单词,找出该单词是否存在于网格中)
- mysql转unix时间戳_mysql日期与unix时间戳互转
- mysql中使用除法
- Python基础语法-文件的基本操作
- linux将py变成exe文件,使用py2exe将Python 脚本生成exe可执行文件
- 2020牛客暑期多校训练营(第五场)——E Bogo Sort
- Amazon评论数据的预处理代码(Positive Negative)