分享一个很好用的验证码插件代码

之前做表单验证一般都是网站系统自动的验证码，今天做专题页面要加前台验证就找了一个验证码的插件，感觉这个还挺方便实用的， 下面不多说，直接把插件代码分享给大家，希望对大家有用。

html代码：

css代码：

#ehong-code-input{
	width:42px;
	letter-spacing:2px;
	margin:0px 8px 0px 0px;
}
.ehong-idcode-val{
	position:relative;
	padding:1px 4px 1px 4px;
	top:0px;
	*top:-3px;
	letter-spacing:4px;
	display:inline;
	cursor:pointer;
	font-size:16px;
	font-family:"Courier New", Courier, monospace;
	text-decoration:none;
	font-weight:bold;
}
.ehong-idcode-val0{
	border:solid 1px #A4CDED;
	background-color:#ECFAFB;
}

.ehong-idcode-val1{
	border:solid 1px #A4CDED;
	background-color:#FCEFCF;
}
.ehong-idcode-val2{
	border:solid 1px #6C9;
	background-color:#D0F0DF;
}
.ehong-idcode-val3{
	border:solid 1px #6C9;
	background-color:#DCDDD8;
}
.ehong-idcode-val4{
	border:solid 1px #6C9;
	background-color:#F1DEFF;
}
.ehong-idcode-val5{
	border:solid 1px #6C9;
	background-color:#ACE1F1;
}
.ehong-code-val-tip{
	font-size:12px;
	color:#1098EC;
	top:0px;
	*top:-3px;
	position:relative;
	margin:0px 0px 0px 4px;
	cursor:pointer;
}

js代码：

(function($){
	var settings = {
			e	 		: 'idcode',
			codeType 	: { name : 'follow', len: 4},
			codeTip		: '看不清，换一组',
			inputID		: ''
		};

	var _set = {
		storeLable  : 'codeval',
		store		: '#ehong-code-input',
		codeval		: '#ehong-code'
	}
	$.idcode = {
		getCode:function(option){
			_commSetting(option);
			return _storeData(_set.storeLable, null);
		},
		setCode:function(option){
			_commSetting(option);
			_setCodeStyle("#"+settings.e, settings.codeType.name, settings.codeType.len);

		},
		validateCode:function(option){
			_commSetting(option);
			var inputV;
			if(settings.inputID){
				inputV=$('#' + settings.inputID).val();
			}else{
				inputV=$(_set.store).val();
			}

			if(inputV == _storeData(_set.storeLable, null)){
				return true;
			}else{
				_setCodeStyle("#"+settings.e, settings.codeType.name, settings.codeType.len);
				return false;
			}
		}
	};

	function _commSetting(option){
		$.extend(settings, option);
	}

	function _storeData(dataLabel, data){
		var store = $(_set.codeval).get(0);
		if(data){
			$.data(store, dataLabel, data);
		}else{
			return $.data(store, dataLabel);
		}
	}

	function _setCodeStyle(eid, codeType, codeLength){
		var codeObj = _createCode(settings.codeType.name, settings.codeType.len);
		var randNum = Math.floor(Math.random()*6);
		var htmlCode=''
		if(!settings.inputID){
			htmlCode='';
		}
		htmlCode+='
' + _setStyle(codeObj) + '
' + ''+ settings.codeTip +'';
		$(eid).html(htmlCode);
		_storeData(_set.storeLable, codeObj);
	}

	function _setStyle(codeObj){
		var fnCodeObj = new Array();
		var col = new Array('#BF0C43', '#E69A2A','#707F02','#18975F','#BC3087','#73C841','#780320','#90719B','#1F72D8','#D6A03C','#6B486E','#243F5F','#16BDB5');
		var charIndex;
	   	for(var i=0;i' + codeObj.charAt(i) + '');
		}
		return fnCodeObj.join('');
	}
	function _createCode(codeType, codeLength){
	   var codeObj;
	   if(codeType=='follow'){
		   codeObj = _createCodeFollow(codeLength);
	   }else if(codeType=='calc'){
		   codeObj = _createCodeCalc(codeLength);
	   }else{
		   codeObj="";
	   }
	   return codeObj;
	 }

	 function _createCodeCalc(codeLength){
	   var code1, code2, codeResult;
	   var selectChar = new Array('0','1','2','3','4','5','6','7','8','9');
	   var charIndex;
	   for(var i=0;i 
  
 JQuery库文件相信大家都有，在这里就不发了，效果图如下：
 
  
 
 
  
 欢迎转载，转载请注明出处：WEB前端开发 » 分享一个很好用的验证码插件代码