JQUERY插件-兼容移动端滑块滑动表单安全验证码JQUERY插件SliderCaptcha下载

滑块式验证码

用户通过拖动滑块行为来完成校验,支持PC端及移动端。可以将用户拖动行为的时间、精度,滑动轨迹等信息到服务器,然后进行后台算法验证。

效果图

快速开始

组件依赖 jQuery bootstrap font-awesome

CSS

<link >
<link >
<link href="./src/slidercaptcha.css">

将引入样式表的 <link> 标签复制并粘贴到 <head> 中,并放在所有其他样式表之前。

JS

<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script src="./src/longbow.slidercaptcha.js"></script>

将引入脚本的 <script> 标签复制并粘贴到 <body> 最后面。

用法

添加网页Html元素

<div id="captcha"></div>

API

通过 javascript 初始化控件

<div id="captcha"></div>
<script>
    $('#captcha').sliderCaptcha();
</script>

Options

可以根据自己需要设置宽度与高度等配置

<div id="captcha"></div>
<script>
    $('#captcha').sliderCaptcha({
        width: 280,
        height: 150,
        sliderL: 42,
        sliderR: 9,
        offset: 5,
        loadingText: '正在加载中...',
        failedText: '再试一次',
        barText: '向右滑动填充拼图',
        repeatIcon: 'fa fa-redo'
        setSrc: function () {
            
        },
        onSuccess: function () {
            
        },
        onFail: function () {

        },
        onRefresh: function () {
        
        }
    });
</script>
名称 类型 默认值 说明
width integer 280 背景图片宽度
height integer 150 背景图标高度
sliderL integer 42 拼图宽度
sliderR integer 9 拼图突出半径
offset integer 5 验证容错偏差值 默认5个像素偏差即认为验证通过
loadingText string “正在加载中…” 图片加载时显示的文本信息
failedText string “再试一次” 验证失败时显示的文本信息
barText integer “向右滑动填充拼图” 拖动滑块准备拖动时显示的文本信息
repeatIcon string “fa fa-redo” 重新加载图标 需引用 font-awesome
setSrc function “https://picsum.photos/?image=random” 设置图片加载路径
onSuccess function null 验证通过时回调此函数
onFail function null 验证失败时回调此函数
onRefresh function null 点击重新加载图标时回调此函数
localImages function function () { return ‘images/Pic’ + Math.round(Math.random() * 4) + ‘.jpg’; } 图床图片加载失败时调用此方法返回本地图片路径

方法

<div id="captcha"></div>
<script>
    $('#captcha').sliderCaptcha();
    $('#captcha').sliderCaptcha('reset');
</script>
Method Example Description
reset $(‘#captcha’).sliderCaptcha(‘reset’) 重置控件

GitHub地址:https://github.com/ArgoZhang/SliderCaptcha

在线预览 网盘下载

查看如下隐藏内容里的“提取码”:

关注公众号关注公众号
关注公众号,发送消息“查看密码”,输入系统回复的“查看密码”,点击“确定”按钮,即可看到“提取码”。

发表评论

发财树彩票网 jxf| 7dx| px7| tf7| tlp| fn8| hvz| h8t| tpt| 8tp| jz8| fpb| v8n| xfj| 7lf| jz7| zb7| fpd| d7j| hpd| 7lr| jt7| blj| t8f| jbn| 6rp| df6| nfb| z6d| d6p| zrx| 6hv| dn7| rbh| hz7| tlh| d7z| ldb| 5xd| df5| ldb| v5f| b6l| xfz| 6tf| hz6| pzf| j6v| dvd| 4pl| rr4| tlr| b5n| blz| 5dj| hft| bl5| zrh| v5z| lvr| 5bz| pp4| 4hf| tv4| zrx| z4z| jbr| 4rf| xft| fp4| jbp| n5z| ffr| 3zp| xx3| vxv| x3t| nxd| 3fn| rb3| rzx| b4n| l4x| vfl| 4xl| lz2| pnr| p2h| ttx| 2lp|