效果圖
淘寶或者阿里云上經常能看到鼠標拖動的驗證碼出現
阿里云驗證碼
一直想自己實現，今天整理了下網上資料，找到了QapTcha這個插件，或者說一個模板。今天就用他來實現一個簡單的拖動驗證碼。
廢話不多說，上代碼：
工程結構
主頁面(核心代碼)
...
<body>
<div class="container">
<h1>高仿淘寶拖動驗證碼</h1>
<form method="post" action="#">
<fieldset>
<div id="QapTcha" class="QapTcha"></div>
<input type="submit" name="submit" value="提交表單" />
</fieldset>
</form>
</div>
...
<script type="text/javascript">
$(document).ready(function () {
$('.QapTcha').QapTcha({ disabledSubmit: true,autoSubmit:false, autoRevert: true, txtLock: "請按住滑塊，拖動到最右側", txtUnlock: '驗證通過', PHPfile: 'QapTcha.jquery.php' });
});
</script>
</body>
</html>
Qaptcha腳本
jQuery.QapTcha = {
build: function(options) {
var defaults = {
txtLock: '已上鎖 :表單不能提交，請拖動上方箭頭到最右側解鎖',//未解鎖文字
txtUnlock: '已解鎖鎖 : 表單能提交',//解鎖成功文字
disabledSubmit: true,//未解鎖提交按鈕無效
autoRevert: true,//是否自動回彈
PHPfile: 'php/Qaptcha.jquery.php',//驗證服務器
autoSubmit: false//是否自動提交
};
if (this.length > 0) return jQuery(this).each(function(i) {
var opts = $.extend(defaults, options),
t = $(this),
form = $('form').has(t),
Clr = jQuery('<div>', {
'class': 'clr'
}),
bgSlider = jQuery('<div>', {
'class': 'bgSlider'
}),
bgMasks = jQuery('<div>', {
'class': 'bgMasks'
}),
Slider = jQuery('<div>', {
'class': 'Slider'
}),
Icons = jQuery('<div>', {
id: 'Icons'
}),
TxtStatus = jQuery('<div>', {
'class': ' TxtStatus dropError TxtStatusFont',
text: opts.txtLock
});
if (opts.disabledSubmit) form.find('input[type=\'submit\']').attr('disabled', 'disabled');
//美化拖動驗證，模仿淘寶
bgSlider.appendTo(t);//添加驗證背景
Icons.insertAfter(bgSlider);
Clr.insertAfter(Icons);
Slider.appendTo(bgSlider);//添加滑塊
bgMasks.appendTo(bgSlider);//添加上層遮罩
TxtStatus.appendTo(bgSlider);//添加文字
t.show();
Slider.draggable({//滑塊添加滑動
drag: function(event, ui) {//拖動回調
$(bgMasks).width(bgSlider.width() - ui.position.left)
},
revert: function(event, ui) {//驗證回彈
if (opts.autoRevert) {
if (parseInt(Slider.css("left")) > (bgSlider.width() - Slider.width() - 3)) return false;
else return true
}
},
revertDuration: 15,
containment: bgSlider,
axis: 'x',//橫向
stop: function(event, ui) {//推動結束回調
if (ui.position.left > (bgSlider.width() - Slider.width() - 3)) {
$.ajax({//拖動到頭給服務器發消息
type: "post",
async: "async",
data: {
action: 'qaptcha',
},
url: opts.PHPfile,
dataType: "json",
success: function(data) {
if (!data.error) {
Slider.draggable('disable').css('cursor', 'default');
TxtStatus.text(opts.txtUnlock).addClass('dropSuccess').removeClass('dropError');
Slider.addClass('SliderSuccess');
Icons.css('background-position', '-16px 0');
form.find('input[type=\'submit\']').removeAttr('disabled');//提交按鈕可用
if (opts.autoSubmit) form.find('input[type=\'submit\']').trigger('click');
} else {
alert(data.error);
refurbishValidate(t);
}
},
beforeSend: function() {//提交前設置加載圖標
var htmLoading = '<span>加載中...</span><div class="loader"><div class="ball-spin-fade-loader"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div></div>';
TxtStatus.html(htmLoading).addClass('dropSuccess').removeClass('dropError')
},
complete: function(XMLHttpRequest, textStatus) {
isAjaxing = false;
$("#btn_loading").css('display', 'none')
},
error: function(e) {
alert('驗證失敗');
refurbishValidate(t);
}
});
} else {
while (bgMasks.width() <= bgSlider.width()) {
$(bgMasks).width(bgMasks.width() + Slider.width())
}
$(bgMasks).width(bgMasks.width() - Slider.width())
}
}
});
})
}
};
jQuery.fn.QapTcha = jQuery.QapTcha.build;
function refurbishValidate(ctrl) {//重置表單
ctrl.html("");
ctrl.QapTcha({
disabledSubmit: true,
autoSubmit: false,
autoRevert: true,
txtLock: "請按住滑塊，拖動到最右側",
txtUnlock: '驗證通過',
PHPfile: 'Qaptcha.jquery.php'
})
}
//服務端驗證
<?php
session_start();
$aResponse['error'] = false;
if(isset($_POST['action']))
{
if(htmlentities($_POST['action'], ENT_QUOTES, 'UTF-8') == 'qaptcha')#確認是qaptcha發送的action
{
//這里可以進一步對參數分析以驗證正確性
echo json_encode($aResponse);
}
else
{
$aResponse['error'] = true;
echo json_encode($aResponse);
}
}
else
{
$aResponse['error'] = true;
echo json_encode($aResponse);
}
只是對模板的一個簡單應用，后臺并沒有做復雜驗證，阿里云的驗證要比這個復雜的多，后天可以大致判斷是否是人操作。
這里沒有加這類判斷，只加了滾動，有興趣的朋友可以自己加入自己的驗證邏輯！
