Jquery 客户端生成验证码
验证码的作用:
1.有效防止这种问题对某一个特定注册用户用特定程序暴力破解方式进行不断的登陆尝试,实际上是用验证码是现在很多网站通行的方式(比如招商银行的网上个人银行,腾讯的QQ社区),我们利用比较简易的方式实现了这个功能。
2.防止批量注册 首先要准备jquery、jquery.idcode.css 和 jquery.idcode.js 三个脚本,然后再html文档中进行实例生成。 jquery.idcode.css 样式:
@charset "utf-8";
/* track base Css */ .ehong-idcode-val{
position:relative;
padding:1px 4px 1px 4px;
top:0px;
*top:-3px;
letter-spacing:4px;
display:inline;
cursor:pointer;
font-size:20px;
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;
}
jquery.idcode.css
jquery.idcode.js 脚本:
(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);
jquery.idcode.js
jquery 的脚本从官网上下载即可。 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>
Jquery 客户端生成验证码的更多相关文章
- 基于CANVAS与MD5的客户端生成验证码
好久没写东西,工作太忙了!不想服务端请求太多,搞了个这玩意儿,不过项目中并不会用上,还是使用服务端生成的机制(会安全多少呢?):我就想问个问题,除了图像识别来破解这样的简单验证码外,针对我这种例子,可 ...
- jQuery.qrcode.js客户端生成二维码,支持中文并且可以生成LOGO
描述: jquery.qrcode.js 是一个能够在客户端生成矩阵二维码QRCode 的jquery插件 ,使用它可以很方便的在页面上生成二维条码.此插件是能够独立使用的,体积也比较 ...
- servlet生成验证码
1.因为朋友们都说现在很少用java自带的图形用户接口,所以小白的我就没去看awt和swing组件,因为要抓紧时间学习后面的,完了出去找工作,等以后再回来了解awt和swing:所以制作验证码的代码是 ...
- nodejs 生成验证码
此方法需要nodejs 安装canvas 扩展 准备工作 以Linux为例 1.服务器gcc版本需4.8以上 2.安装所需扩展 yum install cairo cairo-devel cairom ...
- Django(十六)基于模板的登录案例:登录装饰器、csrf攻击方式及防护、ajax的Post 的csrf开启写法、生成验证码、加验证码登录、反向解析+传参
一.csrf攻击 1.1 csrf攻击(跨站请求伪造) [csrf攻击即]:通过第3方网站,伪造请求(前提条件是你已经登录正常网站,并保存了session或cookie登录信息且没有退出),第三方网站 ...
- java web学习总结(九) -------------------通过Servlet生成验证码图片
一.BufferedImage类介绍 生成验证码图片主要用到了一个BufferedImage类,如下:
- ASP.NET ashx实现无刷新页面生成验证码
现在大部分网站登陆时都会要求输入验证码,在网上也看了一些范例,现在总结一下如何实现无刷新页面生成验证码. 效果图: 实现方式: 前台: <div> <span>Identify ...
- JavaWeb---总结(九)通过Servlet生成验证码图片
一.BufferedImage类介绍 生成验证码图片主要用到了一个BufferedImage类,如下: 创建一个DrawImage Servlet,用来生成验证码图片 1 package gacl. ...
- javaweb学习总结(九)—— 通过Servlet生成验证码图片
一.BufferedImage类介绍 生成验证码图片主要用到了一个BufferedImage类,如下:
随机推荐
- HDU-1701-ACMer
题目链接 http://acm.hdu.edu.cn/showproblem.php?pid=1701 解题: 好久没做题,好久没写解题思路了,连简答题都不会做了,下午的月赛挂了,我悲剧了,在此发牢骚 ...
- localToLocal坐标变换
localToLocal坐标变换 $(function() { init(); }); // localtoLocal var stage, arm, handler; function init(e ...
- Ubuntu 14.04下搭建Node.js的开发环境
最近想找一个轻量级且支持快速开发的服务开发平台,选来选去选择了Node.js,当时有几种选择: Python + Django(用过Django,虽然开发快速,但是感觉性能并不太好). Ruby + ...
- 程序启动缓慢-原来是hbm.xml doctype的原因
<!DOCTYPE hibernate-mapping PUBLIC "-//Hibernate/Hibernate Mapping DTD 3.0//EN" "h ...
- Bootstrap入门(十七)组件11:分页与标签
Bootstrap入门(十七)组件11:分页与标签 1.默认样式的分页 2.分页的大小 3.禁用的分页 4.翻页的效果 5.两端对齐的分页 6. 标签的不同样式 7. 标签的大小 先引入本地的 ...
- zabbix3.2.3安装部署
安装nginx [root@xuegod64 ~]# yum install -y gcc gcc-c++ autoconf automake zlib zlib-devel openssl open ...
- BZOJ2002(分块)
Bounce 弹飞绵羊 Time Limit:10000MS Memory Limit:265216KB 64bit IO Format:%lld & %llu Submit ...
- RAS 加密 解密
蚂蚁金服电话面试时,问到了RAS加密解密,感觉回答的有点模糊,遂写个例子加深一下印象 package cheng.test.cipher;import java.io.FileInputStream; ...
- Git合并分支命令:git merge --ff
今天研究了一下git merge命令常用参数,并分别用简单的例子实验了一下,整理如下: 输入git merge -h可以查看相关参数: --ff 快速合并,这个是默认的参数.如果合并过程出现冲突,G ...
- tomcat启动异常、和web.xml缺少配置异常
错误如下: 14-Feb-2017 10:50:00.665 SEVERE [RMI TCP Connection(3)-127.0.0.1] org.apache.catalina.core.Sta ...