JavaScript數字和字母組合驗證碼詳解

admin發表於2018-11-27
JavaScript

驗證碼都比較熟悉，當前驗證碼多種多樣，本文分享一種最為簡單的驗證碼效果。

由數字和字母組成，程式碼例項如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
.code{
  font-family:Arial;
  font-style:italic;
  color:Red;
  border:0;
  padding:2px 3px;
  letter-spacing:3px;
  font-weight:bolder;
}
.unchanged {
  border:0;
}
</style>
<script type="text/javascript">  
function createCode(){    
  var code = "";
  var codeLength = 4;   
  var checkCode = document.getElementById("checkCode");   
  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];   
  }   
  if(checkCode){   
    checkCode.className="code";   
    checkCode.value = code;   
  }   
}
function validate (){   
  var inputCode = document.getElementById("input1").value;   
  if(inputCode.length <=0){   
    alert("請輸入驗證碼！");   
  }   
  else if(inputCode != code ){   
    alert("驗證碼輸入錯誤！");   
    createCode();//重新整理驗證碼   
  }   
  else{   
    alert("驗證碼正確");   
  }   
}   
window.onload=function(){
  createCode();
  var checkCode=document.getElementById("checkCode");
  var bt=document.getElementById("bt");
  checkCode.onclick=function(){
    createCode();
  }
  bt.onclick=function(){
    validate();
  }
}
</script>
</head>
<body>
<form  action="#">
<input  type="text" id="input1" />
<input type="text" readonly="readonly" id="checkCode" class="unchanged"/>
<br />
<input id="bt" type="button" value="確定" />
</form>
</body>
</html>

一.程式碼註釋:

（1）.function createCode(){}，此函式可以建立驗證碼。

（2）.var code = ""，宣告一個變數，並賦初值為空，為了儲存驗證碼字串。

（3）.var codeLength = 4，設定驗證碼的長度。

（4）.var checkCode = document.getElementById("checkCode")，獲取id屬性值為checkCode的物件。

（5）.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')，建立一陣列，此陣列中的元素就是驗證碼的組成字元。

（6）.for(var i=0;i<codeLength;i++){}，通過遍歷的方式生成驗證碼。

（7）.var charIndex = Math.floor(Math.random()*36)，通過隨機函式Math.random()乘以36（陣列元素的個數），再通過Math.floor()函式進行下舍入，就會取得隨機索引值。

（8）.code +=selectChar[charIndex]，將隨機取得陣列元素連線成字串。

（9）.if(checkCode){   checkCode.className="code";   checkCode.value = code; }  ，設定文字框的樣式和value值（也即是驗證碼內容）。

二.相關閱讀:

（1）.Math.floor()參閱JavaScript Math.floor()方法一章節。

（2）.Math.random()參閱JavaScript Math.random()一章節。 

相關文章