原生JS简单验证码

    暑假实习第一次接触JS是登录注册的正则表达式,一脸懵逼,基础都没有啥都不会,当时没带自己的电脑,没有保存实习写的代码,后来公司解散了,网站链接也失效了。登陆注册还有一个原生JS验证码,当时是在网上找的,也没有保存。后来自己找了一个简单的原生验证码。

    效果截图:

HTML代码:

<div class="container">
	<input id="text_code" type="text" placeholder="验证码" />
	<input id="btn_code" type="button" value=""></input>
	<input id="btn_change" type="button" value="验证"  />
</div>

JS代码:

//创建变量
var code;
var textCode = document.getElementById('text_code');
var btnCode = document.getElementById('btn_code');
var btnChange = document.getElementById('btn_change');

//在全局 定义验证码
function createCode(){ 
	//创建验证码函数
	code = "";
	var codeLength = 4;//验证码的长度
	var selectChar = 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');
	//所有候选组成验证码的字符,当然也可以用中文的
	for(var i=0; i<codeLength; i++){ 
		var charIndex = Math.floor(Math.random()*36);
		code += selectChar[charIndex]; 
	}
	//显示验证码
	btnCode.value = code;
}
window.onload = createCode();
btnCode.addEventListener('click', createCode, false);

//验证验证码输入是否正确
function btnCheck(){
	if(textCode.value <= 0){
		alert('请输入验证码!');
	}else if(textCode.value != code){
		alert('验证码输入错误!');
		createCode();
		textCode.value = '';
	}else{
		alert('验证码正确~跳转百度');
		window.open('http://www.baidu.com');
	}
}
btnChange.addEventListener('click', btnCheck, false);

猜你喜欢

转载自blog.csdn.net/weixin_40878070/article/details/85919723
今日推荐