jQuery实现一个简单的验证码功能


Posted in jQuery onJune 26, 2017

在学习jQuery过程中,写的一个简单的验证码的小例子,记载下来,方便以后借鉴补充,源码如下:

<!DOCTYPE html> 
<html> 
<head> 
  <title></title> 
  <style type="text/css"> 
  div{ 
    background-color:blue; 
    width:200px; 
    height:100px; 
    font-size:35px; 
  } 
  </style> 
  <script src="../jquery-1.8.0.js" type="text/javascript"></script> 
  <script type="text/javascript"> 
    $(document).ready(function() { 
       //我写的验证码 
      //验证码 
      var code; 
      function createCode(){ 
        code = '';//首先默认code为空字符串 
        var codeLength = 4;//设置长度,这里看需求,我这里设置了4 
        var codeV = $("div"); 
        //设置随机字符 
        var random = 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++){ //循环codeLength 我设置的4就是循环4次   
           var index = Math.floor(Math.random()*36); //设置随机数范围,这设置为0 ~ 36  
           code += random[index]; //字符串拼接 将每次随机的字符 进行拼接 
      } 
        codeV.text(code);//将拼接好的字符串赋值给展示的Value 
      } 
      //页面开始加载验证码 
      createCode(); 
      //验证码Div加载点击事件 
      $("div").bind('click',function() { 
          createCode(); 
        }); 
      //下面就是判断是否==的代码,无需解释 
      $("#b1").bind('click',function() { 
         var oValue = $("#in1").val().toUpperCase(); 
         $("#l1").html(""); 
        if(oValue ==""){ 
          $("#l1").html("<font color='red'>请输入验证码</font>"); 
        }else if(oValue != code){ 
          $("#l1").html("<font color='red'>验证码不正确,请重新输入</font>"); 
          oValue = ""; 
          createCode(); 
        }else{ 
          $("#l1").html("<font color='blue'>验证码正确</font>"); 
        } 
      });  
    }); 
  </script> 
</head> 
<body> 
<center> 
<label >请输入验证码:</label><input type="text" id="in1" value="" placeholder="请输入验证码"> 
<button id="b1">点击验证</button> 
  <div></div><label id="l1"></label> 
</center> 
</body> 
</html>
jQuery 相关文章推荐
jQuery获取table下某一行某一列的值实现代码
Apr 07 jQuery
jQuery序列化后的表单值转换成Json
Jun 16 jQuery
jquery图片放大镜效果
Jun 23 jQuery
jQuery dateRangePicker插件使用方法详解
Jul 28 jQuery
jQuery实现用户信息表格的添加和删除功能
Sep 12 jQuery
jQuery EasyUI window窗口使用实例代码
Dec 25 jQuery
jQuery实现鼠标响应式透明度渐变动画效果示例
Feb 13 jQuery
JQuery实现ajax请求的示例和注意事项
Dec 10 jQuery
jQuery实现条件搜索查询、实时取值及升降序排序的方法分析
May 04 jQuery
jquery树形插件zTree高级使用详解
Aug 16 jQuery
jQuery实现消息弹出框效果
Dec 10 jQuery
jQuery中event.target和this的区别详解
Aug 13 jQuery
jQuery+C#实现参数RSA加密传输功能【附jsencrypt.js下载】
Jun 26 #jQuery
jQuery实现frame之间互通的方法
Jun 26 #jQuery
jQuery回调方法使用示例
Jun 26 #jQuery
jQuery实现拖动效果的实例代码
Jun 25 #jQuery
jQuery validata插件实现方法
Jun 25 #jQuery
jQuery鼠标移动图片上实现放大效果
Jun 25 #jQuery
jquery图片放大镜效果
Jun 23 #jQuery
You might like
《Re:从零开始的异世界生活 冰结之绊》
2020/04/09 日漫
BBS(php &amp; mysql)完整版(八)
2006/10/09 PHP
php基于curl扩展制作跨平台的restfule 接口
2015/05/11 PHP
浅谈COOKIE和SESSION区别
2015/07/19 PHP
PHP自定义图片缩放函数实现等比例不失真缩放的方法
2016/08/19 PHP
PHP简单实现解析xml为数组的方法
2018/05/02 PHP
JavaScript 使用技巧精萃(.net html
2009/04/25 Javascript
jQuery实现的立体文字渐变效果
2010/05/17 Javascript
读jQuery之三(构建选择器)
2011/06/11 Javascript
纯文字版返回顶端的js代码
2013/08/01 Javascript
JS实现弹性菜单效果代码
2015/09/07 Javascript
微信小程序中使元素占满整个屏幕高度实现方法
2016/12/14 Javascript
VSCode搭建Vue项目的方法
2020/04/30 Javascript
[00:37]2016完美“圣”典风云人物:rOtk宣传片
2016/12/09 DOTA
浅谈python中字典append 到list 后值的改变问题
2018/05/04 Python
详解PyCharm+QTDesigner+PyUIC使用教程
2019/06/13 Python
利用python实现后端写网页(flask框架)
2021/02/28 Python
css3给背景图片加颜色遮罩的方法
2019/11/05 HTML / CSS
HTML5 canvas 基本语法
2009/08/26 HTML / CSS
印度在线内衣和时尚目的地:Zivame
2017/09/28 全球购物
水果花束:Fruit Bouquets
2017/12/20 全球购物
英国女性时尚精品店:THE DRESSING ROOM
2018/05/23 全球购物
摩飞电器俄罗斯官方网站:Morphy Richards俄罗斯
2020/07/30 全球购物
Java 中访问数据库的步骤?Statement 和PreparedStatement 之间的区别?
2012/06/05 面试题
银行员工职业规划范文
2014/01/21 职场文书
学校学雷锋活动总结
2014/06/26 职场文书
2014年大学班级工作总结
2014/11/14 职场文书
法定代表人证明书
2014/11/28 职场文书
教师年度个人总结
2015/02/11 职场文书
实习护士自荐信
2015/03/25 职场文书
搬迁通知
2015/04/20 职场文书
如何写好开幕词?
2019/06/24 职场文书
《暗黑破坏神2:重制版》本周进行第一轮A测 目前可官网进行申请报名
2021/04/07 其他游戏
Python爬取某拍短视频
2021/06/11 Python
详解python网络进程
2021/06/15 Python
python geopandas读取、创建shapefile文件的方法
2021/06/29 Python