vue使用vue2-verify实现前端验证码(滑动,拼图,数字,选字验证)
先附上插件github地址
vue2-verify
先说一下弊端,使用拼图模式时,只能使用外链图片,使用本地图片时怎么写都不对,加载不到资源,如果有人知道怎么写可以留言给我,其他模式还是很好用的,在移动端兼容也是不错的,如果要使用拼图验证可以看我另一篇博文
https://blog.csdn.net/qq_37816525/article/details/102560656
安装
npm i vue2-verify
基础用例
<template><Verify @success="alert('success')" @error="alert('error')" :type="1"></Verify>
</template><script>import Verify from 'vue2-verify'export default {name: 'app',methods: {alert(text) {console.log(text)}},components: {Verify}}
</script>
事件
参数 说明
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
vue使用vue2-verify实现前端验证码(滑动,拼图,数字,选字验证)相关推荐
- 点击某个物体人机验证码java,captcha: 行为验证码(滑动拼图、点选文字),前后端(java)交互,包含h5/flutter/uni-app的源码和实现...
uni-app在线体验(微信小程序,请使用微信扫一扫) uni-app H5页面在线体验(扫一扫) 微信小程序 uni-app H5 如果图片未能正常展 ...
- 滑动拼图行为验证码(KgCaptcha快速入门)
凯格行为验证码 - 滑动拼图验证码 行为验证码采用嵌入式集成方式,接入方便,安全,高效.抛弃了传统字符型验证码展示-填写字符-比对答案的流程,采用验证码展示-采集用户行为-分析用户行为流程,用户只需要 ...
- 前端 验证码隐藏怎么实现_Python爬虫教程:200行代码实现一个滑动验证码
Python爬虫教程:教你用200行代码实现一个滑动验证码 做网络爬虫的同学肯定见过各种各样的验证码,比较高级的有滑动.点选等样式,看起来好像挺复杂的,但实际上它们的核心原理还是还是很清晰的,本文章大 ...
- 【VUE】vue实现登录滑动拼图验证的两种方法,纯前端组件验证以及前后端同时验证
vue实现登录滑动拼图验证的两种方法: 第一种是纯前端组件验证,只能区分是人为操作还是机器操作. 第二种是前后端同时验证,这种方法加上后端校验相对会更安全一些.(注:在最底部加上了同时兼容移动端的方法 ...
- uniapp、vue实现滑动拼图验证码
实际开发工作中,在登陆的时候需要短信验证码,但容易引起爬虫行为,需要用到反爬虫验证码,今天介绍一下拼图验证码,解决验证码反爬虫中的滑动验证码反爬虫. 原理 滑动拼图验证码是在滑块验证码的基础上增加了一 ...
- verify.js纯前端验证码插件
这是一款极简洁的表单校验插件,属于半封装模式,只需引入插件,即可任意编写业务逻辑代码,简单方便易修改. 首先引入js,需提前引入jquery,然后引入verift即可使用 <script src ...
- 手机HTML拼图验证,JS实现PC手机端和嵌入式滑动拼图验证码三种效果_气质_前端开发者...
PC和手机端网站滑动拼图验证码效果源码,同时包涵了弹出式Demo,使用ajax形式提交二次验证码所需的验证结果值,嵌入式Demo,使用表单形式提交二次验证所需的验证结果值,移动端手动实现弹出式Demo ...
- vue实现登录时的图片验证码(纯前端)
提示:这里只将我成功运行出来的案例放在这里供大家参考 一.图片验证码 经过我一天的查询,<vue实现登录时的图片验证码>,这篇博客效果比较好,代码基本没有什么问题的.效果如下,点击图片即可 ...
- 滑动拼图和文字点选两种类型的验证码
前言 行为验证码通过用户的操作来完成验证,常见的行为验证码有拖动式和点触式. 拖动式验证就是根据图片显示,将指定的图形拖动到指定位置完成验证.而点触式验证码就是通过鼠标点击出示例中出现的图形完成验证. ...
最新文章
- PCL中点云数据格式之间的转化
- 在 Docker 中运行 MySQL:多主机网络下 Docker Swarm 模式的容器管理
- Stream Processing: Apache Kafka的Exactly-once的定义 原理和实现
- HTTP 499 状态码 nginx下 499错误
- 实验三 ShellShock 攻击实验
- java取余时前者前者小于后者_Java基本语法
- 想客户之所想 华为全栈云加速行业云化创新
- 关于渗透的一些思路持续更新(自我理解)
- 滨江学院 刘生 计算机网络考点知识点整理
- DButils入门及结果处理器选择
- (转)switch与ifelse的效率问题 .
- volatile分析
- 微信小程序使用 ocr 身份证识别
- 亦是美网络,致力于操作系统应用与计算机网络技术的IT网站。
- MATLAB 爬取配色css数据及渐变图
- excel中将两列交叉合并为一列
- P1251 餐巾计划问题 解题报告
- 如何使用Excel表格精准分析PT100温度阻值关系?
- linux CentOS7虚拟机修改静态ip地址
- 图片转PDF格式怎么转换?这三种方法随便用