jQuery区分大小写验证码输入框js代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery区分大小写验证码输入框js代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery区分大小写验证码输入框</title>
<!--//引用css-->
<link href="css/jquery.idcode.css" type="text/css" rel="stylesheet">

</head>
<body>
<center><br><br>
<input type="text" id ="Txtidcode" class ="txtVerification"><span id="idcode"></span>
<input type="button" id="butn" value="提交"></center>
<script src="js/jquery-1.12.3.min.js"></script>
<!--//引用idcode插件-->
<script src="js/jquery.idcode.js"></script>
<script>
    $.idcode.setCode();   //加载生成验证码方法
    $("#butn").click(function(){
        var IsBy = $.idcode.validateCode()  //调用返回值，返回值结果为true或者false
        if(IsBy){
            alert("验证码输入正确")
        }else {
            alert("请重新输入")
        }
    })
</script>
</body>
</html>

JS代码(jquery.idcode.js):

/** * idcode 1.0 - validate user. * Version 1.0 * @requires jQuery v1.2 * author ehong[idehong@gmail.com] **/
/** * @example:$.idcode.setCode();
	* @desc:Make a validate code append to the element that id is idcode. * * @example $.idcode.validateCode();
	* @desc return true if user input value equal idcode. **/
(function($){
	var settings ={
	e:'idcode',codeType:{
	name:'follow',len:4}
,codeTip:'refresh?',inputID:'Txtidcode' //引用验证码输入框Id}
;
	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="#" onblur="return false" onfocus="return false" oncontextmenu="return false" onclick="$.idcode.setCode()">' + _setStyle(codeObj) + '</div>' + '<span id="ehong-code-tip-ck" class="ehong-code-val-tip" onclick="$.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);

CSS代码(jquery.idcode.css):

@charset "utf-8";/* track base 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;}

附件:下载该文件资源,减少时间成本(增值服务)