如何使用 JavaScript 實作圖片驗證碼功能？-js教程-PHP中文網

首頁

web前端

js教程

如何使用 JavaScript 實作圖片驗證碼功能？

王林

Oct 20, 2023 am 11:54 AM

javascript 實現圖片驗證碼

如何使用 JavaScript 实现图片验证码功能？

如何使用 JavaScript 實作圖片驗證碼功能？

隨著網路技術的不斷發展，網站的安全性變得愈發重要。在註冊、登入等操作中，常常會使用圖形驗證碼來確保使用者正常的操作，並防止機器人或惡意程式的存取。圖形驗證碼是一種透過展示隨機產生的驗證碼圖片，要求使用者輸入正確的驗證碼來完成操作的驗證方式。

本文將介紹如何使用 JavaScript 實作圖片驗證碼功能，並提供具體程式碼範例。

準備工作

在開始編寫程式碼之前，我們需要準備以下素材：

一張包含各種字元的驗證碼圖片
伺服器端API，用於驗證使用者輸入的驗證碼是否正確

#HTML 結構

首先，我們需要在HTML文件中新增一個用於顯示驗證碼的<img> 標籤以及一個輸入驗證碼的文字方塊。

<!DOCTYPE html>
<html>
<head>
  <title>图片验证码示例</title>
</head>
<body>
  <img id="captchaImage" src="captcha.jpg" alt="验证码">
  <input type="text" id="captchaInput" placeholder="请输入验证码">
  <button id="verifyButton">验证</button>

  <script src="captcha.js"></script>
</body>
</html>

登入後複製

JavaScript 程式碼

接下來，讓我們來寫 JavaScript 程式碼，實作驗證碼的產生和校驗功能。

// 获取页面元素
const captchaImg = document.getElementById('captchaImage');
const captchaInput = document.getElementById('captchaInput');
const verifyButton = document.getElementById('verifyButton');

// 点击验证码图片刷新验证码
captchaImg.addEventListener('click', function() {
  refreshCaptcha();
});

// 点击验证按钮进行验证码校验
verifyButton.addEventListener('click', function() {
  verifyCaptcha();
});

// 刷新验证码
function refreshCaptcha() {
  // 使用服务器端 API 获取新的验证码图片
  // 并更新验证码图片的 src 属性
  captchaImg.src = 'new_captcha.jpg';
}

// 校验验证码
function verifyCaptcha() {
  const userInput = captchaInput.value;

  // 使用服务器端 API 验证用户输入的验证码是否正确
  fetch('/verify-captcha', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({ captcha: userInput })
  })
  .then(response => response.json())
  .then(data => {
    if (data.result === 'success') {
      alert('验证码正确');
    } else {
      alert('验证码错误');
    }
  })
  .catch(error => {
    console.error('验证码校验失败', error);
  });
}

登入後複製

在上述程式碼中，我們使用了 fetch 函數來傳送非同步請求，使用伺服器端提供的 API 進行驗證碼的校驗。根據伺服器端傳回的校驗結果，我們可以彈出對應的提示框。

請確保將 <script src="captcha.js"></script> 放在 HTML 檔案的末尾，以確保 JavaScript 程式碼在頁面載入完畢後執行。

伺服器端實作

伺服器端的實作方式因語言和框架的不同而有所差異。一般情況下，伺服器端會提供一個 API 接口，接收使用者輸入的驗證碼並進行驗證，傳回校驗結果。

以下是一個簡單的Node.js 伺服器端範例程式碼：

const express = require('express');
const app = express();
const bodyParser = require('body-parser');

// 解析 application/json
app.use(bodyParser.json());

// 校验验证码
app.post('/verify-captcha', (req, res) => {
  const userInput = req.body.captcha;

  // 进行验证码校验
  if (userInput === 'correct_code') {
    res.json({ result: 'success' });
  } else {
    res.json({ result: 'failure' });
  }
});

const port = 3000;
app.listen(port, () => {
  console.log(`服务器运行在 http://localhost:${port}`);
});

登入後複製

以上程式碼中的/verify-captcha 路徑對應了前端程式碼中的校驗接口，根據實際情況進行修改即可。

總結

本文透過 JavaScript 及伺服器端的配合，實作了一個簡單的圖片驗證碼功能，包括驗證碼的刷新和使用者輸入的校驗。你可以根據實際需求對程式碼進行修改和擴展，提高驗證碼的安全性和可用性。

最後，值得注意的是，驗證碼只是一種簡單的驗證方式，並不能完全阻止機器人和惡意程式的存取。在實際應用中，我們還可以結合其他安全策略，如 IP 限制、使用者行為分析等來提高網站的安全性。

以上是如何使用 JavaScript 實作圖片驗證碼功能？的詳細內容。更多資訊請關注PHP中文網其他相關文章！

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

熱AI工具

熱工具

熱門話題

gmail信箱登陸入口在哪裡

7546

CakePHP 教程

1381

steam的賬戶名稱是什麼格式

win11激活密鑰永久

NYT連接提示和答案

Related knowledge

Google瀏覽器不顯示驗證碼圖片怎麼辦?chrome瀏覽器不顯示驗證碼? Mar 13, 2024 pm 08:55 PM

谷歌瀏覽器不顯示驗證碼圖片怎麼辦？在使用Google瀏覽器登入網頁有時候需要驗證碼驗證。部分使用者在使用圖片驗證碼的時候發現Google瀏覽器無法正常顯示圖片的內容。這該怎麼辦呢？下面小編帶來Google瀏覽器驗證碼不顯示處理方法介紹，希望對大家有幫助！　　方法介紹　　1、進入軟體，點選右上角的「更多」按鈕，選擇下方選項清單中的「設定」進入。　　2、進入新介面後，點選左側的「隱私設定與安全性」選項。　　3、接著點擊右側中的「網站設定&rdquo

華為手機如何實現雙微信登入？ Mar 24, 2024 am 11:27 AM

華為手機如何實現雙微信登入？隨著社群媒體的興起，微信已成為人們日常生活中不可或缺的溝通工具之一。然而，許多人可能會遇到一個問題：在同一部手機上同時登入多個微信帳號。對於華為手機用戶來說，實現雙微信登入並不困難，本文將介紹華為手機如何實現雙微信登入的方法。首先，華為手機自帶的EMUI系統提供了一個很方便的功能－應用程式雙開。透過應用程式雙開功能，用戶可以在手機上同

PHP程式設計指南：實作斐波那契數列的方法 Mar 20, 2024 pm 04:54 PM

程式語言PHP是一種用於Web開發的強大工具，能夠支援多種不同的程式設計邏輯和演算法。其中，實作斐波那契數列是一個常見且經典的程式設計問題。在這篇文章中，將介紹如何使用PHP程式語言來實作斐波那契數列的方法，並附上具體的程式碼範例。斐波那契數列是一個數學上的序列，其定義如下：數列的第一個和第二個元素為1，從第三個元素開始，每個元素的值等於前兩個元素的和。數列的前幾元

如何在華為手機上實現微信分身功能 Mar 24, 2024 pm 06:03 PM

如何在華為手機上實現微信分身功能隨著社群軟體的普及和人們對隱私安全的日益重視，微信分身功能逐漸成為人們關注的焦點。微信分身功能可以幫助使用者在同一台手機上同時登入多個微信帳號，方便管理和使用。在華為手機上實現微信分身功能並不困難，只需要按照以下步驟操作即可。第一步：確保手機系統版本和微信版本符合要求首先，確保你的華為手機系統版本已更新至最新版本，以及微信App

掌握Golang如何實現遊戲開發的可能性 Mar 16, 2024 pm 12:57 PM

在現今的軟體開發領域中，Golang（Go語言）作為一種高效、簡潔、並發性強的程式語言，越來越受到開發者的青睞。其豐富的標準庫和高效的並發特性使它成為遊戲開發領域的一個備受關注的選擇。本文將探討如何利用Golang來實現遊戲開發，並透過具體的程式碼範例來展示其強大的可能性。 1.Golang在遊戲開發中的優勢作為靜態類型語言，Golang正在建構大型遊戲系統

PHP遊戲需求實作指南 Mar 11, 2024 am 08:45 AM

PHP遊戲需求實現指南隨著網路的普及和發展，網頁遊戲的市場也越來越火爆。許多開發者希望利用PHP語言來開發自己的網頁遊戲，而實現遊戲需求是其中一個關鍵步驟。本文將介紹如何利用PHP語言來實現常見的遊戲需求，並提供具體的程式碼範例。 1.創造遊戲角色在網頁遊戲中，遊戲角色是非常重要的元素。我們需要定義遊戲角色的屬性，例如姓名、等級、經驗值等，並提供方法來操作這些

如何在Golang中實現精確除法運算 Feb 20, 2024 pm 10:51 PM

在Golang中實現精確除法運算是一個常見的需求，特別是在涉及金融計算或其它需要高精度計算的場景中。 Golang的內建的除法運算子「/」是針對浮點數計算的，並且有時會出現精度遺失的問題。為了解決這個問題，我們可以藉助第三方函式庫或自訂函數來實現精確除法運算。一種常見的方法是使用math/big套件中的Rat類型，它提供了分數的表示形式，可以用來實現精確的除法運算