前言
如今各種各樣的賬號注冊登錄大部分都涉及到了驗證碼的輸入，那這些驗證碼是怎么實現的呢？
概述
目前比較常見的驗證碼格式主要有三種:數字短信驗證碼、圖形驗證碼、滑動驗證碼，下面我們就一起來看看這些驗證碼是怎么實現的。
1.數字短信驗證碼
數字短信驗證碼就是要求我們輸入手機號碼，然后獲取手機收到的驗證碼。
思路：
a.兩個文本框+一個獲取驗證碼按鈕，文本框用來輸入手機號和獲取到的驗證碼，按鈕負責點擊和記錄倒計時；
b.js書寫定時器setTimeout，進行60秒驗證碼失效時間記錄；
c.后台提供短信獲取驗證的接口，我們把手機號作為參數上傳，后台獲取到后給該手機號下發驗證碼；
效果圖展示：
例1.0：點擊按鈕發送驗證碼效果圖
短信接收截圖
代碼展示：
html
<input type="text" name="phone" id="phone" value="" placeholder="請輸入手機號" maxlength="11" /> <input type="" name="verCode" id="verCode" value="" placeholder="請輸入驗證碼" maxlength="6"/> <input type="button" name="" id="verCodeBtn" value="獲取驗證碼" onclick="settime(this);"/>
css
省略
倒計時js
//驗證碼
var counts = 60;
function settime(val) {
if(counts == 0) {
val.removeAttribute("disabled");
val.value = "獲取驗證碼";
counts = 60;
return false;
} else {
val.setAttribute("disabled", true);
val.value = "重新發送（" + counts + "）";
counts--;
}
setTimeout(function() {
settime(val);
}, 1000);
}
$(function(){
//獲取驗證碼
$("#verCodeBtn").click(function() {
var userinfo = {
"UserPhoneNum": '86//' + $("input[name='phone']").val()
}
$.ajax({
url: "https://www.xxxxx.cn/user/sendcode/",
data: userinfo,
type: "get",
success: function(data) {
if(JSON.parse(data).state === 404 || JSON.parse(data).state === 202 || userinfo.UserPhoneNum === '86//') {
alert("驗證碼發送失敗")
} else {
alert("驗證碼發送成功，請耐心等待")
}
},
error: function() {
alert("發送失敗");
}
});
});
})
二.圖形驗證碼
概要：一般的圖形驗證碼就像上方的短信驗證碼一樣，就是后台生成的驗證碼圖片返回給前端的，那樣的話就比較簡單，因為復雜的都讓后台解決了，我在這里主要說的是另一種，就是不調用后台接口，通過canvas畫布來解決圖形驗證碼。
思路：
a.一個文本框用來輸入由數字和字母組合的驗證碼+一個畫布標簽來顯示圖形驗證碼+一個提交按鈕；
b.提交按鈕進行表單驗證，輸入正確或者錯誤進行相應的提示；
c.用畫布生成並渲染出驗證碼圖形，並且得到隨機的顏色值；
效果圖展示
例3.0基礎圖片展示
例4.0提交成功效果展示
例5.0提交失敗效果展示
代碼展示：
HTML
<div class="code"> 用戶名:<input type="text" class="input-val"/> <br /> 密 碼:<input type="password" class="input-val"/> <br /> 驗證碼:<input type="text" value="" placeholder="請輸入驗證碼（不區分大小寫）" id="yzcode" 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 = $("#yzcode").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>