實現驗證碼功能（目前為3種，可能後續更新ing）
阿新 • • 發佈：2020-07-23
實現驗證碼功能（目前為3種，可能後續更新ing）
摘要：我們在做一些後臺系統的登入驗證的時候。難免會用到驗證碼功能，來輔助進行驗證，提高安全性，在我們日常生活中，驗證方式無處不在，最多的是簡訊驗證碼的方式，通過點擊發送驗證碼，然後手機接收簡訊，填寫驗證碼才能登陸成功，但是也有一些其他驗證碼功能也在使用，所以，我就想著來集中記錄一下，希望對大家有所幫助...
一.數字簡訊驗證碼
思路：
a.兩個文字框+一個獲取驗證碼按鈕，文字框用來輸入手機號和獲取到的驗證碼，按鈕負責點選和記錄倒計時；
b.js書寫定時器setTimeout，進行60秒驗證碼失效時間記錄；
c.後臺提供簡訊獲取驗證的介面，我們把手機號作為引數上傳，後臺獲取到後給該手機號下發驗證碼；
效果圖展示：
例1.0：點選按鈕傳送驗證碼效果圖例2.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
<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
//驗證碼 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); }
Ajax介面程式碼js
$(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" 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>
四.點觸驗證碼
摘要：博主沒有接觸過，但是好像在微信朋友幫忙驗證的時候會有點觸驗證碼，就是選擇好友的圖片進行驗證，這個暫時不會，嘿嘿嘿，有路過的大神可以留個腳印我膜拜一波~~~