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插件FusionCharts实现的3D帕累托图效果示例【附demo源码】
Mar 25 jQuery
jquery将标签元素的高设为屏幕的百分比
Apr 19 jQuery
jQuery使用JSONP实现跨域获取数据的三种方法详解
May 04 jQuery
jQuery Collapse1.1.0折叠插件简单使用
Aug 28 jQuery
jquery如何实现点击空白处隐藏元素
Dec 05 jQuery
jQuery实现文件编码成base64并通过AJAX上传的方法
Apr 12 jQuery
jQuery插件实现弹性运动完整示例
Jul 07 jQuery
jQuery实现的导航条点击后高亮显示功能示例
Mar 04 jQuery
基于jQuery的时间戳与日期间的转化
Jun 21 jQuery
jQuery实现弹出层效果
Dec 10 jQuery
jQuery实现的图片点击放大缩小功能案例
Jan 02 jQuery
jquery实现抽奖功能
Oct 22 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
MySQL授权问题总结
2007/05/06 PHP
据说是雅虎的一份PHP面试题附答案
2009/01/07 PHP
一个简单php扩展介绍与开发教程
2010/08/19 PHP
关于IIS php调用com组件的权限问题
2012/01/11 PHP
浅析PHP原理之变量分离/引用(Variables Separation)
2013/08/09 PHP
解决PhpMyAdmin中导入2M以上大文件限制的方法分享
2014/06/06 PHP
PHP魔术引号所带来的安全问题分析
2014/07/15 PHP
laravel5.2实现区分前后台用户登录的方法
2017/01/11 PHP
php file_get_contents取文件中数组元素的方法
2017/04/01 PHP
PHP魔术方法之__call与__callStatic使用方法
2017/07/23 PHP
php获取微信openid方法总结
2019/10/10 PHP
jQuery基础知识filter()和find()实例说明
2010/07/06 Javascript
基于jQuery的message插件实现右下角弹出消息框
2011/01/11 Javascript
jQuery ajax(复习)—Baidu ajax request分离版
2013/01/24 Javascript
a标签的href和onclick 的事件的区别介绍
2013/07/26 Javascript
jQuery实现冻结表头的方法
2015/03/09 Javascript
JS计算输出100元钱买100只鸡问题的解决方法
2018/01/04 Javascript
JS设计模式之策略模式概念与用法分析
2018/02/05 Javascript
基于vue+uniapp直播项目实现uni-app仿抖音/陌陌直播室功能
2019/11/12 Javascript
Vue中keep-alive 实现后退不刷新并保持滚动位置
2020/03/17 Javascript
解决vue-router 切换tab标签关闭时缓存问题
2020/07/22 Javascript
[03:45]Newbee战队出征西雅图 决战2016国际邀请赛
2016/08/02 DOTA
Python语言实现机器学习的K-近邻算法
2015/06/11 Python
Python实现更改图片尺寸大小的方法(基于Pillow包)
2016/09/19 Python
linux环境下python中MySQLdb模块的安装方法
2017/06/16 Python
python通过opencv实现批量剪切图片
2017/11/13 Python
python如何制作缩略图
2019/04/30 Python
Python配置虚拟环境图文步骤
2019/05/20 Python
python版DDOS攻击脚本
2019/06/12 Python
Pandas中DataFrame的分组/分割/合并的实现
2019/07/16 Python
python绘制封闭多边形教程
2020/02/18 Python
实现ECharts双Y轴左右刻度线一致的例子
2020/05/16 Python
python获取整个网页源码的方法
2020/08/03 Python
使用Python中tkinter库简单gui界面制作及打包成exe的操作方法(二)
2020/10/12 Python
学校食堂标语
2014/10/06 职场文书
公安干警正风肃纪心得体会
2016/01/15 职场文书