纯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>