-

基于Vue的验证码插件vue2-verify

WEB前端

在我们Web项目开发中,验证码是一种比较常见的区分用户是计算机还是人的手段。主要是为了保证项目的安全。现在Vue开发的项目很多,基本都是前后端分离的。给大家推荐一个基于Vue比较好用的验证码插件vue2-verify。但是大家要注意一点,单纯前端的验证是不安全的,因为可以直接通过接口请求。下面雷雪松就详细的给大家介绍一下基于Vue的验证码插件vue2-verify。

1、vue2-verify支持的验证码类型
常规验证码picture 常规的验证码由数字和字母构成,用户输入不区分大小写,可变形成汉字验证。
运算验证码compute 运算验证码主要通过给出数字的加减乘运算,填写运算结果进行验证。
滑动验证码slide 通过简单的滑动即可完成验证,应用与移动端体验很好。
拼图验证码puzzle 拼图。
选字验证码pick 通过按顺序点选图中的汉字完成验证,ie浏览器要求9或以上

vue2-verify

2、vue2-verify的安装以及用法

1
npm install vue2-verify
1
2
3
4
5
6
7
8
9
10
11
12
13
14
// vue2-verify基础用法
<template>
<Verify :type="1"></Verify>
</template>

<script>
import Verify from 'vue2-verify'

export default {
name: 'app',
components: {Verify},
methods: {}
}
</script>

3、vue2-verify的事件和参数
事件
ready 验证码初始化成功的回调函数。
success 验证码匹配成功后的回调函数。如要重新初始化:success:function(obj){obj.refresh();}。
error 验证码匹配失败后的回调函数。

常规验证码picture
type 验证码type为picture或者1
width 常规验证码的宽,支持百分比形式设置,如:width:100%。
height 常规验证码的高,支持百分比形式设置,如:height:10%。
fontSize 常规验证码中的字母&数字的字体大小,默认为30px。
codeLength 常规验证码中显示的验证码个数,默认为6。

运算验证码compute
type 验证码type为compute或者2
figure 运算验证码的位数,默认是100以内的数字,即两位数。如果是要设置三位数,则设置figure:1000。
arith 算法选择,支持加、减、乘。设置为1至3分别代表加减乘,0为随机切换。。
width 运算验证码的宽,支持百分比形式设置,如:width:100%。
height 运算验证码的高,支持百分比形式设置,如:height:10%。
fontSize 运算验证码中的数字的字体大小,默认为30px。
showButton 是否显示确定按钮,默认为true

滑动验证码slide
type 验证码type为slide或者3
vOffset 滑动验证码的误差量,如:误差量为5px就能完成验证,设置vOffset:5。
explain 滑动条内的提示,不设置默认是:向右滑动完成验证。
barSize 其中包含了width、height两个参数,分别代表滑动条的宽度和高度,支持百分比方式设置,如:{width:’100%’,height:’40px’}
showButton 是否显示确定按钮,默认为true

拼图验证码puzzle
type 验证码type为puzzle或者4
mode 验证码的显示方式,弹出式pop,固定fixed,默认是:mode : ‘fixed’。
vOffset 滑动验证码的误差量,默认单位是px。如:误差量为5px就能完成验证,设置vOffset:5。
vSpace 验证码图片和移动条容器的间隔,默认单位是px。如:间隔为5px,设置vSpace:5。
explain 滑动条内的提示,不设置默认是:’向右滑动完成验证’。
imgUrl 背景图片的地址,不设置默认是:’images/’。
imgName 验证码背景图的数组集合,默认从images目录中进行读取,如 [‘1.jpg’, ‘2.jpg’]。
imgSize 其中包含了width、height两个参数,分别代表图片的宽度和高度,支持百分比方式设置 如:{width:’100%’,height:’200px’}。
blockSize 其中包含了width、height两个参数,分别代表拼图块的宽度和高度,如:{width:’40px’,height:’40px’}。。
barSize 其中包含了width、height两个参数,分别代表滑动条的宽度和高度,支持百分比方式设置,如:{width:’100%’,height:’40px’}
showButton 是否显示确定按钮,默认为true

选字验证码pick
type 验证码type为pick或者5
mode 验证码的显示方式,弹出式pop,固定fixed,默认是:mode : ‘fixed’。
defaultNum 验证码中出现的文字数量,如要默认4个字
checkNum 验证码中要求比对的文字数量,如要按序比对2个字
vSpace 验证码图片和移动条容器的间隔,默认单位是px。
imgUrl 背景图片的地址,不设置默认是:’images/’。
imgName 验证码背景图的数组集合,默认从images目录中进行读取,如 [‘1.jpg’, ‘2.jpg’]。
imgSize 其中包含了width、height两个参数,分别代表图片的宽度和高度,支持百分比方式设置 如:{width:’100%’,height:’200px’}。
barSize 其中包含了width、height两个参数,分别代表滑动条的宽度和高度,支持百分比方式设置,如:{width:’100%’,height:’40px’}
showButton 是否显示确定按钮,默认为true

经过雷雪松对vue2-verify的介绍,是不是觉得vue2-verify很强大?vue2-verify基本覆盖了我们常用的所有验证方式,而且使用起来也很方便,支持一些自定义配置。需要的可以尝试一下验证码插件vue2-verify。

来源:基于Vue的验证码插件vue2-verify

发表评论

电子邮件地址不会被公开。 必填项已用*标注