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插件制作 自增长输入框实现代码
Aug 17 jQuery
jQuery中map函数的两种方式
Apr 07 jQuery
为Jquery EasyUI 组件加上清除功能的方法(详解)
Apr 13 jQuery
jQuery+ajax实现修改密码验证功能实例详解
Jul 06 jQuery
jquery中有哪些api jQuery主要API
Nov 20 jQuery
jQuery EasyUI window窗口使用实例代码
Dec 25 jQuery
jQuery基于闭包实现的显示与隐藏div功能示例
Jun 09 jQuery
使用异步controller与jQuery实现卷帘式分页
Jun 18 jQuery
jquery分页优化操作实例分析
Aug 23 jQuery
jQuery模仿ToDoList实现简单的待办事项列表
Dec 30 jQuery
9种方法优化jQuery代码详解
Feb 04 jQuery
jquery实现上传文件进度条
Mar 26 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
世界收音机发展史
2021/03/01 无线电
php打开文件fopen函数的使用说明
2013/07/05 PHP
Zend Framework过滤器Zend_Filter用法详解
2016/12/09 PHP
PHP文件管理之实现网盘及压缩包的功能操作
2017/09/20 PHP
Laravel使用swoole实现websocket主动消息推送的方法介绍
2019/10/20 PHP
为超链接加上disabled后的故事
2010/12/10 Javascript
JQuery页面图片切换和新闻列表滚动效果的具体实现
2013/09/26 Javascript
JS根据变量保存方法名并执行方法示例
2014/04/04 Javascript
Javascript仿PHP $_GET获取URL中的参数
2014/05/12 Javascript
JS逆序遍历实现代码
2014/12/02 Javascript
原生javascript实现匀速运动动画效果
2016/02/26 Javascript
浅谈window.onbeforeunload() 事件调用ajax
2016/06/29 Javascript
JavaScript兼容性总结之获取非行间样式案例
2016/08/07 Javascript
基于js的变量提升和函数提升(详解)
2017/09/17 Javascript
深入理解JavaScript和TypeScript中的class
2018/04/22 Javascript
JS模拟实现哈希表及应用详解
2018/05/04 Javascript
jQuery仿移动端支付宝键盘的实现代码
2018/08/15 jQuery
vue移动端下拉刷新和上拉加载的实现代码
2018/09/08 Javascript
在vue使用clipboard.js进行一键复制文本的实现示例
2019/01/15 Javascript
layui表格数据重载
2019/07/27 Javascript
Vue实现点击按钮复制文本内容的例子
2019/11/09 Javascript
原生js+css实现tab切换功能
2020/09/17 Javascript
js canvas实现俄罗斯方块
2020/10/11 Javascript
python 解析html之BeautifulSoup
2009/07/07 Python
win10系统中安装scrapy-1.1
2016/07/03 Python
matplotlib设置legend图例代码示例
2017/12/19 Python
基于python 爬虫爬到含空格的url的处理方法
2018/05/11 Python
基于python实现音乐播放器代码实例
2020/07/01 Python
Python实现我的世界小游戏源代码
2021/03/02 Python
策划主管的工作职责
2013/11/24 职场文书
宿舍违规检讨书
2014/01/12 职场文书
2014年药店工作总结
2014/11/20 职场文书
Python insert() / append() 用法 Leetcode实战演示
2021/03/31 Python
如何理解Vue简单状态管理之store模式
2021/05/15 Vue.js
SpringBoot接入钉钉自定义机器人预警通知
2022/07/15 Java/Android
postgresql中如何执行sql文件
2023/05/08 PostgreSQL