背景
最近在做關于驗證碼項目的時候尖飞，從交互的角度梳理了驗證碼的驗證行式，今天總結一下驗證碼在產(chǎn)品中出現(xiàn)的驗證行式店雅。
驗證行式
圖形驗證碼通過用戶的操作來完成驗證政基，常見的驗證行式有嵌入式、觸發(fā)式闹啦、彈窗式沮明。
嵌入式
驗證碼直接完整嵌入網(wǎng)頁，清晰直觀窍奋，便于用戶使用和廣告宣傳荐健。
下面是前端調(diào)用代碼：
<script src="https://cdn8.kgcaptcha.com/captcha.js?appid=94dATYQa"></script>
<script>
kg.captcha({
// 綁定元素，驗證框顯示區(qū)域
bind: "#captchaBox",
// 驗證成功事務處理
success: function(e) {
console.log(e);
},
// 驗證失敗事務處理
failure: function(e) {
console.log(e);
},
// 點擊刷新按鈕時觸發(fā)
refresh: function(e) {
console.log(e);
}
});
</script>
<div id="captchaBox">載入中 ...</div>
觸發(fā)式
默認只顯示滑動條琳袄，鼠標懸徒。互動顯示驗證圖片，廣泛用于任何場景窖逗，不影響網(wǎng)站的排版和美觀址否。
鼠標懸停顯示驗證碼：
/* 觸發(fā)式 */
if(kgConfig["type"] === 2){
/* 點擊區(qū)域外隱藏伸縮框 */
document.addEventListener("mousedown", function(e){
var str = e.target.childNodes;
if(e.target.id){
outside = e.target.id !== "KgBasemap";
} else {
var outside = true; /* 是否為外部點擊 */
for (var i = 0; i < str.length; i++) {
if (str[i].id === "KgBasemap") {
outside = false;
}
}
if (str.length === 0){
outside = false;
}
}
if (outside) {
/* 隱藏拼圖區(qū)域 */
kg.show(kg.$(param["bind"] + " #KgBasemap"), 0);
}
});
}
/* 觸發(fā)式(向上/下)顯示拼圖區(qū)域 */
if(kgConfig["type"] === 2){
if (param["float"] === "down"){
kg.$(param["bind"] + " #KgBasemap").className = "KgBasemapDown";
}
kg.show(kg.$(param["bind"] + " #KgBasemap"), 1);
}
彈窗式
默認不顯示驗證碼，點擊提交碎紊、確定佑附、發(fā)送等觸發(fā)驗證樊诺。體驗相對來說會更加友好，適用場景也更廣泛音同。
創(chuàng)建彈窗并顯示/隱藏：
/* 彈出式拼圖 */
if(kgConfig["type"] === 3){
var popupButton = kg.default(param["button"], "#captchaButton"); /* 彈出式按鈕 id */
param["bind"] = kg.popupAddId; /* 創(chuàng)建新彈窗 ID */
/* 刷新時词爬，刪除上次創(chuàng)建的彈出窗口DIV，重新創(chuàng)建 */
if(kg.$(param["bind"])){kg.$(param["bind"]).parentNode.removeChild(kg.$(param["bind"]));}
/* 在Button前創(chuàng)建一個DIV并輸出彈窗模板 */
var add_div = document.createElement("div");
add_div.id = kg.popupAddId.substring(1); /* 去除 # */
add_div.innerHTML = kgConfig["styleTpl"];
/* 創(chuàng)建彈窗 */
/* 1权均、body 開始創(chuàng)建 */
kg.$("body").insertBefore(add_div, kg.$("body").childNodes[0]);
/* 2缸夹、當前按鈕前創(chuàng)建
kg.$(popupButton).parentNode.insertBefore(add_div, kg.$(popupButton)); */
/* 彈出事件綁定 */
kg.$(popupButton).onclick = function(e){
popup(1);
}
/* 關閉按鈕事件綁定 */
kg.$(param["bind"] + " #KgPuzzleTitle ol:nth-child(2) img").onclick = function(e){
popup(0);
}
kg.$(param["bind"] + " #KgPuzzleBody").onclick = function(e){
popup(0);
}
}
/* 設置元素為顯示/隱藏狀態(tài)，獲取元素顯示/隱藏狀態(tài) */
/* target: 需要設置/獲取的元素對象螺句，kg.$("#div"); */
/* state: [0|1] 0 設置為隱藏狀態(tài)虽惭、1 設置為顯示狀態(tài)、忽略該參數(shù)為獲取display狀態(tài) */
show: function (target, state) {
if (state === undefined) {
return target.style.display;
} else {
if (state === 0) {
target.style.display = "none";
} else {
target.style.display = "block";
}
}
}
總結
以上就是文章的全部內(nèi)容蛇尚，下面附上示例代碼一份：https://github.com/KgCaptcha芽唇，和示例體驗地址：https://www.kgcaptcha.com/demo/，2023年在這新的一年里取劫，加油吧匆笤！
