近幾年比較流行的一種驗證方式就是拖動驗證，可以在一定程度上避免過去驗證碼被破解的尷尬，下面小編就為大家分享一下這個驗證方式的js代碼

$.fn.drag=function(options){

var x, drag=this, isMove=false, defaults={

};

var options=$.extend(defaults, options);

//添加背景，文字，滑塊

var html='<div class="drag_bg"></div>'+

'<div class="drag_text" onselectstart="return false;" unselectable="on">拖動滑塊驗證</div>'+

'<div class="handler handler_bg"></div>';

this.append(html);

var handler=drag.find('.handler');

var drag_bg=drag.find('.drag_bg');

var text=drag.find('.drag_text');

var maxWidth=drag.width() - handler.width(); //能滑動的最大間距

//鼠標按下時候的x軸的位置

handler.mousedown(function(e){

isMove=true;

x=e.pageX - parseInt(handler.css('left'), 10);

});

//鼠標指針在上下文移動時，移動距離大于0小于最大間距，滑塊x軸位置等于鼠標移動距離

$(document).mousemove(function(e){

var _x=e.pageX - x;

if(isMove){

if(_x > 0 && _x <=maxWidth){

handler.css({'left': _x});

drag_bg.css({'width': _x});

}else if(_x > maxWidth){ //鼠標指針移動距離達到最大時清空事件

dragOk();

}

}

}).mouseup(function(e){

isMove=false;

var _x=e.pageX - x;

if(_x < maxWidth){ //鼠標松開時，如果沒有達到最大距離位置，滑塊就返回初始位置

handler.css({'left': 0});

drag_bg.css({'width': 0});

}

});

handler.ontouchstart(function(e){

isMove=true;

x=e.pageX - parseInt(handler.css('left'), 10);

});

//鼠標指針在上下文移動時，移動距離大于0小于最大間距，滑塊x軸位置等于鼠標移動距離

$(document).ontouchmove(function(e){

var _x=e.pageX - x;

if(isMove){

if(_x > 0 && _x <=maxWidth){

handler.css({'left': _x});

drag_bg.css({'width': _x});

}else if(_x > maxWidth){ //鼠標指針移動距離達到最大時清空事件

dragOk();

}

}

}).ontouchend(function(e){

isMove=false;

var _x=e.pageX - x;

if(_x < maxWidth){ //鼠標松開時，如果沒有達到最大距離位置，滑塊就返回初始位置

handler.css({'left': 0});

drag_bg.css({'width': 0});

}

});

//清空事件

function dragOk(){

handler.removeClass('handler_bg').addClass('handler_ok_bg');

text.text('驗證通過');

drag.css({'color': '#fff'});

handler.unbind('mousedown');

$(document).unbind('mousemove');

$(document).unbind('mouseup');

}

};

喜歡就訂閱關注我吧，小編不定期分享前端的各種小知識哦