验证码的作用:

  1.有效防止这种问题对某一个特定注册用户用特定程序暴力破解方式进行不断的登陆尝试,实际上是用验证码是现在很多网站通行的方式(比如招商银行的网上个人银行,腾讯的QQ社区),我们利用比较简易的方式实现了这个功能。

  1.   2.防止批量注册
  2.  
  3. 首先要准备jqueryjquery.idcode.css jquery.idcode.js 三个脚本,然后再html文档中进行实例生成。
  4.  
  5. jquery.idcode.css 样式:
  1. @charset "utf-8";
  2. /* track base Css */
  3.  
  4. .ehong-idcode-val{
  5. position:relative;
  6. padding:1px 4px 1px 4px;
  7. top:0px;
  8. *top:-3px;
  9. letter-spacing:4px;
  10. display:inline;
  11. cursor:pointer;
  12. font-size:20px;
  13. font-family:"Courier New", Courier, monospace;
  14. text-decoration:none;
  15. font-weight:bold;
  16. }
  17. .ehong-idcode-val0{
  18. border:solid 1px #A4CDED;
  19. background-color:#ECFAFB;
  20. }
  21.  
  22. .ehong-idcode-val1{
  23. border:solid 1px #A4CDED;
  24. background-color:#FCEFCF;
  25. }
  26. .ehong-idcode-val2{
  27. border:solid 1px #6C9;
  28. background-color:#D0F0DF;
  29. }
  30. .ehong-idcode-val3{
  31. border:solid 1px #6C9;
  32. background-color:#DCDDD8;
  33. }
  34. .ehong-idcode-val4{
  35. border:solid 1px #6C9;
  36. background-color:#F1DEFF;
  37. }
  38. .ehong-idcode-val5{
  39. border:solid 1px #6C9;
  40. background-color:#ACE1F1;
  41. }
  42. .ehong-code-val-tip{
  43. font-size:12px;
  44. color:#1098EC;
  45. top:0px;
  46. *top:-3px;
  47. position:relative;
  48. margin:0px 0px 0px 4px;
  49. cursor:pointer;
  50. }

jquery.idcode.css

  1. jquery.idcode.js 脚本:
  1. (function($){
  2. var settings = {
  3. e : 'idcode',
  4. codeType : { name : 'follow', len: 4},
  5. codeTip : 'refresh?',
  6. inputID : 'Txtidcode' //引用验证码输入框Id
  7. };
  8.  
  9. var _set = {
  10. storeLable : 'codeval',
  11. store : '#ehong-code-input',
  12. codeval : '#ehong-code'
  13. }
  14. $.idcode = {
  15. getCode:function(option){
  16. _commSetting(option);
  17. return _storeData(_set.storeLable, null);
  18. },
  19. setCode:function(option){
  20. _commSetting(option);
  21. _setCodeStyle("#"+settings.e, settings.codeType.name, settings.codeType.len);
  22.  
  23. },
  24. validateCode:function(option){
  25. _commSetting(option);
  26. var inputV;
  27. if(settings.inputID){
  28. inputV=$('#' + settings.inputID).val();
  29. }else{
  30. inputV=$(_set.store).val();
  31. }
  32.  
  33. if(inputV == _storeData(_set.storeLable, null)){
  34. return true;
  35. }else{
  36. _setCodeStyle("#"+settings.e, settings.codeType.name, settings.codeType.len);
  37. return false;
  38. }
  39. }
  40. };
  41.  
  42. function _commSetting(option){
  43. $.extend(settings, option);
  44. }
  45.  
  46. function _storeData(dataLabel, data){
  47. var store = $(_set.codeval).get(0);
  48. if(data){
  49. $.data(store, dataLabel, data);
  50. }else{
  51. return $.data(store, dataLabel);
  52. }
  53. }
  54.  
  55. function _setCodeStyle(eid, codeType, codeLength){
  56. var codeObj = _createCode(settings.codeType.name, settings.codeType.len);
  57. var randNum = Math.floor(Math.random()*6);
  58. var htmlCode=''
  59. if(!settings.inputID){
  60. htmlCode='<span><input id="ehong-code-input" type="text" maxlength="4" /></span>';
  61. }
  62. htmlCode+='<div id="ehong-code" class="ehong-idcode-val ehong-idcode-val';
  63. htmlCode+=String(randNum);
  64. 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>';
  65. $(eid).html(htmlCode);
  66. _storeData(_set.storeLable, codeObj);
  67. }
  68.  
  69. function _setStyle(codeObj){
  70. var fnCodeObj = new Array();
  71. var col = new Array('#BF0C43', '#E69A2A','#707F02','#18975F','#BC3087','#73C841','#780320','#90719B','#1F72D8','#D6A03C','#6B486E','#243F5F','#16BDB5');
  72. var charIndex;
  73. for(var i=0;i<codeObj.length;i++){
  74. charIndex = Math.floor(Math.random()*col.length);
  75. fnCodeObj.push('<font color="' + col[charIndex] + '">' + codeObj.charAt(i) + '</font>');
  76. }
  77. return fnCodeObj.join('');
  78. }
  79. function _createCode(codeType, codeLength){
  80. var codeObj;
  81. if(codeType=='follow'){
  82. codeObj = _createCodeFollow(codeLength);
  83. }else if(codeType=='calc'){
  84. codeObj = _createCodeCalc(codeLength);
  85. }else{
  86. codeObj="";
  87. }
  88. return codeObj;
  89. }
  90.  
  91. function _createCodeCalc(codeLength){
  92. var code1, code2, codeResult;
  93. var selectChar = new Array('0','1','2','3','4','5','6','7','8','9');
  94. var charIndex;
  95. for(var i=0;i<codeLength;i++){
  96. charIndex = Math.floor(Math.random()*selectChar.length);
  97. code1 +=selectChar[charIndex];
  98.  
  99. charIndex = Math.floor(Math.random()*selectChar.length);
  100. code2 +=selectChar[charIndex];
  101. }
  102. return [parseInt(code1), parseInt(code2) , parseInt(code1) + parseInt(code2)] ;
  103. }
  104.  
  105. function _createCodeFollow(codeLength){
  106. var code = "";
  107. 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');
  108.  
  109. for(var i=0;i<codeLength;i++){
  110. var charIndex = Math.floor(Math.random()*selectChar.length);
  111. if(charIndex % 2 == 0){
  112. code+=selectChar[charIndex].toLowerCase();
  113. }else{
  114. code +=selectChar[charIndex];
  115. }
  116. }
  117. return code;
  118. }
  119.  
  120. })(jQuery);

jquery.idcode.js

  1. jquery 的脚本从官网上下载即可。
  2.  
  3. html代码部分:
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5.  
  6. <title>jQuery区分大小写验证码</title>
  7.  
  8. <!--//引用css-->
  9. <link href="css/jquery.idcode.css" type="text/css" rel="stylesheet">
  10. </head>
  11. <body>
  12. <center><br><br>
  13. <input type="text" id ="Txtidcode" class ="txtVerification"><span id="idcode"></span>
  14. <input type="button" id="butn" value="提交"></center>
  15. <script src="js/jquery-1.12.3.min.js"></script>
  16. <!--//引用idcode插件-->
  17. <script src="js/jquery.idcode.js"></script>
  18. <script>
  19. $.idcode.setCode(); //加载生成验证码方法
  20. $("#butn").click(function(){
  21. var IsBy = $.idcode.validateCode() //调用返回值,返回值结果为true或者false
  22. if(IsBy){
  23. alert("验证码输入正确")
  24. }else {
  25. alert("请重新输入")
  26. }
  27. })
  28. </script>
  29.  
  30. </body>
  31. </html>
  1.  
  1.  
  1.  

Jquery 客户端生成验证码的更多相关文章

  1. 基于CANVAS与MD5的客户端生成验证码

    好久没写东西,工作太忙了!不想服务端请求太多,搞了个这玩意儿,不过项目中并不会用上,还是使用服务端生成的机制(会安全多少呢?):我就想问个问题,除了图像识别来破解这样的简单验证码外,针对我这种例子,可 ...

  2. jQuery.qrcode.js客户端生成二维码,支持中文并且可以生成LOGO

    描述: jquery.qrcode.js 是一个能够在客户端生成矩阵二维码QRCode 的jquery插件 ,使用它可以很方便的在页面上生成二维条码.此插件是能够独立使用的,体积也比较         ...

  3. servlet生成验证码

    1.因为朋友们都说现在很少用java自带的图形用户接口,所以小白的我就没去看awt和swing组件,因为要抓紧时间学习后面的,完了出去找工作,等以后再回来了解awt和swing:所以制作验证码的代码是 ...

  4. nodejs 生成验证码

    此方法需要nodejs 安装canvas 扩展 准备工作 以Linux为例 1.服务器gcc版本需4.8以上 2.安装所需扩展 yum install cairo cairo-devel cairom ...

  5. Django(十六)基于模板的登录案例:登录装饰器、csrf攻击方式及防护、ajax的Post 的csrf开启写法、生成验证码、加验证码登录、反向解析+传参

    一.csrf攻击 1.1 csrf攻击(跨站请求伪造) [csrf攻击即]:通过第3方网站,伪造请求(前提条件是你已经登录正常网站,并保存了session或cookie登录信息且没有退出),第三方网站 ...

  6. java web学习总结(九) -------------------通过Servlet生成验证码图片

    一.BufferedImage类介绍 生成验证码图片主要用到了一个BufferedImage类,如下:

  7. ASP.NET ashx实现无刷新页面生成验证码

    现在大部分网站登陆时都会要求输入验证码,在网上也看了一些范例,现在总结一下如何实现无刷新页面生成验证码. 效果图: 实现方式: 前台: <div> <span>Identify ...

  8. JavaWeb---总结(九)通过Servlet生成验证码图片

    一.BufferedImage类介绍 生成验证码图片主要用到了一个BufferedImage类,如下: 创建一个DrawImage Servlet,用来生成验证码图片  1 package gacl. ...

  9. javaweb学习总结(九)—— 通过Servlet生成验证码图片

    一.BufferedImage类介绍 生成验证码图片主要用到了一个BufferedImage类,如下:

随机推荐

  1. MYSQL外键的使用以及优缺点

    主键和索引是不可少的,不仅可以优化数据检索速度,开发人员还省不其它的工作, 矛盾焦点:数据库设计是否需要外键.这里有两个问题:一个是如何保证数据库数据的完整性和一致性:二是第一条对性能的影响. 正方观 ...

  2. jquery换肤

    <script src="script/jquery-2.1.0.js"></script>      <link href="style/ ...

  3. Socket-IOS

    Socke Socket又称"套接字” 网络上的两个程序通过一个双向的通信连接实现数据的交换,这个连接的一端称为一个socket. 应用程序通常通过"套接字"向网络发出请 ...

  4. linux命令行模式下对FTP服务器进行文件上传下载

    参考源:点击这里查看   1. 连接ftp服务器 格式:ftp [hostname| ip-address]a)在linux命令行下输入: ftp 192.168.1.1 b)服务器询问你用户名和密码 ...

  5. requests从api中获取数据并存放到mysql中

    python的requests库是一个非常强大的库,requests的安装方法十分简单,用: pip install requests 即可安装requests,安装成功后: import reque ...

  6. [html5] 学习笔记-改良的input元素种类

    在html5中,大幅度增加与改良了input元素的种类,可以简单的使用这些元素来实现之前需要JS脚本来实现的功能. 1.url类型.email类型.date类型.time类型.datetime类型.d ...

  7. 内功心法 -- java.util.ArrayList<E> (3)

    写在前面的话:读书破万卷,编码如有神--------------------------------------------------------------------下文主要对java.util ...

  8. json基础教程|理解Json

    一. 在异步应用程序中发送和接收信息时,可以选择以纯文本和 XML 作为数据格式.这一期讨论一种有用的数据格式 JavaScript Object Notation(JSON),以及如何使用它更轻松地 ...

  9. 利用canvas制作乱跑的小球

    canvas制作乱跑的小球 说明:将下面的代码放到html的body就可以,键盘控制上(W)下(S)左(A)右(D) <body> <canvas id="canvas&q ...

  10. MongoDB学习总结(二) —— 基本操作命令(增删改查)

    上一篇介绍了MongoDB在Windows平台下的安装,这一篇介绍一下MongoDB的一些基本操作命令. 下面我们直奔主题,用简单的实例依次介绍一下. > 查看所有数据库 (show dbs) ...