網頁設計中，尤其表單填寫提交過程中，為防止機器自動登錄，很多網頁都采用驗證碼技術，允許用戶輸入而盡量避免自動登錄。驗證碼實現的方法有很多，PHP繪圖技術可以在服務端生成驗證碼并發送客戶端，HTML5技術下可以使用canvas與JS腳本實現在客戶端瀏覽器自動生成驗證碼。本文給出JS+Canvas驗證碼的解決措施，所制作驗證碼實現效果如下圖所示：

實現原理

本例驗證碼的實現主要包括驗證碼字符串的生成、背景干擾點實現及干擾直線的生成三部分。最終通過canvas繪圖技術將生成的驗證碼字符串、背景及干擾直線顯示到畫布上。主要涉及技術或知識點包括canvas繪圖技術、數組、鼠標點擊事件、隨機函數等。以下從驗證字符串、背景干擾點及干擾直線三方面對實現過程進行說明。

驗證字符串

驗證字符串部分主要借助數組存儲驗證碼所有字符，通過調用Math對象的隨機函數獲取數組下標，并通過數組下表讀取數組元素，將讀取的數組元素組裝成完整字符串。其實現核心代碼如下：

如上圖所示，本例驗證碼字符包括數字與大寫字母，getCode函數返回值即為4位驗證碼字符串。

背景干擾點

背景干擾點可以直接使用canvas對應的繪圖方法進行繪制，本例為簡化開發過程，降低難度直接使用drawImage繪圖方式加載背景圖片，實現干擾點效果。背景圖片如下：

通過調用drawImage方法，指定截取的坐標位置參數，可實現背景干擾點的動態變化效果，背景干擾點實現核心代碼如下：

其中getXsize與getYsize為獲取繪圖截取背景圖片的坐標位置，通過使用隨機函數實現從背景圖片不同位置截取進行繪圖輸出。

干擾直線

干擾直線實現較為簡單，直接通過JS提供的moveTo與lineTo方法完成直線的繪制，本例繪制了兩條直線，一條為黑色干擾線，一條為白色干擾線。在繪制過程兩端點需要使用Math隨機函數生成符合條件隨機坐標。干擾直線相關實現代碼如下：

干擾直線實現核心代碼如上圖，其中getLsize方法主要用于獲取隨機端點Y軸坐標值。strokeStyle主要用于設置繪圖直線的顏色。

驗證碼顯示輸出

驗證碼的顯示輸出主要使用fillText()方法在canvas指定位置進行文字輸出，本例使用第三方ttf字體，因此在HTML頁面中對字體進行了加載。驗證碼顯示輸出實現代碼如下：

驗證碼顯示輸出核心代碼如上圖所示，其中myfont為加載的第三方字體。

繪圖基礎部分

繪圖基礎部分主要包括前端canvas元素的布局等。包括屬性的設置，js部分元素的獲取及屬性設置等。

其他工作

我們一般接觸的驗證碼，都可以點擊圖片實現驗證碼的刷新，因此本例為canvas標記添加了onclick事件，將所有驗證碼生成的代碼封裝到showCode()函數中，通過調用showCode函數實現驗證碼的刷新。本例完整JS腳本部分代碼如下：

本頭條號長期關注編程資訊分享；編程課程、素材、代碼分享及編程培訓。如果您對以上方面有興趣或代碼錯誤、建議與意見，可以聯系作者，共同探討。期待大家關注！如需案例完整代碼請關注并私信，往期前端設計文章鏈接如下：

1. 前端設計-Ajax技術及實例展示
2. 前端設計-響應式頁面開發基礎
3. Web開發前端、后端與全棧的區別是什么？

web的開發中，經常會使用到驗證碼功能，如登錄、注冊或其他關鍵功能使用之前常常需要驗證碼認證。 其目的是為了防止網站被惡意破解密碼，刷票，論壇灌水，且有效防止某個黑客對某一個特定注冊用戶限定程序暴力破解方式進行不斷登陸。今天我們就來說說如何快速設計驗證碼。

實現效果：

實現原理：

由后臺提供生成驗證碼的接口，前端每次請求會后端會生成驗證碼圖片和驗證碼，驗證碼圖片發送到客戶端供客戶端顯示，

驗證碼字符串保存再后端的Session中，待前端再次請求業務接口與session里的驗證碼字符串做比對。

實現思路：

1、先由后端提供可以生產驗證碼圖片的接口

2、前端通過 img 中設置 src 屬性，請求驗證碼生成的接口。

3、對img設置點擊事件，每次點擊img的時候，都會改變src值重新請求src

4、做頁面接口操作時，比對輸入的驗證碼是否正確

實現代碼：

前端：

html:

js:

驗證碼的種類還有很多種，在這里就不一一闡述了，如果你還對其他類型的驗證碼形成有興趣，歡迎留言，小編會持續更新。

對編程感興趣，想了解更多的編程知識，關注頭條號一起玩轉編程

更多編程資訊、干貨持續更新中~

些日子接觸到一個項目，要求實現一個簡單的驗證碼，參考萬能的百度結合自己的想法實現了一個簡單的前端驗證碼，當然跟后臺的不能比安全性，

頁面部分：

<div class="new-web-row"><span class="web-form-span " >驗證碼</span><input type="text" class=" web-form-input " required="required" id="Yzm" style="width: 30%;float: initial; margin-left: 27%;" ><input type = "button" id="code" value="點我驗證" class="btn-list-btn" style="margin:0;float: right;width:20%" onclick="createCode()"/>

js實現部分：

var code ; //在全局定義驗證碼

//產生驗證碼

function createCode(){

code = "";

var codeLength = 4;//驗證碼的長度

var checkCode = document.getElementById("code");

var random = 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 index = Math.floor(Math.random()*36);//取得隨機數的索引（0~35）

code += random[index];//根據索引取得隨機數加到code上

}

checkCode.value = code;//把code值賦給驗證碼

}

//校驗驗證碼

document.getElementById("Yzm").addEventListener("change",validate);

function validate(){

var inputCode = document.getElementById("Yzm").value.toUpperCase(); //取得輸入的驗證碼并轉化為大寫

if(inputCode.length <= 0) { //若輸入的驗證碼長度為0

alert("請輸入驗證碼！"); //則彈出請輸入驗證碼

$("#Yzm").focus();

YZM = false;

}

else if(inputCode != code ) { //若輸入的驗證碼與產生的驗證碼不一致時

alert("驗證碼輸入錯誤！@_@"); //則彈出驗證碼輸入錯誤

createCode();//刷新驗證碼

$("#Yzm").val("");//清空文本框

$("#Yzm").focus();//重新聚焦驗證碼框

YZM = false;

}

else { //輸入正確時

$("#Yzm").blur();//綁定驗證碼輸入正確時要做的事

YZM = true;

}

};

附效果圖：