多種型別jQuery網頁驗證碼外掛程式碼例項

html

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
<title>jQuery網頁驗證碼外掛</title>
<link rel="stylesheet" type="text/css" href="css/verify.css" rel="external nofollow" >
</head>
<body>
<h3>數字字母驗證碼</h3>
<div id="mpanel2" ></div>
<button type="button" id="check-btn" class="verify-btn">確定</button>
<h3 style="margin-top: 20px">算數驗證碼</h3>
<div id="mpanel3"></div>
<button type="button" id="check-btn2" class="verify-btn">確定</button>
 
<h3 style="margin-top: 20px">滑動驗證碼</h3>
<div id="mpanel1" ></div>
 
<h3 style="margin-top: 20px">拼圖驗證碼</h3>
<div id="mpanel4"></div>
 
<h3 style="margin-top:30px;">點選驗證碼</h3>
<div id="mpanel5">
</div>
<div id="mpanel6" style="margin-top:30px;">
</div>
 
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/verify.js" ></script>
<script type="text/javascript">
	$('#mpanel2').codeVerify({
		type : 1,width : '200px',height : '50px',fontSize : '30px',codeLength : 6,btnId : 'check-btn',ready : function() {
		},success : function() {
			alert('驗證匹配！');
		},error : function() {
			alert('驗證碼不匹配！');
		}
	});
 
	$('#mpanel3').codeVerify({
		type : 2,figure : 50,//位數，僅在type=2時生效
		arith : 0,//演算法，支援加減乘，不填為隨機，僅在type=2時生效
		width : '200px',btnId : 'check-btn2',error : function() {
			alert('驗證碼不匹配！');
		}
	});
 
	$('#mpanel1').slideVerify({
		type : 1,//型別
		vOffset : 5,//誤差量，根據需求自行調整
		barSize : {
			width : '50%',height : '40px',},success : function() {
			alert('驗證成功，新增你自己的程式碼！');
			//......後續操作
		},error : function() {
//		 alert('驗證失敗！');
		}
 
	});
	$('#mpanel4').slideVerify({
		type : 2,//誤差量，根據需求自行調整
		vSpace : 5,//間隔
		imgName : ['1.jpg','2.jpg'],imgSize : {
			width: '300px',height: '200px',blockSize : {
			width: '40px',height: '40px',barSize : {
			width : '300px',error : function() {
//		 	alert('驗證失敗！');
		}
 
	});
 
 
	$('#mpanel5').pointsVerify({
		defaultNum : 4,//預設的文字數量
		checkNum : 2,//校對的文字數量
		vSpace : 5,imgSize : {
			width: '400px',barSize : {
			width : '400px',error : function() {
//		 	alert('驗證失敗！');
		}
 
	});
 
	$('#mpanel6').pointsVerify({
		defaultNum : 4,error : function() {
//		 	alert('驗證失敗！');
		}
	});
 
</script>
 
</body>
</html>

verify.css

/*常規驗證碼*/
.verify-code {
	font-size: 20px;
	text-align: center;
	cursor: pointer;
	margin-bottom: 5px;
	border: 1px solid #ddd;
}
 
.cerify-code-panel {
	height:100%;
	overflow:hidden;
}
 
.verify-code-area {
	float:left;
}
 
.verify-input-area {
	float: left;
	width: 60%;
	padding-right: 10px;
}
.verify-change-area {
	line-height: 30px;
	float: left;
}
.varify-input-code {
	display:inline-block;
	width: 100%;
	height: 25px;
}
 
.verify-change-code {
	color: #337AB7;
	cursor: pointer;
}
 
.verify-btn {
	width: 200px;
	height: 30px;
	background-color: #337AB7;
	color:#FFFFFF;
	border:none;
	margin-top: 10px;
}
 
 
 
 
 
 
/*滑動驗證碼*/
.verify-bar-area {
 position: relative;
 background: #FFFFFF;
 	text-align: center;
 -webkit-box-sizing: content-box;
 -moz-box-sizing: content-box;
 box-sizing: content-box;
 	border: 1px solid #ddd;
 	-webkit-border-radius: 4px;
}
 
.verify-bar-area .verify-move-block {
 position: absolute;
 top: 0px;
 left: 0;
 background: #fff;
 cursor: pointer;
 -webkit-box-sizing: content-box;
 -moz-box-sizing: content-box;
 box-sizing: content-box;
 box-shadow: 0 0 2px #888888;
 -webkit-border-radius: 1px;
}
 
.verify-bar-area .verify-move-block:hover {
 background-color: #337ab7;
 color: #FFFFFF;
}
 
.verify-bar-area .verify-left-bar {
 position: absolute;
 top: -1px;
 left: -1px;
 	background: #f0fff0;
 cursor: pointer;
 -webkit-box-sizing: content-box;
 -moz-box-sizing: content-box;
 box-sizing: content-box;
 border: 1px solid #ddd;
}
 
.verify-img-panel {
	margin:0;
	-webkit-box-sizing: content-box;
 -moz-box-sizing: content-box;
 box-sizing: content-box;
	border: 1px solid #ddd;
	border-radius: 3px;
	position: relative;
}
 
.verify-img-panel .verify-refresh {
	width: 25px;
	height: 25px;
	text-align:center;
	padding: 5px;
	cursor: pointer;
	position: absolute;
	top: 0;
	right: 0;
	z-index: 2;
}
 
.verify-img-panel .icon-refresh {
	font-size: 20px;
	color: #fff;
}
 
.verify-img-panel .verify-gap {
	background-color: #fff;
	position: relative;
	z-index: 2;
	border:1px solid #fff;
}
 
.verify-bar-area .verify-move-block .verify-sub-block {
	position: absolute;
 text-align: center;
	z-index: 3;
	border: 1px solid #fff;
}
 
.verify-bar-area .verify-move-block .verify-icon {
	font-size: 18px;
}
 
.verify-bar-area .verify-msg {
	z-index : 3;
}
 
/*字型圖示的css*/
@font-face {font-family: "iconfont";
 src: url('../fonts/iconfont.eot?t=1508229193188'); /* IE9*/
 src: url('../fonts/iconfont.eot?t=1508229193188#iefix') format('embedded-opentype'),/* IE6-IE8 */
 url('data:application/x-font-woff;charset=utf-8;base64,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') format('woff'),url('../fonts/iconfont.ttf?t=1508229193188') format('truetype'),/* chrome,firefox,opera,Safari,Android,iOS 4.2+*/
 url('../fonts/iconfont.svg?t=1508229193188#iconfont') format('svg'); /* iOS 4.1- */
}
 
.iconfont {
 font-family:"iconfont" !important;
 font-size:16px;
 font-style:normal;
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
}
 
.icon-check:before { content: "\e645"; }
 
.icon-close:before { content: "\e646"; }
 
.icon-right:before { content: "\e6a3"; }
 
.icon-refresh:before { content: "\e6a4"; }

verify.js

/*! Verify-v0.1.0 MIT License by 大熊*/
 
;(function($,window,document,undefined) {
 
	//定義Code的建構函式
 var Code = function(ele,opt) {
 this.$element = ele,this.defaults = {
 	type : 1,figure : 100,//位數，僅在type=2時生效
 	arith : 0,//演算法，支援加減乘，0為隨機，僅在type=2時生效
 	width : '200px',height : '60px',ready : function(){},success : function(){},error : function(){}
 },this.options = $.extend({},this.defaults,opt)
 };
 var _code_chars = [0,1,2,3,4,5,6,7,8,9,'a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p','q','r','s','t','u','v','w','x','y','z','A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z'];
 var _code_color1 = ['#fffff0','#f0ffff','#f0fff0','#fff0f0'];
 var _code_color2 = ['#FF0033','#006699','#993366','#FF9900','#66CC66','#FF33CC'];
 
 //定義Code的方法
 Code.prototype = {
 	init : function() {
			var _this = this;
			this.loadDom();
			this.setCode();
			this.options.ready();
			this.$element[0].onselectstart = document.body.ondrag = function(){
				return false;
			};
			//點選驗證碼
			this.$element.find('.verify-code,.verify-change-code').on('click',function() {
				_this.setCode();
			});
			//確定的點選事件
			this.htmlDoms.code_btn.on('click',function() {
				_this.checkCode();
			});
 	},//載入頁面
 	loadDom : function() {
 		var panelHtml = '<div class="cerify-code-panel">\
  <div class="verify-code"></div>\
  <div class="verify-code-area">\
   <div class="verify-input-area">\
   <input type="text" class="varify-input-code"/>\
   </div>\
   <div class="verify-change-area">\
   <a class="verify-change-code">換一張</a>\
   </div>\
  </div>\
  </div>';
 	this.$element.append(panelHtml);
 
 	this.htmlDoms = {
 		code_btn : $('#'+this.options.btnId),code : this.$element.find('.verify-code'),code_area : this.$element.find('.verify-code-area'),code_input : this.$element.find('.varify-input-code'),};
 
 	this.htmlDoms.code.css({'width':this.options.width,'height':this.options.height,'line-height':this.options.height,'font-size':this.options.fontSize});
 	this.htmlDoms.code_area.css({'width':this.options.width});
 	},//設定驗證碼
 	setCode : function() {
 		var color1Num = Math.floor(Math.random() * 3);
 		var color2Num = Math.floor(Math.random() * 5);
 
 		this.htmlDoms.code.css({'background-color': _code_color1[color1Num],'color': _code_color2[color2Num]});
 		this.htmlDoms.code_input.val('');
 
 		var code = '';
 		this.code_chose = '';
 
 		if(this.options.type == 1) {	//普通驗證碼
				for(var i = 0; i < this.options.codeLength; i++) {
					var charNum = Math.floor(Math.random() * 52);
					var tmpStyle = (charNum%2 ==0)? "font-style:italic;margin-right: 10px;":"font-weight:bolder;";
					tmpStyle += (Math.floor(Math.random() * 2) == 1)? "font-weight:bolder;":"";
					this.code_chose += _code_chars[charNum];
					code += '<font style="'+tmpStyle+'">'+_code_chars[charNum]+'</font>';
				}
 		}else {		//演算法驗證碼
 			var num1 = Math.floor(Math.random() * this.options.figure);
 			var num2 = Math.floor(Math.random() * this.options.figure);
 
 			if(this.options.arith == 0) {
 				var tmparith = Math.floor(Math.random() * 3);
 			}
 
 			switch(tmparith) {
 				case 1 :
 					this.code_chose = parseInt(num1) + parseInt(num2);
 					code = num1 + ' + ' + num2 + ' = ?';
 					break;
 				case 2 :
 					if(parseInt(num1) < parseInt(num2)) {
 						var tmpnum = num1;
 						num1 = num2;
 						num2 = tmpnum;
 					}
 					this.code_chose = parseInt(num1) - parseInt(num2);
 					code = num1 + ' - ' + num2 + ' = ?';
 					break;
 				default :
 					this.code_chose = parseInt(num1) * parseInt(num2);
 					code = num1 + ' × ' + num2 + ' = ?';
 					break;
 			}
 		}
 
 		this.htmlDoms.code.html(code);
 
 	},//比對驗證碼
 	checkCode : function() {
 		if(this.options.type == 1) {		//普通驗證碼
 			var own_input = this.htmlDoms.code_input.val().toUpperCase();
 			this.code_chose = this.code_chose.toUpperCase();
 		}else {
 			var own_input = this.htmlDoms.code_input.val();
 		}
 
 		if(own_input == this.code_chose) {
 			this.options.success();
 		}else {
 			this.options.error();
 			this.setCode();
 		}
 	}
 };
 
 
 //定義Slide的建構函式
 var Slide = function(ele,this.defaults = {
 
 	type : 1,vOffset: 5,vSpace : 5,imgName : ['1.jpg',imgSize : {
	 	width: '400px',blockSize : {
	 	width: '50px',height: '50px',barSize : {
	 	width : '400px',error : function(){}
 
 },opt)
 };
 
 
 //定義Slide的方法
 Slide.prototype = {
 
 init: function() {
 	var _this = this;
 
 	//載入頁面
 	this.loadDom();
 	this.options.ready();
 
 	this.$element[0].onselectstart = document.body.ondrag = function(){
				return false;
			};
 
 	//按下
 	this.htmlDoms.move_block.on('touchstart',function(e) {
 		_this.start(e);
 	});
 
 	this.htmlDoms.move_block.on('mousedown',function(e) {
 		_this.start(e);
 	});
 
 	//拖動
  window.addEventListener("touchmove",function(e) {
  	_this.move(e);
  });
  window.addEventListener("mousemove",function(e) {
  	_this.move(e);
  });
 
  //滑鼠鬆開
  window.addEventListener("touchend",function() {
  	_this.end();
  });
  window.addEventListener("mouseup",function() {
  	_this.end();
  });
 
  //重新整理
  _this.$element.find('.verify-refresh').on('click',function() {
  	_this.refresh();
  });
 },//初始化載入
 loadDom : function() {
 	this.img_rand = Math.floor(Math.random() * this.options.imgName.length);			//隨機的背景圖片
 
 	var panelHtml = '';
 	var tmpHtml = '';
 
 	if(this.options.type != 1) {		//圖片滑動
 		panelHtml += '<div class="verify-img-panel">\
  <div class="verify-refresh">\
   <i class="iconfont icon-refresh"></i>\
  </div>\
   <div class="verify-gap"></div>\
  </div>';
 		tmpHtml = '<div class="verify-sub-block"></div>';
 	}
 
 	panelHtml += '<div class="verify-bar-area">\
  <span class="verify-msg">向右滑動完成驗證</span>\
  <div class="verify-left-bar">\
  <span class="verify-msg"></span>\
  <div class="verify-move-block">\
  <i class="verify-icon iconfont icon-right"></i>'+tmpHtml+'</div></div></div>';
 	this.$element.append(panelHtml);
 
 	this.htmlDoms = {
 		gap : this.$element.find('.verify-gap'),sub_block : this.$element.find('.verify-sub-block'),img_panel : this.$element.find('.verify-img-panel'),bar_area : this.$element.find('.verify-bar-area'),move_block : this.$element.find('.verify-move-block'),left_bar : this.$element.find('.verify-left-bar'),msg : this.$element.find('.verify-msg'),icon : this.$element.find('.verify-icon'),refresh :this.$element.find('.verify-refresh')
 	};
 
 	this.status = false;	//滑鼠狀態
 	this.setSize = this.resetSize(this);	//重新設定寬度高度
 
 	this.htmlDoms.gap.css({'width': this.options.blockSize.width,'height': this.options.blockSize.height});
 	this.htmlDoms.sub_block.css({'width': this.options.blockSize.width,'height': this.options.blockSize.height});
 	this.htmlDoms.img_panel.css({'width': this.setSize.img_width,'height': this.setSize.img_height,'background': 'url(images/'+this.options.imgName[this.img_rand]+')','background-size' : this.setSize.img_width + ' '+ this.setSize.img_height});
 	this.htmlDoms.bar_area.css({'width': this.setSize.bar_width,'height': this.options.barSize.height,'line-height':this.options.barSize.height});
 	this.htmlDoms.move_block.css({'width': this.options.barSize.height,'height': this.options.barSize.height});
 	this.htmlDoms.left_bar.css({'width': this.options.barSize.height,'height': this.options.barSize.height});
 
 	this.randSet();
 },//滑鼠按下
 start: function(e) {
 	this.htmlDoms.msg.text('');
 	this.htmlDoms.move_block.css('background-color','#337ab7');
 	this.htmlDoms.left_bar.css('border-color','#337AB7');
 	this.htmlDoms.icon.css('color','#fff');
 	e.stopPropagation();
 	this.status = true;
 },//滑鼠移動
 move: function(e) {
 	if(this.status) {
	  if(!e.touches) { //相容移動端
	  var x = e.clientX;
	  }else { //相容PC端
	  var x = e.touches[0].pageX;
	  }
	  var bar_area_left = Slide.prototype.getLeft(this.htmlDoms.bar_area[0]);
	  var move_block_left = x - bar_area_left; //小方塊相對於父元素的left值
	  if(this.options.type != 1) {		//圖片滑動
	  	if(move_block_left >= this.htmlDoms.bar_area[0].offsetWidth - parseInt(parseInt(this.options.blockSize.width)/2) - 2) {
	  	move_block_left = this.htmlDoms.bar_area[0].offsetWidth - parseInt(parseInt(this.options.blockSize.width)/2) - 2;
	  	}
	  }else {		//普通滑動
	  	if(move_block_left >= this.htmlDoms.bar_area[0].offsetWidth - parseInt(parseInt(this.options.barSize.height)/2) + 3) {
	  		this.$element.find('.verify-msg:eq(1)').text('鬆開驗證');
	  	move_block_left = this.htmlDoms.bar_area[0].offsetWidth - parseInt(parseInt(this.options.barSize.height)/2) + 3;
	  	}else {
	  		this.$element.find('.verify-msg:eq(1)').text('');
	  	}
	  }
 
 
	  if(move_block_left <= 0) {
  		move_block_left = parseInt(parseInt(this.options.blockSize.width)/2);
  	}
 
	  //拖動後小方塊的left值
	  this.htmlDoms.move_block.css('left',move_block_left-parseInt(parseInt(this.options.blockSize.width)/2) + "px");
	  this.htmlDoms.left_bar.css('width',move_block_left-parseInt(parseInt(this.options.blockSize.width)/2) + "px");
	 }
 },//滑鼠鬆開
 end: function() {
 
 	var _this = this;
 
 	//判斷是否重合
 	if(this.status) {
 
 		if(this.options.type != 1) {		//圖片滑動
 
 			var vOffset = parseInt(this.options.vOffset);
		  if(parseInt(this.htmlDoms.gap.css('left')) >= (parseInt(this.htmlDoms.move_block.css('left')) - vOffset) && parseInt(this.htmlDoms.gap.css('left')) <= (parseInt(this.htmlDoms.move_block.css('left')) + vOffset)) {
		  	this.htmlDoms.move_block.css('background-color','#5cb85c');
		  	this.htmlDoms.left_bar.css({'border-color': '#5cb85c','background-color': '#fff'});
		  	this.htmlDoms.icon.css('color','#fff');
		  	this.htmlDoms.icon.removeClass('icon-right');
		  	this.htmlDoms.icon.addClass('icon-check');
		  	this.htmlDoms.refresh.hide();
		  	this.htmlDoms.move_block.unbind('mousedown touchstart');
		  	this.options.success();
		  }else{
		  	this.htmlDoms.move_block.css('background-color','#d9534f');
		  	this.htmlDoms.left_bar.css('border-color','#d9534f');
		  	this.htmlDoms.icon.css('color','#fff');
		  	this.htmlDoms.icon.removeClass('icon-right');
		  	this.htmlDoms.icon.addClass('icon-close');
 
		  	setTimeout(function () {
					 	_this.htmlDoms.move_block.animate({'left':'0px'},'fast');
					 	_this.htmlDoms.left_bar.animate({'width': '40px'},'fast');
					 	_this.htmlDoms.left_bar.css({'border-color': '#ddd'});
 
					 	_this.htmlDoms.move_block.css('background-color','#fff');
					 	_this.htmlDoms.icon.css('color','#000');
					 	_this.htmlDoms.icon.removeClass('icon-close');
		  		_this.htmlDoms.icon.addClass('icon-right');
		  		_this.$element.find('.verify-msg:eq(0)').text('向右滑動完成驗證');
 
					 },400);
 
		  	this.options.error();
		  }
 
 		}else {		//普通滑動
 
 			if(parseInt(this.htmlDoms.move_block.css('left')) >= (parseInt(this.setSize.bar_width) - parseInt(this.options.barSize.height) - parseInt(this.options.vOffset))) {
 				this.htmlDoms.move_block.css('background-color','#5cb85c');
 				this.htmlDoms.left_bar.css({'color': '#4cae4c','border-color': '#5cb85c','background-color': '#fff' });
 				this.htmlDoms.icon.css('color','#fff');
		  	this.htmlDoms.icon.removeClass('icon-right');
		  	this.htmlDoms.icon.addClass('icon-check');
		  	this.htmlDoms.refresh.hide();
		  	this.htmlDoms.move_block.unbind('mousedown');
		  	this.htmlDoms.move_block.unbind('touchstart');
 				this.$element.find('.verify-msg:eq(1)').text('驗證成功');
 				this.options.success();
 			}else {
 
 				this.htmlDoms.move_block.css('background-color','#000');
					 	_this.htmlDoms.icon.removeClass('icon-close');
		  		_this.htmlDoms.icon.addClass('icon-right');
		  		_this.$element.find('.verify-msg:eq(0)').text('向右滑動解鎖');
 
					 },400);
 
		  	this.options.error();
 			}
 		}
 
	  this.status = false;
 	}
 },resetSize : function(obj) {
 	var img_width,img_height,bar_width,bar_height;	//圖片的寬度、高度，移動條的寬度、高度
 	var parentWidth = obj.$element.parent().width() || $(window).width();
 	var parentHeight = obj.$element.parent().height() || $(window).height();
 
 		if(obj.options.imgSize.width.indexOf('%')!= -1){
 		img_width = parseInt(obj.options.imgSize.width)/100 * parentWidth + 'px';
		　　}else {
				img_width = obj.options.imgSize.width;
			}
 
			if(obj.options.imgSize.height.indexOf('%')!= -1){
 		img_height = parseInt(obj.options.imgSize.height)/100 * parentHeight + 'px';
		　　}else {
				img_height = obj.options.imgSize.height;
			}
 
			if(obj.options.barSize.width.indexOf('%')!= -1){
 		bar_width = parseInt(obj.options.barSize.width)/100 * parentWidth + 'px';
		　　}else {
				bar_width = obj.options.barSize.width;
			}
 
			if(obj.options.barSize.height.indexOf('%')!= -1){
 		bar_height = parseInt(obj.options.barSize.height)/100 * parentHeight + 'px';
		　　}else {
				bar_height = obj.options.barSize.height;
			}
 
			return {img_width : img_width,img_height : img_height,bar_width : bar_width,bar_height : bar_height};
 	},//隨機出生點位
 randSet: function() {
 	var rand1 = Math.floor(Math.random()*9+1);
 	var rand2 = Math.floor(Math.random()*9+1);
 	var top = rand1 * parseInt(this.setSize.img_height)/15 + parseInt(this.setSize.img_height) * 0.1;
 	var left = rand2 * parseInt(this.setSize.img_width)/15 + parseInt(this.setSize.img_width) * 0.1;
 
 	this.$element.find('.verify-img-panel').css('margin-bottom',this.options.vSpace + 'px');
 	this.$element.find('.verify-gap').css({'top': top,'left': left});
  	this.$element.find('.verify-sub-block').css({'top':'-'+(parseInt(this.setSize.img_height)- top + this.options.vSpace + 2)+'px','background-image': 'url(images/'+this.options.imgName[this.img_rand]+')','background-size': this.setSize.img_width + ' '+ this.setSize.img_height,'background-position-y': '-'+top+ 'px','background-position-x': '-'+left+'px'});
 },//重新整理
 refresh: function() {
 	this.randSet();
 	this.img_rand = Math.floor(Math.random() * this.options.imgName.length);			//隨機的背景圖片
  this.$element.find('.verify-img-panel').css({'background': 'url(images/'+this.options.imgName[this.img_rand]+')','background-size': this.setSize.img_width + ' '+ this.setSize.img_height});
  this.$element.find('.verify-sub-block').css({'background-image': 'url(images/'+this.options.imgName[this.img_rand]+')','background-size': this.setSize.img_width + ' '+ this.setSize.img_height});
 },//獲取left值
 getLeft: function(node) {
			var left = $(node).offset().left;
//  var nowPos = node.offsetParent;
//
//  while(nowPos != null) {　　
//  left += $(nowPos).offset().left;　
//  nowPos = nowPos.offsetParent;　　
//  }
  return left;
 }
 };
 
 //定義Points的建構函式
 var Points = function(ele,this.defaults = {
 	defaultNum : 4,//預設的文字數量
		 checkNum : 3,//校對的文字數量
		 vSpace : 5,//間隔
 	imgName : ['1.jpg',opt)
 };
 
 //定義Points的方法
 Points.prototype = {
 	init : function() {
 
			var _this = this;
 
			//載入頁面
 	_this.loadDom();
 
 	_this.refresh();
 	_this.options.ready();
 
 	this.$element[0].onselectstart = document.body.ondrag = function(){
				return false;
			};
 
		 	//點選事件比對
 	_this.$element.find('.verify-img-panel canvas').on('click',function(e) {
 
				_this.checkPosArr.push(_this.getMousePos(this,e));
 
				if(_this.num == _this.options.checkNum) {
 
					_this.num = _this.createPoint(_this.getMousePos(this,e));
					setTimeout(function () {
						var flag = _this.comparePos(_this.fontPos,_this.checkPosArr);
 
						if(flag == false) {	//驗證失敗
 
							_this.options.error();
							_this.$element.find('.verify-bar-area').css({'color': '#d9534f','border-color': '#d9534f'});
						 _this.$element.find('.verify-msg').text('驗證失敗');
 
							setTimeout(function () {
								_this.$element.find('.verify-bar-area').css({'color': '#000','border-color': '#ddd'});
						 	_this.refresh();
						 },400);
 
						}else {	//驗證成功
							_this.$element.find('.verify-bar-area').css({'color': '#4cae4c','border-color': '#5cb85c'});
							_this.$element.find('.verify-msg').text('驗證成功');
							_this.$element.find('.verify-refresh').hide();
							_this.$element.find('.verify-img-panel').unbind('click');
							_this.options.success();
						}
					},400);
 
				}
 
				if(_this.num < _this.options.checkNum) {
					_this.num = _this.createPoint(_this.getMousePos(this,e));
				}
 
 	});
 
 	 //重新整理
  _this.$element.find('.verify-refresh').on('click',function() {
  	_this.refresh();
  });
 
 	},//載入頁面
 	loadDom : function() {
 
 		this.fontPos = [];	//選中的座標資訊
 		this.checkPosArr = [];	//使用者點選的座標
 		this.num = 1;	//點選的記數
 		this.img_rand = Math.floor(Math.random() * this.options.imgName.length);			//隨機的背景圖片
 
 	var panelHtml = '';
 	var tmpHtml = '';
 
 	this.setSize = Slide.prototype.resetSize(this);	//重新設定寬度高度
 
 	panelHtml += '<div class="verify-img-panel"><div class="verify-refresh" style="z-index:9999"><i class="iconfont icon-refresh"></i></div><canvas width="'+this.setSize.img_width+'" height="'+this.setSize.img_height+'"></canvas></div><div class="verify-bar-area"><span class="verify-msg"></span></div>';
 
 	this.$element.append(panelHtml);
 
 
 	this.htmlDoms = {
 		img_panel : this.$element.find('.verify-img-panel'),};
 
 		this.htmlDoms.img_panel.css({'width': this.setSize.img_width,'background-size' : this.setSize.img_width + ' '+ this.setSize.img_height,'margin-bottom': this.options.vSpace + 'px'});
 		this.htmlDoms.bar_area.css({'width': this.options.barSize.width,'line-height':this.options.barSize.height});
 
 	},//繪製合成的圖片
 	drawImg : function(obj,img) {
 		//準備canvas環境
	 	var canvas = this.$element.find('canvas')[0];
	 	//var canvas=document.getElementById("myCanvas");
	 	var ctx=canvas.getContext("2d");
 
	 	// 繪製圖片
	 	ctx.drawImage(img,parseInt(this.setSize.img_width),parseInt(this.setSize.img_height));
 
	 	// 繪製水印
	 	var fontSizeArr = ['italic small-caps bold 20px microsoft yahei','small-caps normal 25px arial','34px microsoft yahei'];
	 	var fontStr = '天地玄黃宇宙洪荒日月盈昃辰宿列張寒來暑往秋收冬藏閏餘成歲律呂調陽雲騰致雨露結為霜金生麗水玉出昆岡劍號巨闕珠稱夜光果珍李柰菜重芥姜海鹹河淡鱗潛羽翔龍師火帝鳥官人皇始制文字乃服衣裳推位讓國有虞陶唐弔民伐罪周發殷湯坐朝問道垂拱平章愛育黎首臣伏戎羌遐邇體率賓歸王';	//不重複的漢字
 
 
	 	var fontChars = [];
 
	 	var avg = Math.floor(parseInt(this.setSize.img_width)/(parseInt(this.options.defaultNum)+1));
	 	var tmp_index = '';
	 	var color2Num = Math.floor(Math.random() * 5);
 
	 	for(var i = 1; i <= this.options.defaultNum; i++) {
 
	 		fontChars[i-1] = this.getChars(fontStr,fontChars);
 
	 		tmp_index = Math.floor(Math.random()*3);
	 		ctx.font = fontSizeArr[tmp_index];
		 	ctx.fillStyle = _code_color2[color2Num];
 
		 	if(Math.floor(Math.random() * 2) == 1) {
		 		var tmp_y = Math.floor(parseInt(this.setSize.img_height)/2) + tmp_index*20 + 20;
		 	}else {
		 		var tmp_y = Math.floor(parseInt(this.setSize.img_height)/2) - tmp_index*20;
		 	}
 
		 	ctx.fillText(fontChars[i-1],avg * i,tmp_y);
		 	this.fontPos[i-1] = {'char': fontChars[i-1],'x': avg * i,'y': tmp_y};
 
	 	}
 
	 	for(var i = 0; i < (this.options.defaultNum-this.options.checkNum); i++) {
	 		this.shuffle(this.fontPos).pop();
	 	}
 
	 	var msgStr = '';
	 	for(var i = 0; i < this.fontPos.length; i++) {
	 		msgStr += this.fontPos[i].char + ',';
	 	}
 
	 	this.htmlDoms.msg.text('請順序點選【' + msgStr.substring(0,msgStr.length-1) + '】');
 
	 	return this.fontPos;
 	},//獲取座標
 	getMousePos :function(obj,event) {
  var e = event || window.event;
  var scrollX = document.documentElement.scrollLeft || document.body.scrollLeft;
  var scrollY = document.documentElement.scrollTop || document.body.scrollTop;
  var x = e.clientX - ($(obj).offset().left - $(window).scrollLeft());
 		var y = e.clientY - ($(obj).offset().top - $(window).scrollTop());
 
  return {'x': x,'y': y};
 	},//遞迴去重
 	getChars : function(fontStr,fontChars) {
 
 		var tmp_rand = parseInt(Math.floor(Math.random() * fontStr.length));
 		if(tmp_rand > 0) {
 			tmp_rand = tmp_rand - 1;
 		}
 
 		tmp_char = fontStr.charAt(tmp_rand);
 		if($.inArray(tmp_char,fontChars) == -1) {
 			return tmp_char;
 		}else {
 			return Points.prototype.getChars(fontStr,fontChars);
 		}
 	},//洗牌陣列
 	shuffle : function(arr) {
			var m = arr.length,i;
			while (m) {
				i = (Math.random() * m--) >>> 0;
				[arr[m],arr[i]] = [arr[i],arr[m]]
			}
			return arr;
		},//建立座標點
 	createPoint : function (pos) {
 		this.htmlDoms.img_panel.append('<div class="point-area" style="background-color:#1abd6c;color:#fff;z-index:9999;width:30px;height:30px;text-align:center;line-height:30px;border-radius: 50%;position:absolute;top:'+parseInt(pos.y-10)+'px;left:'+parseInt(pos.x-10)+'px;">'+this.num+'</div>');
 		return ++this.num;
 	},//比對座標點
 	comparePos : function (fontPos,checkPosArr) {
 
 		var flag = true;
 		for(var i = 0; i < fontPos.length; i++) {
 			if(!(parseInt(checkPosArr[i].x) + 40 > fontPos[i].x && parseInt(checkPosArr[i].x) - 40 < fontPos[i].x && parseInt(checkPosArr[i].y) + 40 > fontPos[i].y && parseInt(checkPosArr[i].y) - 40 < fontPos[i].y)) {
 				flag = false;
 				break;
 			}
 		}
 
 		return flag;
 	},//重新整理
 refresh: function() {
 	var _this = this;
 	this.$element.find('.point-area').remove();
 	this.fontPos = [];
 	this.checkPosArr = [];
 	this.num = 1;
 
 	this.img_rand = Math.floor(Math.random() * this.options.imgName.length);			//隨機的背景圖片
 	var img = new Image();
		 img.src = 'images/'+this.options.imgName[this.img_rand];
 
 
		 	// 載入完成開始繪製
		 	$(img).on('load',function(e) {
 		this.fontPos = _this.drawImg(_this,this);
 	});
 
 },};
 
 //在外掛中使用codeVerify物件
 $.fn.codeVerify = function(options,callbacks) {
 var code = new Code(this,options);
 code.init();
 };
 
 //在外掛中使用slideVerify物件
 $.fn.slideVerify = function(options,callbacks) {
 var slide = new Slide(this,options);
 slide.init();
 };
 
 //在外掛中使用clickVerify物件
 $.fn.pointsVerify = function(options,callbacks) {
 var points = new Points(this,options);
 points.init();
 };
 
})(jQuery,document);

到此這篇關於多種型別jQuery網頁驗證碼外掛程式碼例項的文章就介紹到這了,更多相關jQuery網頁驗證碼外掛內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！

多種型別jQuery網頁驗證碼外掛程式碼例項

html

verify.css

verify.js

多種型別jQuery網頁驗證碼外掛程式碼例項

Java Session驗證碼案例程式碼例項解析

Python模擬登入之滑塊驗證碼的破解(例項程式碼)

Java Web製作登入驗證碼實現程式碼解析

十三、識別登入頁面驗證碼（程式碼待優化）

Java製作驗證碼的完整例項程式碼

JavaScript列舉選擇jquery外掛程式碼例項

繪製微信小程式驗證碼功能的例項程式碼

CheckCode.js 前端驗證碼外掛

手機驗證碼相關程式碼

JavaScript函式封裝隨機顏色驗證碼(完整程式碼)

驗證碼外掛EasyCaptcha

基於Java驗證jwt token程式碼例項

Python完全識別驗證碼自動登入例項詳解

Java 騰訊驗證碼平臺使用例項

Springmvc請求引數型別轉換器及原生api程式碼例項

Mybatis分頁PageHelper外掛程式碼例項

vue實現四級導航及驗證碼的方法例項

java 隨機生成6位簡訊驗證碼例項程式碼

Android 自定義驗證碼輸入框的例項程式碼(支援貼上連續性)

多種型別jQuery網頁驗證碼外掛程式碼例項

html

verify.css

verify.js

相關推薦