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

70972019-04-16 23:11:56去下载

用户通过拖动滑块行为来完成校验，支持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>

详细参数：

名称	类型	默认值	说明
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')	重置控件

TAG标签：jQuery 滑块验证码 PC端移动端

本文网址：https://www.zztuku.com/index.php/detail-601.html
转载请声明来自：站长图库 - jQuery滑块验证码,用户通过拖动滑块完成校验,支持PC端及移动端
使用声明：
1、本站所有素材，仅限学习交流，请勿用于商业用途。
2、本站资源大多无解压密码，如遇需要解压密码，无特殊说明，均为：zztuku.com
3、下载积分可通过日常签到、绑定邮箱等途径免费获得！
4、本站提供的源码、模板、软件工具等其他资源，均不包含技术服务，请大家谅解！由于资源大多存储在云盘，如出现链接失效请评论反馈。
5、如果素材损害你的权益，请联系我们给予处理。