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.form.js异步提交表单详解
Apr 25 jQuery
jQuery层级选择器_动力节点节点Java学院整理
Jul 04 jQuery
jQuery Validate格式验证功能实例代码(包括重名验证)
Jul 18 jQuery
jQuery模拟爆炸倒计时功能实例代码
Aug 21 jQuery
jquery 输入框查找关键字并提亮颜色的实例代码
Jan 23 jQuery
jQuery 实现批量提交表格多行数据的方法
Aug 09 jQuery
使用jquery DataTable和ajax向页面显示数据列表的方法
Aug 09 jQuery
jQuery pager.js 插件动态分页功能实例分析
Aug 02 jQuery
jQuery实现图片随机切换、抽奖功能(实例代码)
Oct 23 jQuery
jQuery+ajax实现用户登录验证
Sep 13 jQuery
jQuery插件实现图片轮播效果
Oct 19 jQuery
jquery实现点击左右按钮切换图片
Jan 27 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
第十节 抽象方法和抽象类 [10]
2006/10/09 PHP
php动态生成JavaScript代码
2009/03/09 PHP
PHP迅雷、快车、旋风下载专用链转换代码
2010/06/15 PHP
php读取文件内容至字符串中,同时去除换行、空行、行首行尾空格(Zjmainstay原创)
2012/07/31 PHP
php实现改变图片直接打开为下载的方法
2015/04/14 PHP
Laravel框架学习笔记之批量更新数据功能
2019/05/30 PHP
jquery validate poshytip 自定义样式
2012/11/26 Javascript
Bootstrap Table的使用总结
2016/10/08 Javascript
jQuery实现的简单排序功能示例【冒泡排序】
2017/01/13 Javascript
JS实现旋转木马式图片轮播效果
2017/01/18 Javascript
详解从Node.js的child_process模块来学习父子进程之间的通信
2017/03/27 Javascript
node.js+captchapng+jsonwebtoken实现登录验证示例
2017/08/17 Javascript
JavaScript callback回调函数用法实例分析
2018/05/08 Javascript
jQuery实现导航样式布局操作示例【可自定义样式布局】
2018/07/24 jQuery
微信小程序如何刷新当前界面的实现方法
2019/06/07 Javascript
js实现自动播放匀速轮播图
2020/02/06 Javascript
js仿淘宝放大镜效果
2020/12/28 Javascript
如何在 Vue 中使用 JSX
2021/02/14 Vue.js
Python中Collection的使用小技巧
2014/08/18 Python
Python列表(list)、字典(dict)、字符串(string)基本操作小结
2014/11/28 Python
使用Nginx+uWsgi实现Python的Django框架站点动静分离
2016/03/21 Python
使用python验证代理ip是否可用的实现方法
2018/07/25 Python
python实现合并多个list及合并多个django QuerySet的方法示例
2019/06/11 Python
python如何保证输入键入数字的方法
2019/08/23 Python
解决django model修改添加字段报错的问题
2019/11/18 Python
Python 实现进度条的六种方式
2021/01/06 Python
selenium与xpath之获取指定位置的元素的实现
2021/01/26 Python
Python的Tqdm模块实现进度条配置
2021/02/24 Python
香港永安旅游网:Wing On Travel
2017/04/10 全球购物
体育教师自我鉴定
2014/02/12 职场文书
大学生个人自荐信
2014/02/24 职场文书
司法局群众路线教育实践活动整改措施思想汇报
2014/10/13 职场文书
2015年党员创先争优承诺书
2015/01/22 职场文书
实用求职信模板范文
2019/05/13 职场文书
六年级作文之自救
2019/12/19 职场文书
详解MongoDB的条件查询和排序
2021/06/23 MongoDB