纯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. Docker - 在CentOS7.5中升级Docker版本

    1 - 检查当前版本 [root@localhost ~]# uname -a Linux localhost.localdomain 3.10.0-957.el7.x86_64 #1 SMP Thu ...

  2. Python常见的异常

    Python中常见的异常如表所示. exception的更多用法: 1.通常else 语句只有在没有异常的情况下才会被执行 try: aa = "异常测试:" print(aa)e ...

  3. 安装本地 jar 文件

    Maven 提供了 maven-install-plugin 可将 jar 文件安装至本地 repository.安装命令如下: mvn install:install-file -Dfile= -D ...

  4. PHP替代session的方法

    PHP替代session的方法 服务器集群的时候 会发现session的问题 一般采用redis 来代替 用账号作为key 因为redis能主从 所以打算用替代session的方法1 cookie代替 ...

  5. LeetCode 108. 将有序数组转换为二叉搜索树(Convert Sorted Array to Binary Search Tree) 14

    108. 将有序数组转换为二叉搜索树 108. Convert Sorted Array to Binary Search Tree 题目描述 将一个按照升序排列的有序数组,转换为一棵高度平衡二叉搜索 ...

  6. Recurrent neural network (RNN) - Pytorch版

    import torch import torch.nn as nn import torchvision import torchvision.transforms as transforms # ...

  7. C之typedef

    1.1 typedef 解析: 1.typedef是一个关键字: 2.typedef它的对象必须是一个类型: 3.作用:给类型取一个别名 1.2 typedef 格式 : typedef  类型    ...

  8. QT json数据的应用(cJSON)

    json数据可保存小量的数据在本地的json文件中.QT有两种方式操作:(1).cJSON (2).QT的操作json数据的类. 应用:将监控预案数据保存在本地中. 1.首先根据预案结构创建一个jso ...

  9. Android 7.0 之后相机/文件读写等权限获取方式改变，导致开启相机闪退

    在 Android 7.0 之前 Google 提供的动态申请权限的 API,可以调用相机拍照,访问SDcard等操作都只需要申请对应的权限,如下: <uses-permission andro ...

  10. NodeJS入门--环境搭建 IntelliJ IDEA

    NodeJS入门–环境搭建 IntelliJ IDEA 本人也刚开始学习NodeJS,所以以此做个笔记,欢迎大家提出意见. 1.首先 下载安装NodeJS,下载安装IntelliJ IDEA 2.接下 ...