支持移动端的jQuery滑块式验证码插件
源码介绍
这是一款支持移动端的jQuery滑块式验证码插件。用户通过拖动滑块行为来完成校验，支持PC端及移动端。可以将用户拖动行为的时间、精度，滑动轨迹等信息到服务器，然后进行后台算法验证。 在页面中引入下面的文件。 该支持移动端的jQuery滑块式验证码插件的github网址为：https://github.com/ArgoZhang/SliderCaptcha简要教程
使用方法
<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 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>
初始化插件
<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>
本站资源均来自互联网，仅供研究学习，禁止违法使用和商用，产生法律纠纷本站概不负责！如果侵犯了您的权益请与我们联系！
转载请注明出处： 免费源码网-免费的源码资源网站 » 支持移动端的jQuery滑块式验证码插件
发表评论 取消回复