5分钟教你3种实现验证码功能
生活随笔
收集整理的這篇文章主要介紹了
5分钟教你3种实现验证码功能
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
摘要：我們在做一些后臺系統的登錄驗證的時候。難免會用到驗證碼功能，來輔助進行驗證，提高安全性，在我們日常生活中，驗證方式無處不在，最多的是短信驗證碼的方式，通過點擊發送驗證碼，然后手機接收短信，填寫驗證碼才能登陸成功，但是也有一些其他驗證碼功能也在使用，所以，我就想著來集中記錄一下，希望對大家有所幫助...
一.數字短信驗證碼
思路：
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
<--博主偷點小懶，省略，看不慣就關注我啊-->
倒計時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>
四.點觸驗證碼
摘要：博主沒有接觸過，但是好像在微信朋友幫忙驗證的時候會有點觸驗證碼，就是選擇好友的圖片進行驗證，如果有朋友接觸過，或者寫過，歡迎在下方留下你的博客地址，我將非常感激，
總結
以上是生活随笔為你收集整理的5分钟教你3种实现验证码功能的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 关于JSON.stringify和Uni
- 下一篇： 汉字转拼音