vue2-verify-弱弱的前端验证

黄粱一梦2024-03-1310

vue2-verfiy

一、介绍

vue2-verify的一款纯前端验证码组件，该项目基于https://github.com/Hibear/verify，验证支持如下类型：

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

二、官方地址

Github：https://github.com/mizuka-wu/vue2-verify

三、使用方法

3.1 安装

npm i vue2-verify

3.2 使用

如果只在某一页面（如登录、注册）使用验证，建议只在该页面引入。如下代码所示。

<template>
	<verify></verify>
</template>

<script>
    import Verify from 'vue2-verify'
    export default {
        components: {
            Verify,
        }
    }
</script>

<style scoped>

</style>

如果什么参数都不设置。vue2-verify默认为常规认证码，如下图所示。

常规验证码
当然这样子就只是一个摆设而已，输入按确定后并没有什么用，因而我们还要设置回调事件，可以设置success和error，分别代表验证码输入成功和输入错误时的回调。

<template>
    <div>
        <div>
            <verify @success="onVerifySuccess" @error="onVerifyError" ></verify>
        </div>
    </div>
</template>

<script>
    import Verify from 'vue2-verify'
    export default {
        components: {
            Verify,
        },
        methods: {
            onVerifySuccess(obj) {
                //验证码正确回调
                console.log('verify success');
                //todo
            },
            onVerifyError(obj) {
                //验证码错误回调
                console.log('verify error');
                //错误刷新验证码
                obj.refresh();
                //todo
            }
        }
    }
</script>
123456789101112131415161718192021222324252627282930

此外该组件还提供了数字运输验证、滑动验证等，通过type参数即可改变验证码的类型；

<template>
    <div>
        <div style="display:inline-block">
            <verify type="1"></verify>
        </div>
        <div style="display:inline-block">
            <verify type="2"></verify>
        </div>
        <div style="display:inline-block">
            <verify type="3" :showButton="false"></verify>
        </div>
        <div style="display:inline-block">
            <verify type="4" :showButton="false"></verify>
        </div>
        <div style="display:inline-block">
            <verify type="5" :showButton="false"></verify>
        </div>
    </div>
</template>

验证码类型

四、详细文档

事件

参数 说明
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提供了前端页面的验证，一定程度上可以缓解频繁的操作，虽并非是可靠的，任何纯前端验证都可被绕过。要想加上更可靠的验证必须使用后端验证或者使用第三方的验证接口，如腾讯验证。

转载·原文地址 : (https://blog.csdn.net/qq_28811145/article/details/108184826)

分类：随笔

标签：随笔转载

上一篇获取用户消息列表的SQL下一篇扫码支付开发指引

版权声明

本文系作者 @黄粱一梦 转载请注明出处,文中若有转载的以及参考文章地址也需注明。\(^o^)/~

Preview

文章榜

  • 1

    轻量级MVVM的JS库Strve.js

  • 2

    关于如何在beforeRouteEnter钩子里面获取data数据(vue)

  • 3

    JSAPI微信支付

  • 4

    解决ERROR in Conflict: Multiple assets emit different content to the same filename index.html 的问题

  • 5

    SKU商品规格属性-笛卡尔乘积算法