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

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

支持的验证码类型

  1. 经常验证码图片经常的验证由数字和构成,用户输入不验证大小,生成字符。
  2. 验证计算结果通过提供的主要加减码验证码,重新填写结果进行。
  3. 滑动验证码可以通过简单的滑动与滑动完成验证,应用移动端体验非常好。
  4. 拼图验证码拼图。
  5. 选字验证码通过按顺序点选图要求的汉字完成验证,即浏览器9或以上。

请记住一个事情!

原来是可以被别人偷偷验证的!

去做

  1. 添加在线演示和修改

文档

如何使用

npm i vue2-verify

事件

参数说明
ready验证码初始化成功的功能。
success验证码成功后的成功函数。如要重新初始化:success:function(obj){obj.refresh();}。
error验证码匹配失败后的功能。

经常验证码图片

参数说明

参数说明
type验证码类型为图片或1
width经常验证码的宽度,支持形式设置,例如:width:100%。
height验证码的高,通常支持形式设置,例如:height:10%。
fontSize经常验证中码和数字的字体大小,默认为30px。
codeLength经常验证码中显示的验证码个数,默认为6。

验证码计算

参数说明

参数说明
type验证码类型为计算或2
figure如果要同时设置三个曝光,则设置数字:1000。
arith算法选择,支持加、减、乘。设置为1至3分别代表加减乘,0为随时切换。。
width设置验证码的宽度,常用形式设置,例如:width:100%。
height设置验证码的高,常见的支持形式,例如:height:10%。
fontSize用于验证码中的数字的字体大小,默认为 30px。
showButton是否显示确定按钮,默认为真

验证码slide

参数说明

参数说明
type验证码类型为幻灯片或3
vOffset精度校验码的量,如:精度为5px,设置vOffset:5。
explain滑动条内的提示,不设置默认为:滑动滑动完成验证。
barSize其中包含了哪些参数,分别表示支持宽度、高度的宽度和高度,例如其他几种设置,{width:’100%’,height:’40px’}
showButton是否显示确定按钮,默认为真

拼图验证码拼图

参数说明

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

选字验证码pick

参数说明

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

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

By lxcss

发表评论

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