纯js验证码

<!DOCTYPE html>

<html>

    <head>

        <title>纯js验证码</title>

    </head>

<style>

#code{font-family:Arial; font-style:italic; font-weight:bold; border:0; letter-spacing:2px; color:blue;  }

</style>

<script src="https://lib.baomitu.com/jquery/3.4.1/jquery.js"></script>

<body>

    <div style="width:300px;">

        <span class="web-form-span " >验证码：</span>

        <input  type="text" class=" web-form-input " required="required" id="Yzm" style="width: 30%;float: initial;" >

        <input type = "button" id="code" value="点我验证" class="btn-list-btn" onclick="createCode()"/>

    </div>

</body>

<script>

    //在全局定义验证码

    var code;

    //产生验证码

    function createCode(){

        code = "";

        var codeLength = 4;//验证码的长度

        var checkCode = document.getElementById("code");

        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',

            '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++) {//循环操作

            var index = Math.floor(Math.random()*62);//取得随机数的索引（0~61）

            code += random[index];//根据索引取得随机数加到code上

        }

        checkCode.value = code;//把code值赋给验证码

    }

    //校验验证码

    document.getElementById("Yzm").addEventListener("change",validate);

    //验证事件

    function validate(){

        var inputCode = document.getElementById("Yzm").value.toUpperCase(); //取得输入的验证码并转化为大写

        if(inputCode.length <= 0) { //若输入的验证码长度为0

        　　alert("请输入验证码！"); //则弹出请输入验证码

        　　$("#Yzm").focus();

        　　YZM = false;

        } else if(inputCode != code ) { //若输入的验证码与产生的验证码不一致时

        　　alert("验证码输入错误！@_@"); //则弹出验证码输入错误

        　　createCode();//刷新验证码

        　　$("#Yzm").val("");//清空文本框

        　　$("#Yzm").focus();//重新聚焦验证码框

        　　YZM = false;

        } else { //输入正确时

        　　$("#Yzm").blur();//绑定验证码输入正确时要做的事

        　　YZM = true;

        　　alert("验证码正确！");

        }

    };

</script>

</html>

纯js验证码的更多相关文章

  1. 纯JS实现俄罗斯方块，打造属于你的游戏帝国

    纯JS俄罗斯方块,打造属于你的游戏帝国. 本文原始作者博客 http://www.cnblogs.com/toutou 俄罗斯方块(Tetris, 俄文:Тетрис)是一款电视游戏机和掌上游戏机游戏 ...

  2. F2工作流引擎之-纯JS Web在线可拖拽的流程设计器（八）

          Web纯JS流程设计器无需编程,完全是通过鼠标拖.拉.拽的方式来完成,支持串行.并行.分支.异或分支.M取N路分支.会签.聚合.多重聚合.退回.传阅.转交,都可以非常方便快捷地实现,管理员 ...

  3. ［原创］纯JS实现网页中多选复选框checkbox和单选radio的美化效果

    图片素材: 最终效果图: <html><title> 纯JS实现网页中多选复选框checkbox和单选radio的美化效果</title><head>& ...

  4. 纯js异步无刷新请求(只支持IE)

    纯js异步无刷新请求 下载地址:http://pan.baidu.com/s/1slakL1F 所以因为非IE浏览器都禁止跨域请求,所以以只支持IE. <HTML> <!-- 乱码( ...

  5. [分享黑科技]纯js突破localstorage存储上线，远程抓取图片，并转码base64保存本地，最终实现整个网站所有静态资源离线到用户手机效果却不依赖浏览器的缓存机制，单页应用最新黑科技

    好久没有写博客了,想到2年前答应要放出源代码的也没放出来,最近终于有空先把纯js实现无限空间大小的本地存储的功能开源了,项目地址https://github.com/xueduany/localsto ...

  6. 纯js实现复制到剪贴板功能

    在网页上复制文本到剪切板,一般是使用JS+Flash结合的方法,网上有很多相关文章介绍.随着 HTML5 技术的发展,Flash 已经在很多场合不适用了,甚至被屏蔽.本文介绍的一款JS插件,实现了纯J ...

  7. js 验证码 倒计时60秒

    js 验证码 倒计时60秒 <input type="button" id="btn" value="免费获取验证码" /> & ...

  8. baguetteBox.js响应式画廊插件(纯JS)

    baguetteBox.js baguetteBox.js 是一个简单和易于使用lightbox纯JavaScript脚本,拥有图像放大缩小并带有相应的CSS3过度,并能在触摸屏等设备上完美展示. D ...

  9. 纯js和纯css+html制作的手风琴的效果

    一:纯css+html的手风琴效果 这种用css写的手风琴比较简单,主要是应用到css中的,transition属性. 代码如下: <!DOCTYPE HTML> <html> ...

随机推荐

  1. Linux查看CPU和内存使用情况总结

    Linux查看CPU和内存使用情况:http://www.cnblogs.com/xd502djj/archive/2011/03/01/1968041.html 在做Linux系统优化的时候,物理内 ...

  2. git如何新建分支

    1) 切换到基础分支,如主干 git checkout master 2)创建并切换到新分支 git checkout -b panda git branch可以看到已经在panda分支上 3)更新分 ...

  3. Rsync同步部署web服务端配置

    Rsync同步部署web服务端配置 1,参数详解: -v, --verbose 详细模式输出. -q, --quiet 精简输出模式. -c, --checksum 打开校验开关,强制对文件传输进行校 ...

  4. MySQL(四）InnoDB中一棵B+树能存多少行数据

    一.InnoDB一棵B+树可以存放多少行数据?(约2千万) 我们都知道计算机在存储数据的时候,有最小存储单元,这就好比我们今天进行现金的流通最小单位是一毛.在计算机中磁盘存储数据最小单元是扇区,一个扇 ...

  5. pandas对时间列分组求diff遇到的问题

    例子: df = pd.DataFrame() df['A'] = [1, 1, 2] df['B'] = [datetime.date(2018, 1, 2), datetime.date(2018 ...

  6. stm32片上ADC转换实验

    原理图所示: BAT_DET 接到PB0 引脚,VSYS 是直流3.7V的电压.再来看下103的adc转换和引脚GPIO的关系 我们直接选用ADC1 根据上表格只能使用通道8 下面给我常用的ADC1寄 ...

  7. Go语言学习笔记(10)——错误处理示例

    // 定义一个 DivideError 结构 type DivideError struct { dividee int divider int } // 实现 `error` 接口 func (de ...

  8. my linux cmd

    常用的linux命令 一.vi yy 复制当前行 u 撤销 p 粘贴 dd 删除当前行 set nu 显示行号 gg 首行 G 末行 二.用户管理相关 useradd 添加用户   (默认创建一个与用 ...

  9. [Luogu5324][BJOI2019]删数(线段树)

    CF风格题,先猜结论,记数列中i这个数共出现了cnt[i]次,那么所有区间[i-cnt[i]+1,i]的并集的补集大小就是答案. 于是我们只需要线段树维护每个位置是否被某个区间覆盖到即可,对于整体加减 ...

  10. Golang安装和配置

    Golang安装和配置 Linux Golang 下载源码,解压. # /home/superpika为你的主目录 mkdir /home/superpika/go mkdir /home/super ...