1. 程式人生 > >原生JS簡單驗證碼

原生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);