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

2024-09-27 22:50:25

在学习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点击输入框显示验证码图片

先看效果图: 要求:当输入框获得焦点时,自动显示验证图片. 代码如下(学习而已,仅供参考): /***********************下是验证码对象*****************/ var Validation = {}; Validation.init = function(eleName,imageSrc){ this.image = imageSrc; $('#'+eleName).focusin(function(){ Validation.show(eleName); })
Jquery插件实现点击获取验证码后60秒内禁止重新获取

通过jquery.cookie.js插件可以快速实现"点击获取验证码后60秒内禁止重新获取(防刷新)"的功能效果图: 先到官网(http://plugins.jquery.com/cookie/)下载cookie插件,放到相应文件夹,代码如下: 复制代码代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv=&qu
PHP+jQuery 注册模块的改进（一）：验证码存入SESSION

需要修改的几个文件: ①register.php 生成随机数和加密值把register.html改为register.php,并开启session: 把register.js中生成随机数的函数写在register.php中,并改用php方法 <?php session_start();?> .... <?php //生成随机数函数 function showval(){ $num = ""; for($i=0;$i<4;$i++){ $tmp = rand(1
jquery禁止输入数字以外的字符的示例(纯数字验证码)

纯数字验证码的时候用到的,整理如下: 复制代码代码如下: $('#mobile-vcode').unbind();$("#mobile-vcode").bind("keyup change",function () { $(this).val($(this).val().replace(/\D/g,'')); if($(this).val().length==4){ /*ajax检测验证码是否正确,正确则激活按钮*/ }});
jquery实现手机发送验证码的倒计时代码

复制代码代码如下: var wait=60;//时间 function time(o,p) {//o为按钮的对象,p为可选,这里是60秒过后,提示文字的改变 if (wait == 0) { o.removeAttr("disabled"); o.val("点击发送验证码");//改变按钮中value的值 p.html("如果您在1分钟内没有收到验证码,请检查您填写的手机号码是否正确或重新发送"); wait = 60; } else { o.
jQuery插件实现静态HTML验证码校验

jQuery由美国人John Resig创建,它是一个快速.简洁的JavaScript库,提供了很多遍历函数,如each(fn).jQuery能够使用户的html页保持代码和html内容分离,也就是说,不用再在html里面插入一堆js来调用命令了,只需定义id即可.正是这些操作上的特点,用户可以方便地处理HTML文档.事件.实现动画效果,并且方便地为网站提供交互.如今,jQuery已经吸引了来自世界各地的众多JavaScript高手加入. 这里所要讲到的jQuery Real Person Pl
JQuery实现简单验证码提示解决方案

先看效果图: 要求:当输入框获得焦点时,自动显示验证图片. 代码如下(学习而已,仅供参考): 复制代码代码如下: /***********************下是验证码对象*****************/ var Validation = {}; Validation.init = function(eleName,imageSrc){ this.image = imageSrc; $('#'+eleName).focusin(function(){ Validation.show(e
jQuery实现一个简单的验证码功能

在学习jQuery过程中,写的一个简单的验证码的小例子,记载下来,方便以后借鉴补充,源码如下: <!DOCTYPE html> <html> <head> <title></title> <style type="text/css"> div{ background-color:blue; width:200px; height:100px; font-size:35px; } </style> <
Python实现简单生成验证码功能【基于random模块】

本文实例讲述了Python实现简单生成验证码功能.分享给大家供大家参考,具体如下: 验证码一般用来验证登陆.交易等行为,减少对端为机器操作的概率,python中可以使用random模块,char()内置函数来实现一个简单的验证码功能. import random def veri_code(): li = [] for i in range(6): #循环6次,生成6个字符 r = random.randrange(0, 5) #随机生成0-4之间的数字 if r == 1 or r == 4:
用python实现一个简单的验证码

我们经常在登录一个网站,或者注册的时候需要输入一个验证码,有时候觉得很烦,因为有些验证码不仅复杂还看不清,许多用户就会因为这些而懒得再登录或者注册之类的. 既然验证码会造成流失用户的风险,为什么大家都还要使用验证码呢? 这是验证码在一定程度上起到保护网站安全的作用,比如防止大规模恶意注册(比如手机验证码形式,一机一户),再比如反爬虫(至少不会轻易让你爬取数据)等,你看用户基数最大的12306,就会有各种验证码. 既然验证码这么重要,它的原理是什么?是怎么实现的? 它的原理其实很简单,就是在服务器
jquery.onoff实现简单的开关按钮功能(推荐)

插件下载地址: http://xiazai.jb51.net/201803/yuanma/jquery.onoff(jb51.net).rar 一个按钮小插件,首先引入css和js <script type="text/javascript" src="../js/jquery-1.11.3.js" ></script> <link rel="stylesheet" href="../js/dist/jqu
Python实现一个简单的验证码程序

老师讲完random函数,自己写的,虽然和老师示例的不那么美观,智能,但是也自己想出来的,所以记录一下,代码就需要自己不断的自己练习,实战,才能提高啊!不然就像我们这些大部分靠自学的人,何时能学会.还有就是,这次听老师的,把自己的代码添加注释,所以这次把很简单的代码都写上了注释,而且很大白话,不管有没有接触过python的,我相信仔细看了,肯定能看懂.如果看完,再自己尝试着默写出来,那就是更好到了,好了进入正题: 自己写的: __Author__ = "Zhang Peng" impo
使用Lucene实现一个简单的布尔搜索功能

什么是lucene Lucene是apache软件基金会jakarta项目组的一个子项目,是一个开放源代码的全文检索引擎工具包,但它不是一个完整的全文检索引擎,而是一个全文检索引擎的架构,提供了完整的查询引擎和索引引擎,部分文本分析引擎(英文与德文两种西方语言). Lucene是一个全文搜索框架,而不是应用产品.因此它并不像www.baidu.com 或者google Desktop那么拿来就能用,它只是提供了一种工具让你能实现这些产品. 在布尔查询的对象中,包含一个子句的集合,各个子句间都是如
php实现的简单中文验证码功能示例

本文实例讲述了php实现的简单中文验证码功能.分享给大家供大家参考,具体如下: img.php <?php session_start(); /*for($i=0;$i<4;$i++) { $rand .= dechex(rand(1,15)); } $_SESSION[check_pic] = $rand; */ $image = imagecreatetruecolor(100, 30); $bg = imagecolorallocate($image, 0, 0, 0); $color
jQuery基于扩展简单实现倒计时功能的方法

本文实例讲述了jQuery基于扩展简单实现倒计时功能的方法.分享给大家供大家参考,具体如下: jQuery.fn.countDown = function(settings,to) { settings = jQuery.extend({ startFontSize: '36px', endFontSize: '12px', duration: 1000, startNumber: 10, endNumber: 0, callBack: function() { } }, settings);
jQuery实现的简单悬浮层功能完整实例

本文实例讲述了jQuery实现的简单悬浮层功能.分享给大家供大家参考,具体如下: 运行效果图如下: 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml
自己封装的一个简单的倒计时功能实例

因为平常工作中很常用到该功能,所以就利用这次国庆假期,重新梳理与对原有代码进行改善,再集成一个常用的功能,最终封装出这个"简单倒计时"功能. 该倒计时方法具有以下该功能: 1. 根据指定日期与当前的电脑时间进行匹配 2. 通过指定一个数组参数,来设置在每一天内不同的时间段进行倒计时. * 该方法还未通过实际工作的检测,稳定性未知(如果实际工作通过,会删除这段话) function countDown(date,target,filter){ var setTime = new Date

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

相关推荐

随机推荐