我們在做網站或app時都需要用到驗證碼功能，防止他人的惡意攻擊，提高系統的安全性。驗證碼的種類也很多，不同的功能，不同的應用場景，需要使用不同的驗證碼。常見的有這么幾種:短信驗證碼、圖形驗證碼、滑動驗證碼。下面就把我開發中的經驗分享一下:
1. 短信驗證碼
實現邏輯：
a.兩個文本框+一個獲取驗證碼按鈕，文本框用來輸入手機號和獲取到的驗證碼，按鈕負責點擊和記錄倒計時；
b.60秒倒計時需要通過js實現，這里給大家推薦一個好用的插件(http://smsow.zhenzikj.com/doc/sdk.html)，不需要自己在寫了
c.后台負責實現驗證碼的生成、短信發送、驗證碼的校驗，可以通過java、c#、php、python等語言實現
效果圖展示：
具體源碼可參考博客: https://blog.csdn.net/zuoliangzhu/article/details/89790589
二.圖形驗證碼
概要：一般的圖形驗證碼就像上方的短信驗證碼一樣，就是后台生成的驗證碼圖片返回給前端的，那樣的話就比較簡單，因為復雜的都讓后台解決了，我在這里主要說的是另一種，就是不調用后台接口，通過canvas畫布來解決圖形驗證碼。
思路：
a.一個文本框用來輸入由數字和字母組合的驗證碼+一個畫布標簽來顯示圖形驗證碼+一個提交按鈕；
b.提交按鈕進行表單驗證，輸入正確或者錯誤進行相應的提示；
c.用畫布生成並渲染出驗證碼圖形，並且得到隨機的顏色值；
效果圖展示：例3.0基礎圖片展示
例4.0提交成功效果展示
例5.0提交失敗效果展示
代碼展示：
HTML
<div class="code">
<input type="text" value="" placeholder="請輸入驗證碼（不區分大小寫）" class="input-val">
<canvas id="canvas" width="100" height="30"></canvas>
<button class="btn">提交</button>
</div>
css
<style>
.input-val {
width: 200px;
height: 32px;
border: 1px solid #ddd;
box-sizing: border-box;
}
#canvas {
vertical-align: middle;
box-sizing: border-box;
border: 1px solid #ddd;
cursor: pointer;
}
.btn {
display: block;
margin-top: 20px;
height: 32px;
width: 100px;
font-size: 16px;
color: #fff;
background-color: #457adb;
border: none;
border-radius: 50px;
}
</style>
js
<script type="text/javascript" src="js/jquery-3.3.1.min.js" ></script>
<script>
$(function(){
var show_num = [];
draw(show_num);
$("#canvas").on('click',function(){
draw(show_num);
})
$(".btn").on('click',function(){
var val = $(".input-val").val().toLowerCase();
var num = show_num.join("");
if(val==''){
alert('請輸入驗證碼！');
}else if(val == num){
alert('提交成功！');
$(".input-val").val('');
// draw(show_num);
}else{
alert('驗證碼錯誤！請重新輸入！');
$(".input-val").val('');
// draw(show_num);
}
})
})
//生成並渲染出驗證碼圖形
function draw(show_num) {
var canvas_width=$('#canvas').width();
var canvas_height=$('#canvas').height();
var canvas = document.getElementById("canvas");//獲取到canvas的對象，演員
var context = canvas.getContext("2d");//獲取到canvas畫圖的環境，演員表演的舞台
canvas.width = canvas_width;
canvas.height = canvas_height;
var sCode = "a,b,c,d,e,f,g,h,i,j,k,m,n,p,q,r,s,t,u,v,w,x,y,z,A,B,C,E,F,G,H,J,K,L,M,N,P,Q,R,S,T,W,X,Y,Z,1,2,3,4,5,6,7,8,9,0";
var aCode = sCode.split(",");
var aLength = aCode.length;//獲取到數組的長度
for (var i = 0; i < 4; i++) { //這里的for循環可以控制驗證碼位數（如果想顯示6位數，4改成6即可）
var j = Math.floor(Math.random() * aLength);//獲取到隨機的索引值
// var deg = Math.random() * 30 * Math.PI / 180;//產生0~30之間的隨機弧度
var deg = Math.random() - 0.5; //產生一個隨機弧度
var txt = aCode[j];//得到隨機的一個內容
show_num[i] = txt.toLowerCase();
var x = 10 + i * 20;//文字在canvas上的x坐標
var y = 20 + Math.random() * 8;//文字在canvas上的y坐標
context.font = "bold 23px 微軟雅黑";
context.translate(x, y);
context.rotate(deg);
context.fillStyle = randomColor();
context.fillText(txt, 0, 0);
context.rotate(-deg);
context.translate(-x, -y);
}
for (var i = 0; i <= 5; i++) { //驗證碼上顯示線條
context.strokeStyle = randomColor();
context.beginPath();
context.moveTo(Math.random() * canvas_width, Math.random() * canvas_height);
context.lineTo(Math.random() * canvas_width, Math.random() * canvas_height);
context.stroke();
}
for (var i = 0; i <= 30; i++) { //驗證碼上顯示小點
context.strokeStyle = randomColor();
context.beginPath();
var x = Math.random() * canvas_width;
var y = Math.random() * canvas_height;
context.moveTo(x, y);
context.lineTo(x + 1, y + 1);
context.stroke();
}
}
//得到隨機的顏色值
function randomColor() {
var r = Math.floor(Math.random() * 256);
var g = Math.floor(Math.random() * 256);
var b = Math.floor(Math.random() * 256);
return "rgb(" + r + "," + g + "," + b + ")";
}
</script>
三.滑動驗證碼
摘要：博客園登錄的時候就用到了這個滑塊登錄，是完成拼圖形式的，我下面這個原理是一樣的，邏輯是根據鼠標滑動軌跡，坐標位置，計算拖動速度等等來判斷是否人為操作，如果小伙伴想做和博客園效果一樣的，那么可以用來做參考。
思路：
a.由三個div組成，構成了滑塊和底部進度條的效果；
b.書寫js,注冊鼠標按下，懸浮，松開事件；
c.記錄滑塊移動的距離和狀態進行判斷是否成功；
效果圖展示：
例6.0：滑動驗證碼初始狀態例7.0：滑動狀態例8.0：成功狀態
代碼展示：
html
<div class="drag">
<div class="bg"></div>
<div class="text" onselectstart="return false;">請拖動滑塊解鎖</div>
<div class="btn">>></div>
</div>
css
<style>
.drag{
width: 300px;
height: 40px;
line-height: 40px;
background-color: #e8e8e8;
position: relative;
margin:0 auto;
}
.bg{
width:40px;
height: 100%;
position: absolute;
background-color: #75CDF9;
}
.text{
position: absolute;
width: 100%;
height: 100%;
text-align: center;
user-select: none;
}
.btn{
width:40px;
height: 38px;
position: absolute;
border:1px solid #ccc;
cursor: move;
font-family: "宋體";
text-align: center;
background-color: #fff;
user-select: none;
color:#666;
}
</style>
js
<script>
//一、定義一個獲取DOM元素的方法
var $ = function(selector){
return document.querySelector(selector);
},
box = $(".drag"),//容器
bg = $(".bg"),//背景
text = $(".text"),//文字
btn = $(".btn"),//滑塊
success = false,//是否通過驗證的標志
distance = box.offsetWidth - btn.offsetWidth;//滑動成功的寬度（距離）
//二、給滑塊注冊鼠標按下事件
btn.onmousedown = function(e){
//1.鼠標按下之前必須清除掉后面設置的過渡屬性
btn.style.transition = "";
bg.style.transition ="";
//說明：clientX 事件屬性會返回當事件被觸發時，鼠標指針向對於瀏覽器頁面(或客戶區)的水平坐標。
//2.當滑塊位於初始位置時，得到鼠標按下時的水平位置
var e = e || window.event;
var downX = e.clientX;
//三、給文檔注冊鼠標移動事件
document.onmousemove = function(e){
var e = e || window.event;
//1.獲取鼠標移動后的水平位置
var moveX = e.clientX;
//2.得到鼠標水平位置的偏移量（鼠標移動時的位置 - 鼠標按下時的位置）
var offsetX = moveX - downX;
//3.在這里判斷一下：鼠標水平移動的距離 與 滑動成功的距離 之間的關系
if( offsetX > distance){
offsetX = distance;//如果滑過了終點，就將它停留在終點位置
}else if( offsetX < 0){
offsetX = 0;//如果滑到了起點的左側，就將它重置為起點位置
}
//4.根據鼠標移動的距離來動態設置滑塊的偏移量和背景顏色的寬度
btn.style.left = offsetX + "px";
bg.style.width = offsetX + "px";
//如果鼠標的水平移動距離 = 滑動成功的寬度
if( offsetX == distance){
//1.設置滑動成功后的樣式
text.innerHTML = "驗證通過";
text.style.color = "#fff";
btn.innerHTML = "√";
btn.style.color = "green";
bg.style.backgroundColor = "lightgreen";
//2.設置滑動成功后的狀態
success = true;
//成功后，清除掉鼠標按下事件和移動事件（因為移動時並不會涉及到鼠標松開事件）
btn.onmousedown = null;
document.onmousemove = null;
//3.成功解鎖后的回調函數
setTimeout(function(){
alert('解鎖成功！');
},100);
}
}
//四、給文檔注冊鼠標松開事件
document.onmouseup = function(e){
//如果鼠標松開時，滑到了終點，則驗證通過
if(success){
return;
}else{
//反之，則將滑塊復位（設置了1s的屬性過渡效果）
btn.style.left = 0;
bg.style.width = 0;
btn.style.transition = "left 1s ease";
bg.style.transition = "width 1s ease";
}
//只要鼠標松開了，說明此時不需要拖動滑塊了，那么就清除鼠標移動和松開事件。
document.onmousemove = null;
document.onmouseup = null;
}
}
</script>