JQUERY插件-兼容移動端滑塊滑動表單安全驗證碼JQUERY插件SliderCaptcha下載

滑塊式驗證碼

用戶通過拖動滑塊行為來完成校驗,支持PC端及移動端??梢詫⒂脩敉蟿有袨榈臅r間、精度,滑動軌跡等信息到服務器,然后進行后臺算法驗證。

效果圖

快速開始

組件依賴 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

在線預覽 網盤下載

查看如下隱藏內容里的“提取碼”:

關注公眾號關注公眾號
關注公眾號,發送消息“查看密碼”,輸入系統回復的“查看密碼”,點擊“確定”按鈕,即可看到“提取碼”。

發表評論