纯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. react——Table组件

    /* * 构建数据列 * */ tableColumns = (currentData) => { let group = lodashGroupBy(currentData, 'level1' ...

  2. 伸缩布局 Flex

    其中在webkit内核的浏览器中使用时,必须加上-webkit-前缀,采用Flex布局的元素,称为Flex容器(flex container),简称”容器”.它的所有子元素自动成为容器成员,称为Fle ...

  3. Elasticsearch配置安装

    跨域  elasticsearch-head连接es时会提示连接失败,有可能就是没有开启跨域 http.cors.enabled 是否支持跨域,默认为false http.cors.allow-ori ...

  4. Ubuntu 软件卸载脚本（卸载软件 + 移除配置文件 + 移除依赖项）

    #!/bin/bash function z-apt-uninstall() { if [ ! $1 ] then echo "z-apt-uninstall error: software ...

  5. CodeForces-166B-Polygons

    B. Polygons time limit per test:2 seconds memory limit per test:256 megabytes input:standard input o ...

  6. Python05之常用操作符

    主要有三类:算数运算符,比较运算符,逻辑运算符 一.算数运算符: 加(+)减(-)乘(*)除(/)幂运算(**)地板除(//)取余数(%) 注:/和//的区别: 数据1 / 数据2 = 数据3   ( ...

  7. php面向对象之封装

    OOP三大特性:封装.继承和多态,简称封继态. 封装 类2使用关键字extends继承类1,之后,类1为类2的父类,简称父类,类2是类1的子类,简称子类.使用关键字new,实例化类1,得到对象1,对象 ...

  8. 2019年6月12日——开始记录并分享学习心得——Python3.7中对列表进行排序

    Python中对列表的排序按照是排序是否可以恢复分为:永久性排序和临时排序. Python中对列表的排序可以按照使用函数的不同可以分为:sort( ), sorted( ), reverse( ). ...

  9. Golang_学习资料

    个人推荐: http://godeye.org/index.php?a=course&id=6 http://mikespook.com/learning-go/ http://coolshe ...

  10. xorm表结构操作实例

    获取数据库信息 package main import ( "fmt" _ "github.com/go-sql-driver/mysql" "git ...