2020-12-30

最新推荐文章于 2023-11-15 09:49:28 发布

转载最新推荐文章于 2023-11-15 09:49:28 发布 · 575 阅读

CC 4.0 BY-SA版权

原文链接：https://blog.youkuaiyun.com/leeandmins/article/details/47380787?ops_request_misc=%25257B%252522request%25255Fid%252522%25253A%252522160929657716780261936926%252522%25252C%252522scm%252522%25253A%25252220140713.130102334..%252522%25257D&request_id=16092965771678

本文分享了一种在前端实现表单验证的便捷方式，通过引入jQuery插件来创建和验证动态验证码。插件提供了不同样式的验证码，并且允许用户更换验证码。在网页中加入此插件，可以增强用户体验并提高表单的安全性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

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='<span><input id="ehong-code-input" type="text" maxlength="4" /></span>';
	}
	htmlCode+='<div id="ehong-code" class="ehong-idcode-val ehong-idcode-val';
	htmlCode+=String(randNum);
	htmlCode+='" href="#" οnblur="return false" οnfοcus="return false" οncοntextmenu="return false" οnclick="$.idcode.setCode()">' + _setStyle(codeObj) + '</div>' + '<span id="ehong-code-tip-ck" class="ehong-code-val-tip" οnclick="$.idcode.setCode()">'+ settings.codeTip +'</span>';
	$(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.length;i++){
		charIndex = Math.floor(Math.random()*col.length);
		fnCodeObj.push('<font color="' + col[charIndex] + '">' + codeObj.charAt(i) + '</font>');
	}
	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<codeLength;i++){
	   charIndex = Math.floor(Math.random()*selectChar.length);
	   code1 +=selectChar[charIndex];

	   charIndex = Math.floor(Math.random()*selectChar.length);
	   code2 +=selectChar[charIndex];
   }
   return [parseInt(code1), parseInt(code2) , parseInt(code1) + parseInt(code2)] ;
 }

 function _createCodeFollow(codeLength){
   var code = "";
   var selectChar = new Array('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');

   for(var i=0;i<codeLength;i++){
	   var charIndex = Math.floor(Math.random()*selectChar.length);
	   if(charIndex % 2 == 0){
		   code+=selectChar[charIndex].toLowerCase();
	   }else{
		   code +=selectChar[charIndex];
	   }
   }
   return code;
 }

})(jQuery);
JQuery库文件相信大家都有，在这里就不发了，效果图如下：