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类,如下:
随机推荐
- Delphi中String类型原理介绍
Delphi中字符串的操作很简单,但幕后情况却相当复杂.Pascal传统的字符串操作方法与Windows不同,Windows吸取了C语言的字符串操作方法.32位Delphi中增加了长字符串类型,该类型 ...
- QT第一天学习
sudo apt-get install libqt4-dev回顾: 面向对象方法: 封装.继承.多态 封装:类 数据和操作 实现了信息隐藏 public: 类的内部 类的外部 private: pr ...
- UWP锁、解屏后无法响应操作
UWP的Unity项目,在PC上运行时,如果锁屏(手动或自动)再解锁,游戏画面和进度正常,但是无法进行鼠标.键盘或手柄的操作.这Bug在很多线上的Unity项目中存在. 原因:UWP App的系统事件 ...
- 部署statspack工具(二)之解决方案2
解决方案二:在emp2的empno列上面创建索引,再执行share_pool_sql_1.sh脚本,查看sp报告 8.1在emp2的empno列上创建索引 sys@TESTDB12>create ...
- 用Redis作为Mysql数据库的缓存
看到一篇不错的博文,记录下: http://blog.csdn.net/qtyl1988/article/details/39553339 http://blog.csdn.net/qtyl1988/ ...
- Spring util-namespace下标签相关操作
java代码 package com.stono.sprtest; import java.util.List; import java.util.Map; import java.util.Set; ...
- 负载均衡软件LVS分析二(安装)
一. 安装LVS软件 1.安装前准备工作操作系统:统一采用Centos4.4版本.地址规划,如表1所示:表1 更详细的信息如图2所示: 图2 LVS DR模式安装部署结构图 图2中的VIP指的是虚 ...
- 对于python的__name__="__main__"的含义的理解
学习python的时候经常会看到python 中__name__ = \'__main__\' 这样的代码,可能很多新手一开始学习的时候都比较疑惑,python 中__name__ = '__main ...
- WinForm 控件(下)
10.PictureBox 外观,Image可以选择图片路径行为,SizeMode可以设置图片大小布局方式 11.Imagelist--图片集 imageList1.Images[n]; 12.not ...
- 蓝桥网试题 java 入门训练 圆的面积
---------------------------------------------------------------------------------------------------- ...