• This repository has been archived on 28/Jan/2022
  • Stars
    star
    387
  • Rank 110,971 (Top 3 %)
  • Language Vue
  • License
    MIT License
  • Created almost 7 years ago
  • Updated almost 3 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

vue的验证码插件

vue2-verify

寻求继续维护者

前端做验证码感觉其实意义不是很大,目前也用不上,所以没有继续维护下去的动力了,希望有人可以正常接手

基于https://github.com/Hibear/verify 的验证码项目
项目验证码类型请查看

支持的验证码类型

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

请记住一件事!

纯前端是可以被别人绕过验证的!

todo

  1. 添加在线演示和修改

文档

如何使用

npm i 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
// 基础用例

<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>

More Repositories

1

el-table-draggable

让element-ui的table可拖动排序,支持 行,列,跨表格等特性
JavaScript
128
star
2

el-table-horizontal-scroll

el-table awlays show horizontal-scroller on bottom
JavaScript
66
star
3

vue-timeline

a timeline for vue2 and bootstrap3
JavaScript
61
star
4

vue2-typeahead

A vue component of typeahead
Vue
31
star
5

xwqy-geetest

破解小微企业名录
JavaScript
23
star
6

vmd-js

Read and edit mmd's vmd file
JavaScript
11
star
7

genshin-midi-harp-player

原神竖琴midi播放器
JavaScript
9
star
8

mizuka-wu.github.io

My blog
8
star
9

vue-pdfmake

pdfmake for vue
JavaScript
8
star
10

vue-webp

Vue2 plugins support auto replace .png or .jpg to .webp if browse support
JavaScript
8
star
11

gitee-pages-action

Auto reload gitee pages
JavaScript
8
star
12

seed

One step generating pages from data
Vue
5
star
13

web-digital-watermarking

create digital watermark
TypeScript
5
star
14

hilichurls-language

丘丘人语言翻译
JavaScript
4
star
15

CriDemuxWasm

Demux usm file online by CriDemuxCore and Blazor
C#
3
star
16

kanban

vue electron kanban
Vue
3
star
17

posenet-vmd

generate vmd from video or camera by posenet
JavaScript
2
star
18

electron-store-vuex-sync

auto sync electron-store and vuex
JavaScript
2
star
19

json-schema-to-jsdoc

trans your json-schema to jsdoc
JavaScript
2
star
20

vuepress-plugin-pixi-live2d-display

JavaScript
2
star
21

comiccup-magazine

generate-comiccup-magazine
JavaScript
2
star
22

ymindmap

mindmap power by yjs and fabric.js
TypeScript
1
star
23

vocaloid-module-index

收集v家模组
HLSL
1
star
24

kankannews-spider

spider kankan news live
JavaScript
1
star
25

canmind

TypeScript
1
star