JavaScript实现登录验证码验证功能

html:

<input type="text" id="input1">
<input type="button" id="checkCode" class="code" style="width:60px"onclick="createCode()">
<a href="###" onclick="createCode()">看不清楚</a>
<input id="Button1" onclick="validate();" type="button" value="确定">

Js:

var code; //在全局 定义验证码
function createCode() {
    code = new Array();
    var codeLength = 4; //验证码的长度
    var checkCode = document.getElementById("checkCode");
    checkCode.value = "";
    var selectChar = new Array(2, 3, 4, 5, 6, 7, 8, 9, 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'J', 'K', 'L', 'M', 'N', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z');
    for (var i = 0; i < codeLength; i++) {
        var charIndex = Math.floor(Math.random() * 32);
        code += selectChar[charIndex];
    }
    if (code.length != codeLength) {
        createCode();
    }
    checkCode.value = code;
}

function validate() {
    var inputCode = document.getElementById("input1").value.toUpperCase();
    if (inputCode.length <= 0) {
        alert("请输入验证码！");
        return false;
    } else if (inputCode != code) {
        alert("验证码输入错误！");
        createCode();
        return false;
    } else {
        alert("成功！");
        return true;
    }
}

css:

.code {
	background-image:url(111.jpg);
	font-family:Arial,宋体;
	font-style:italic;
	color:green;
	border:0;
	padding:2px 3px;
	letter-spacing:3px;
	font-weight:bolder;
}
.unchanged {
	border:0;
}

运行结果：

标签：code,登录,checkCode,JavaScript,验证码,value,var,font,codeLength
来源： https://blog.csdn.net/qq_40323256/article/details/90769757