js實現驗證碼功能

阿新 • • 發佈：2020-07-24

本文例項為大家分享了js實現驗證碼功能的具體程式碼，供大家參考，具體內容如下

#前面是拆解著講的，不想看可以直接跳過，帶註釋的完整版程式碼和效果在後面

首先在頁面中準備一個輸入框，一個顯示驗證碼的盒子和一個提交按鈕

<body>
 <input type="text">
 <div></div>
 <button>提交</button>
</body>

然後加億些樣式

input {
 width: 150px;
 height: 30px;
 outline: none;
 font-size: 24px;
 vertical-align: middle;
}

button {
 outline: none;
 vertical-align: middle;
 cursor: pointer;
}

div {
 display: inline-block;
 width: 90px;
 height: 40px;
 line-height: 40px;
 text-align: center;
 vertical-align: middle;
 background-color: #ddd;
 cursor: pointer;
}

然後大概長這樣（有點醜，不過無所謂，主要內容是js）

js實現驗證碼功能

好，那麼開始寫js

首先獲取這些元素

var input = document.querySelector('input');
var btn = document.querySelector('button');
var div = document.querySelector('div');

然後搞一個字元庫和一個儲存驗證碼的字串

var characters = "QWETYUIOPASDFGHJKLZXCVBNMqwertyuiopasdfghjklzxcvbnm1234567890";
var str;

那個字元庫就直接滾鍵盤就行了~

因為驗證碼要多次用到隨機數，所以為了方便就先搞一個隨機數的函式

function getRandom(l,r) {
 return parseInt(l + Math.random() * (r - l + 1));
}

因為是驗證碼，所以不能讓生成的文字可以直接被選中複製，所以給加一個文字不可選中

div.addEventListener('selectstart',function (e) {
 e.preventDefault();
})

因為驗證碼不是每次重新整理頁面就生成一次，看不清是可以換的，要多次生成，所以就把生成驗證碼的部分寫在一個函式裡

function run() {
 str = '';
 while (div.hasChildNodes()) {
  div.removeChild(div.firstChild);
 }
 for (var i = 0; i < 4; i++) {
  var span = document.createElement('span');
  span.innerHTML = characters[getRandom(0,characters.length - 1)];
  span.style.display = 'inline-block';
  span.style.fontSize = getRandom(16,32) + 'px';
  span.style.color = 'rgb(' + getRandom(0,200) + ',' + getRandom(0,200) + ')';
  span.style.transform = 'translate(' + getRandom(-5,5) + 'px,' + getRandom(-5,5) + 'px) rotate(' + getRandom(-20,20) + 'deg)';
  str += span.innerHTML;
  div.appendChild(span);
 }
}

大概說明一下這部分，原理大概就是建立4（我搞的是4位的驗證碼）個span，然後分別隨機設定文字、字型大小、字型顏色、平移旋轉啥的，然後把span新增到div裡成為div的子節點，然後不要忘了讓str變數儲存一下驗證碼的字元

每次生成之前先將上一次生成的驗證碼刪掉（即把div裡的所有子節點刪除掉），並且把str重置

然後頁面重新整理的時候生成一次（呼叫一次），每次點選div的時候重新生成一次（每次點選呼叫一次）

run();
div.addEventListener('click',run);

再給提交按鈕新增點選事件：判斷驗證輸入的驗證碼對不對，然後重新整理驗證碼，並且自動將輸入框中的文字清除

btn.addEventListener('click',function () {
 if (input.value.toLowerCase() == str.toLowerCase()) {
  alert('驗證成功');
 } else {
  alert('驗證失敗');
 }
 run();
 input.value = '';
})

判斷驗證碼這裡我為了不區分大小寫用了toLowerCase()函式將兩個字串都轉化成小寫之後再做的比較

至此，功能就都實現的差不多了

看效果：

js實現驗證碼功能

帶註釋的完整版程式碼如下：

<!DOCTYPE html>
<html lang="ch-ZN">

<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width,initial-scale=1.0">
 <title>js實現驗證碼</title>
 <style>
  input {
   width: 150px;
   height: 30px;
   outline: none;
   font-size: 24px;
   vertical-align: middle;
  }

  button {
   outline: none;
   vertical-align: middle;
   cursor: pointer;
  }

  div {
   display: inline-block;
   width: 90px;
   height: 40px;
   line-height: 40px;
   text-align: center;
   vertical-align: middle;
   background-color: #ddd;
   cursor: pointer;
  }
 </style>
</head>

<body>
 <input type="text">
 <div></div>
 <button>提交</button>
 <script>
  // 獲取元素
  var input = document.querySelector('input');
  var btn = document.querySelector('button');
  var div = document.querySelector('div');

  // 搞一個字元庫
  var characters = "QWERTYUIOPASDFGHJKLZXCVBNMqwertyuiopasdfghjklzxcvbnm1234567890";
  var str; // str用來儲存驗證碼的文字

  // 生成一個在[l,r]範圍內的隨機整數的函式
  function getRandom(l,r) {
   return parseInt(l + Math.random() * (r - l + 1));
  }

  // 設定文字不可選中
  div.addEventListener('selectstart',function (e) {
   e.preventDefault();
  })

  // 生成驗證碼的函式
  function run() {

   // 先重置str
   str = '';

   // 刪除掉div中的所有子節點
   while (div.hasChildNodes()) {
    div.removeChild(div.firstChild);
   }

   // 生成由四個字元組成的驗證碼
   for (var i = 0; i < 4; i++) {

    // 建立一個span物件
    var span = document.createElement('span');

    // 設定文字（從字型檔中隨機抽取一個字元）
    span.innerHTML = characters[getRandom(0,characters.length - 1)];

    // 設定一些隨機的樣式
    span.style.display = 'inline-block';
    span.style.fontSize = getRandom(16,32) + 'px';
    span.style.color = 'rgb(' + getRandom(0,200) + ')';
    span.style.transform = 'translate(' + getRandom(-5,20) + 'deg)';
    str += span.innerHTML; // str記錄字元
    div.appendChild(span); // 將span新增到div中
   }
  }


  run(); // 每次開啟/重新整理頁面時先呼叫一次
  div.addEventListener('click',run); // 每次點選驗證碼的時候呼叫一次

  // 提交按鈕點選事件
  btn.addEventListener('click',function () {
   if (input.value.toLowerCase() == str.toLowerCase()) {
    alert('驗證成功');
   } else {
    alert('驗證失敗');
   }
   run();
   input.value = '';
  })
 </script>
</body>

</html>

以上

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。