摘要：
我們在做一些后臺系統(tǒng)的登錄驗證的時候。難免會用到驗證碼功能，來輔助進(jìn)行驗證，提高安全性，在我們?nèi)粘Ｉ钪校炞C方式無處不在，最多的是短信驗證碼的方式，通過點擊發(fā)送驗證碼，然后手機接收短信，填寫驗證碼才能登陸成功，但是也有一些其他驗證碼功能也在使用，所以，我就想著來集中記錄一下，希望對大家有所幫助...
一.數(shù)字短信驗證碼
思路：
a.兩個文本框+一個獲取驗證碼按鈕，文本框用來輸入手機號和獲取到的驗證碼，按鈕負(fù)責(zé)點擊和記錄倒計時；
b.js書寫定時器setTimeout，進(jìn)行60秒驗證碼失效時間記錄；
c.后臺提供短信獲取驗證的接口，我們把手機號作為參數(shù)上傳，后臺獲取到后給該手機號下發(fā)驗證碼；
效果圖展示：
例1.0：點擊按鈕發(fā)送驗證碼效果圖
例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
<--博主偷點小懶，省略，看不慣就關(guān)注我啊-->
倒計時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 = "重新發(fā)送（" + 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("驗證碼發(fā)送失敗")
} else {
alert("驗證碼發(fā)送成功，請耐心等待")
}
},
error: function() {
alert("發(fā)送失敗");
}
});
});
})二.圖形驗證碼
概要：一般的圖形驗證碼就像上方的短信驗證碼一樣，就是后臺生成的驗證碼圖片返回給前端的，那樣的話就比較簡單，因為復(fù)雜的都讓后臺解決了，我在這里主要說的是另一種，就是不調(diào)用后臺接口，通過canvas畫布來解決圖形驗證碼。
思路：
a.一個文本框用來輸入由數(shù)字和字母組合的驗證碼+一個畫布標(biāo)簽來顯示圖形驗證碼+一個提交按鈕；
b.提交按鈕進(jìn)行表單驗證，輸入正確或者錯誤進(jìn)行相應(yīng)的提示；
c.用畫布生成并渲染出驗證碼圖形，并且得到隨機的顏色值；
效果圖展示：
例3.0基礎(chǔ)圖片展示
例4.0提交成功效果展示
例5.0提交失敗效果展示
代碼展示：
HTML
<div class="code"> <input type="text" value="" placeholder="請輸入驗證碼（不區(qū)分大小寫）" 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畫圖的環(huán)境，演員表演的舞臺
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;//獲取到數(shù)組的長度
for (var i = 0; i < 4; i++) { //這里的for循環(huán)可以控制驗證碼位數(shù)（如果想顯示6位數(shù)，4改成6即可）
var j = Math.floor(Math.random() * aLength);//獲取到隨機的索引值
// var deg = Math.random() * 30 * Math.PI / 180;//產(chǎn)生0~30之間的隨機弧度
var deg = Math.random() - 0.5; //產(chǎn)生一個隨機弧度
var txt = aCode[j];//得到隨機的一個內(nèi)容
show_num[i] = txt.toLowerCase();
var x = 10 + i * 20;//文字在canvas上的x坐標(biāo)
var y = 20 + Math.random() * 8;//文字在canvas上的y坐標(biāo)
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>三.滑動驗證碼
摘要：博客園登錄的時候就用到了這個滑塊登錄，是完成拼圖形式的，我下面這個原理是一樣的，邏輯是根據(jù)鼠標(biāo)滑動軌跡，坐標(biāo)位置，計算拖動速度等等來判斷是否人為操作，如果小伙伴想做和博客園效果一樣的，那么可以用來做參考。
思路：
a.由三個div組成，構(gòu)成了滑塊和底部進(jìn)度條的效果；
b.書寫js,注冊鼠標(biāo)按下，懸浮，松開事件；
c.記錄滑塊移動的距離和狀態(tài)進(jìn)行判斷是否成功；
效果圖展示：
例6.0：滑動驗證碼初始狀態(tài)
例7.0：滑動狀態(tài)
例8.0：成功狀態(tài)
代碼展示：
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,//是否通過驗證的標(biāo)志
distance = box.offsetWidth - btn.offsetWidth;//滑動成功的寬度（距離）
//二、給滑塊注冊鼠標(biāo)按下事件
btn.onmousedown = function(e){
//1.鼠標(biāo)按下之前必須清除掉后面設(shè)置的過渡屬性
btn.style.transition = "";
bg.style.transition ="";
//說明：clientX 事件屬性會返回當(dāng)事件被觸發(fā)時，鼠標(biāo)指針向?qū)τ跒g覽器頁面(或客戶區(qū))的水平坐標(biāo)。
//2.當(dāng)滑塊位于初始位置時，得到鼠標(biāo)按下時的水平位置
var e = e || window.event;
var downX = e.clientX;
//三、給文檔注冊鼠標(biāo)移動事件
document.onmousemove = function(e){
var e = e || window.event;
//1.獲取鼠標(biāo)移動后的水平位置
var moveX = e.clientX;
//2.得到鼠標(biāo)水平位置的偏移量（鼠標(biāo)移動時的位置 - 鼠標(biāo)按下時的位置）
var offsetX = moveX - downX;
//3.在這里判斷一下：鼠標(biāo)水平移動的距離 與 滑動成功的距離 之間的關(guān)系
if( offsetX > distance){
offsetX = distance;//如果滑過了終點，就將它停留在終點位置
}else if( offsetX < 0){
offsetX = 0;//如果滑到了起點的左側(cè)，就將它重置為起點位置
}
//4.根據(jù)鼠標(biāo)移動的距離來動態(tài)設(shè)置滑塊的偏移量和背景顏色的寬度
btn.style.left = offsetX + "px";
bg.style.width = offsetX + "px";
//如果鼠標(biāo)的水平移動距離 = 滑動成功的寬度
if( offsetX == distance){
//1.設(shè)置滑動成功后的樣式
text.innerHTML = "驗證通過";
text.style.color = "#fff";
btn.innerHTML = "√";
btn.style.color = "green";
bg.style.backgroundColor = "lightgreen";
//2.設(shè)置滑動成功后的狀態(tài)
success = true;
//成功后，清除掉鼠標(biāo)按下事件和移動事件（因為移動時并不會涉及到鼠標(biāo)松開事件）
btn.onmousedown = null;
document.onmousemove = null;
//3.成功解鎖后的回調(diào)函數(shù)
setTimeout(function(){
alert('解鎖成功！');
},100);
}
}
//四、給文檔注冊鼠標(biāo)松開事件
document.onmouseup = function(e){
//如果鼠標(biāo)松開時，滑到了終點，則驗證通過
if(success){
return;
}else{
//反之，則將滑塊復(fù)位（設(shè)置了1s的屬性過渡效果）
btn.style.left = 0;
bg.style.width = 0;
btn.style.transition = "left 1s ease";
bg.style.transition = "width 1s ease";
}
//只要鼠標(biāo)松開了，說明此時不需要拖動滑塊了，那么就清除鼠標(biāo)移動和松開事件。
document.onmousemove = null;
document.onmouseup = null;
}
}
</script>總結(jié)
以上所述是小編給大家介紹的驗證碼功能的三種實現(xiàn)方式，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com
Copyright ? 2019-2025 51dongshi.com 版權(quán)所有
違法及侵權(quán)請聯(lián)系：TEL:177 7030 7066 E-MAIL:11247931@qq.com 本站由北京市萬商天勤律師事務(wù)所王興未律師提供法律服務(wù)
