此时情绪此时天,无事小神仙
好好生活,平平淡淡每一天

编辑

js极简验证码

效果图

image

Html代码

<!DOCTYPE html>

<html>

    <head>
		<meta charset="UTF-8">
        <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(){
	let inputCode = document.getElementById("Yzm").value.toUpperCase(); //取得输入的验证码并转化为大写
	let tempCode = code.toUpperCase();
	// console.log("tempCode:"+tempCode+",inputCode:"+inputCode);
	if(inputCode.length <= 0) { //若输入的验证码长度为0
	  alert("请输入验证码!"); //则弹出请输入验证码
	  $("#Yzm").focus();
	  YZM = false;
	} else if(inputCode == tempCode) { //输入正确时
	  $("#Yzm").blur();//绑定验证码输入正确时要做的事
	  YZM = true;
	  alert("验证码正确!");
	} else { //若输入的验证码与产生的验证码不一致时
		alert("验证码输入错误!@_@"); //则弹出验证码输入错误
		YZM = false;
	  createCode();//刷新验证码
	  $("#Yzm").val("");//清空文本框
	  $("#Yzm").focus();//重新聚焦验证码框
	}
};
</script>
</html>
posted @ 2019-12-04 16:49  踏步  阅读(590)  评论(0编辑  收藏  举报