生成字母+数字的验证码

项目里的一个登录页,要求注册的时候要有验证程序,公司不愿花钱做手机短信验证,后台兄弟忙的不可开交,于是只能前端来实现一个简单的验证逻辑。

<span id="code" title="看不清,换一张"></span>
let code;
document.getElementById("code").onclick = changeNumber(5);
//传入一个参数 作为生成几位验证码的设置
function changeNumber(num){
	var arrays=[
		'1', '2', '3', '4', '5', '6', '7', '8', '9', '0',
 
		'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'
	];
	//在大小写字母和数字中任意选出随机组合当作验证码
	code="";
	for (var i = 0; i < num; i++) {
		//随机获取一个数组的下标
		var r = parseInt(Math.random() * arrays.length);
		code += arrays[r];
	}
	document.getElementById('code').innerHTML = code; //将验证码写入指定区域
}

随机码生成,为了有识别效果,可以给生成的验证码改变字体颜色,配置背景和透明度。最后验证的时候直接toLowerCase,两相比对一下即可

©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页