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

1、vue2-verify支持的验证码类型

常规验证码picture常规的验证码由数字和字母构成，用户输入不区分大小写，可变形成汉字验证。

运算验证码compute运算验证码主要通过给出数字的加减乘运算，填写运算结果进行验证。

滑动验证码slide通过简单的滑动即可完成验证，应用与移动端体验很好。

拼图验证码puzzle拼图。

选字验证码pick通过按顺序点选图中的汉字完成验证，ie浏览器要求9或以上

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

npm install vue2-verify
// 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。

原文 https://www.leixuesong.com/3555

链接: https://fly63.com/article/detial/5003