原生JS簡單驗證碼
阿新 • • 發佈:2019-01-06
暑假實習第一次接觸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);