jQuery滑块验证码,用户通过拖动滑块完成校验,支持PC端及移动端

2019-04-16 23:11:56      站长图库      189     

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


jQuery滑块验证码,用户通过拖动滑块完成校验,支持PC端及移动端


使用方法:

依赖插件:jQuery、bootstrap、font-awesome

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

<link href="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
<link href="https://cdn.bootcss.com/font-awesome/5.7.2/css/all.min.css">
<link href="./src/slidercaptcha.css">

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

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

添加网页Html元素

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

通过 javascript 初始化控件

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

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

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

详细参数:

名称类型默认值说明
widthinteger280背景图片宽度
heightinteger150背景图标高度
sliderLinteger42拼图宽度
sliderRinteger9拼图突出半径
offsetinteger5验证容错偏差值 默认5个像素偏差即认为验证通过
loadingTextstring"正在加载中..."图片加载时显示的文本信息
failedTextstring"再试一次"验证失败时显示的文本信息
barTextinteger"向右滑动填充拼图"拖动滑块准备拖动时显示的文本信息
repeatIconstring"fa fa-redo"重新加载图标 需引用 font-awesome
setSrcfunction"https://picsum.photos/?image=random"设置图片加载路径
onSuccessfunctionnull验证通过时回调此函数
onFailfunctionnull验证失败时回调此函数
onRefreshfunctionnull点击重新加载图标时回调此函数
localImagesfunctionfunction () { return 'images/Pic' + Math.round(Math.random() * 4) + '.jpg'; }图床图片加载失败时调用此方法返回本地图片路径

其他方法:

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

参数:

MethodExampleDescription
reset$('#captcha').sliderCaptcha('reset')重置控件


  • 5 次
  • 演示
  • 1 分