纯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. WXS---基础类库

  2. 《ucore lab1 exercise6》实验报告

    资源 ucore在线实验指导书 我的ucore实验代码 题目:完善中断初始化和处理 请完成编码工作和回答如下问题: 中断描述符表(也可简称为保护模式下的中断向量表)中一个表项占多少字节?其中哪几位代表 ...

  3. 通过docker安装elasticsearch和安装ik分词器插件及安装kibana

    前提: 已经安装好docker运行环境: 步骤: 1.安装elasticsearch 6.2.2版本,目前最新版是7.2.0,这里之所以选择6.2.2是因为最新的SpringBoot2.1.6默认支持 ...

  4. Pytorch 网络结构可视化

    安装 conda install graphvizconda install tensorwatch 载入库 import sysimport torchimport tensorwatch as t ...

  5. [Nuget] - "Runtime error: Could not load file or assembly 'System.Web.WebPages.Razor, Version=3.0.0.0'" 问题之解决

    环境 项目中使用了 System.Web.WebPages.Razor, Version=3.0.0.0,Nuget 还原缺失包后自动更新至 Version=3.2.5.0,编译成功,运行失败. 错误 ...

  6. java实现屏幕截屏功能

    最近在项目中遇到这样一个需求,用户生成推广海报想要发送给朋友,但是推广海报是用html网页写的,这时候想要分享给朋友的话只能用户自己手机截图,显然这样的用户体验是不友好的,如果可以给用户一个按钮实现一 ...

  7. 十分钟快速入门 Python，看完即会，不用收藏！

    本文以 Eric Matthes 的<Python编程:从入门到实践>为基础,以有一定其他语言经验的程序员视角,对书中内容提炼总结,化繁为简,将这本书的精髓融合成一篇10分钟能读完的文章. ...

  8. Python-17-反射

    一.什么是反射 反射的概念是由Smith在1982年首次提出的,主要是指程序可以访问.检测和修改它本身状态或行为的一种能力(自省).这一概念的提出很快引发了计算机科学领域关于应用反射性的研究.它首先被 ...

  9. net namespace实验

    Net namespace实验 在 Linux 中,网络名字空间可以被认为是隔离的拥有单独网络栈(网卡.路由转发表.iptables)的环境.网络名字空间经常用来隔离网络设备和服务,只有拥有同样网络名 ...

  10. Kubernetes(k8s) docker 修改 /dev/shm大小

    一.问题 /dev/shm在/etc/fstab中挂载,对应tmpfs,实际使用的是内存的空间.默认情况下,/dev/shm为物理内存大小的一半. 在Kubernetes上跑docker,发现/dev ...