javascript實現的簡單驗證碼效果程式碼例項

admin發表於2017-03-28
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;
  border:0;
  cursor:pointer;
  width:65px;
}
</style>
<script type="text/javascript"> 
function createCode(){
  var code="";
  var codeLength=6;
  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 index=0;index<codeLength;index++) {
    var charIndex=Math.floor(Math.random()*36);
    code+=selectChar[charIndex];
  }
  if(checkCode){
    checkCode.className="code";
    checkCode.value=code;
  }
}
 
function validate() {
  var inputCode=document.getElementById("txt").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="txt" /> 
  <input type="text" readonly="readonly" id="checkCode"/>
  <input id="bt" type="button" value="確定" />
</form>
</body>
</html>

上面你的程式碼實現了簡單的驗證碼效果，下面介紹一下它的實現過程。

一.程式碼註釋:

1.function createCode(){}，此函式實現了驗證碼功能。2. var code=""，宣告一個變數並賦值為空字元，後面會用來儲存生成的字串。

3.var codeLength=6，設定驗證碼的長度。

4.var checkCode=document.getElementById("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 index=0;index<codeLength;index++)，使用for迴圈執行6次生成一個驗證碼。

7.var charIndex=Math.floor(Math.random()*36)，生成一個隨機的索引值。

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.floor()一章節。

相關文章