JS製作圖形驗證碼實現代碼

第一步我們來到要展示驗證碼的頁面，當我們按下營業執照的時候讓其，彈出一個彈框，彈框的上面就是驗證碼，如圖一所示：

（圖一）

彈框的樣式如圖二所示：

（圖二）

我們要對驗證碼的值進行校驗，判斷驗證碼是否輸入正確，當輸入不正確的時候，我們提示錯誤信息，提示信息如圖三所示：

（圖三）

如果頁面了驗證正確，這不會提示錯誤信息並且調到我們的目標頁面，如圖四所示：

（圖四）

路由層描述

 /** 供貨商店鋪－店鋪簡介*/ //1-在路由層進行設置，頁面跳轉到根目錄下/buyer/vshop/info.ejs頁面進行跳轉，然後在回調函數中進行接口的調用router.get('/buyer/vshop/info', function(req, res, next) { //2-調用接口獲取數據async.parallel({ verifycode :function(fn){ //3-調用接口獲取本機的IP地址var args= { userIp: tools.getClientIp(req) }; //4-調用接口verifyCodeHelper的createVcode方法獲取captcha與csnonce的數據，他們的值都是騰訊接口verifyCodeHelper返回的數據verifyCodeHelper.createVcode(args, function(err, result){ if (err) { console.log(err); } else{ fn(null, { captcha: result.data.queryUrl, csnonce: result.csnonce || 0 }) } }); } },function(err, result){ if (err) { res.end(err); }else{ result.getDetail= res.shopInfo; var fxzStatus = res.fxzStatus || {}; //5-進行根目錄下buyer/vshop/describe頁面的渲染，傳遞相關參數到EJS頁面res.render("buyer/vshop/describe", { title: srcBizType==1 ? result.getDetail.name : "店鋪簡介", pageName:"vshopInfo", captcha:result.verifycode.captcha,//驗證碼isTencent: 1, csnonce:result.verifycode.csnonce }); } }); });

EJS層描述

 <%- include ../../header %> //1-獲取路由傳遞的csnonce <script> APP.newLogin= { csnonce: '<%- csnonce %>', }; <link href="/css/vshop/describe.css?v=<%= config.version %>" rel="stylesheet" /> <style id="dynamic"></style> <div></div> <div> <div> <img src="/imgs/vshop/verification-code-back.png" /> </div> <ul> <span id="btn_sku_dialog_close"> </span> <li>請輸入下面的圖形驗證碼</li> <li> <img id="J_BtnVerifyPicCodeTencent" src="" style="height:30px;margin:0 15px;" /> </li> <li> <div> <input type="text" maxlength="6"> </div> </li> </ul> <div> <input type="button" value="提交"> </div> </div> <div data-role="container"> <header data-role="header"> <%- include ./widget_vshop %> </header> <section data-role="body"> <div> <ul> <li><div>所在地</div><div><%- detail.address%></div></li> <li><div>開店時間</div><div><%- detail.createTime%></div></li> </ul> <ul> <li><div>發貨速度</div><div><%- detail.score.express%></div></li> <li><div>服務態度</div><div><%- detail.score.service%></div></li> <li><div>描述相符</div><div><%- detail.score.describe%></div></li> </ul> <ul> <%if(detail.shopTypeIndex==1||detail.shopTypeIndex==2||detail.shopTypeIndex==3){var bg = '/imgs/vshop/tip.png',color='#39dda5' }else{var bg = '/imgs/vshop/tip3.png',color='#59aaff'}%> <li><div>認證</div><div><span style="background: url(<%-bg%>) left 1px no-repeat;background-size: 14px 12px;"><i style="background: <%-color%>"><%- detail.shopType %></i></span></div></li> </ul> <ul> <li><a href="tel:<%- detail.phone%>">服務電話</a></li> <li><a data-aid="<%- aid%>">在線客服</a></li> <li> <!--<a href="/buyer/vshop/license?aid=<%- aid%>">--> <a href="#"> <span >營業執照</span> <label>查看<span></span></label> </a> </li> </ul> </div> <%- include ./footer %> <div id="vue_hooker"> <child-nav></child-nav> <%- include ../../widget_navBtns %> </div> </section> </div> //2-獲取路由傳遞的captcha <script type="text/javascript" src="<%= captcha %>"></script> //3-引入相關ＪＳ文件<script> seajs.use("js_cmd/vshop/home-cmd"); </script> <%- include ../../footer %>

JS層描述

/** 這是一個公用文件，vshop首頁&vshop全部商品共用*/ //1-引入頁面所需的各個模塊define(function (require, exports, module) { var $ = require("./top-suction-cmd"), myDialog = require("lib_cmd/myDialog-cmd"), main = require("js_cmd/main-cmd"), DataLoader = require("./tool-cmd"), fxzTool = require("./fxzTool-cmd"), Vue = require("lib_cmd/vue-cmd"), widget_navBtns = require("js_cmd/navBtns-cmd"), $eles = {}, eles = {}; //2-Vue實例化var vm = new Vue({ data: {}, methods: {} }); //3- 頁面初始化函數function initPage() { vm.$mount('#vue_hooker'); window.scroll(0,0); } //4- 驗證碼相關處理函數function license(){ $('.info4 .business-license').click(function (ev) { //彈層$('.btn_mes_text').val(""); $('.arrow_mask').show(); $('.arrow').show(); $('#nav_omit').remove(); }); $('#btn_sku_dialog_close').click(function(ev){//彈窗$('.arrow_mask').hide(); $('.arrow').hide(); $('.btn_mes_text').val(""); }); $('.btn_mes_text').focus(function(){ //輸入框獲得焦點$('.btn_mes_text').val(""); if($('.verification-code').length!=0){ $('.verification-code').remove(); } }); $('.license-submit').click(function(){ APP.verifyPicCode(); }); } //5- 驗證碼初始化函數（） TSOCapObj是騰訊接口裡面的方法function verify_initPage(){ $('#J_BtnVerifyPicCodeTencent').on('click', function () { TSOCapObj.refresh(); }); //初始化，參數傳入顯示驗證碼的元素imgid TSOCapObj.init("J_BtnVerifyPicCodeTencent"); //刷新拉取驗證碼圖片TSOCapObj.refresh(); APP.verifyPicCode= function(fn) { //獲取用戶輸入var ans = $(".btn_mes_text").val(); //驗證答案，驗證完成後會回調第二個參數傳入的函數TSOCapObj.verify(ans , function(ret_json){ if (ret_json.errorCode!=0) { $(".btn_mes_text").val(""); TSOCapObj.refresh(); //tip("圖形驗證碼輸入錯誤！"); if($('.verification-code').length==0){ $('.btn_mes').eq(0).append(" <div class='verification-code'>請輸入正確的驗證碼</div>"); } $('.btn_mes_text').blur(function(){ $('.btn_mes_text').text(""); }); } else { window.location="/buyer/vshop/license?aid=" + APP.aid; fn(ret_json.ticket); } }); } } //6- 頁面初始化函數的執行$(function () { initPage(); license(); verify_initPage(); }); });

CCS層描述

 @import url(common.css); .div-section-info .info4{padding: 0} .div-section-info .info4 li{ padding: 11px 14px; line-height: 20px; border-bottom: 1px solid #e6e6e6; } .div-section-info .info4 li a{ color: #333; display: block; } .div-section-info .info4 li a.tel{ background: url(/imgs/vshop/callAndMsg.png) no-repeat; background-size: 20px 60px; background-position: right 0; } .div-section-info .info4 li a.webim{ background: url(/imgs/vshop/callAndMsg.png) no-repeat; background-size: 20px 60px; background-position: right -30px; } .div-section-info .info4 li a label{ display: block; float: right; } .div-section-info .info4 li a label span{ display: block; width: 12px; height: 12px; border-right:1px solid #666; border-bottom:1px solid #666; -webkit-transform:rotate(-45deg); float: right; margin-top: 4px; } .arrow_mask { position: fixed; top: 0; left: 0; bottom: 0; right: 0; z-index: 101; display: none; background: black; opacity: 0.7; } .arrow{ width: 250px; height: 226px; background-color: #FFFFFF; position: fixed; top: 50%; left: 50%; z-index: 102; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); border-radius: 10px; display: none; } .arrow-mess li:nth-of-type(1){ text-align: center; margin-bottom: 8px; font-size: 14px; color: #333333; } .arrow-mess li:nth-of-type(2){ text-align: center; margin-bottom: 10px; } .arrow-mess li:nth-of-type(3) input{ width: 100%; height: 30px; border: 1px solid #979797; text-align: center; border-radius: 3px; font-family: PingFangSC-Regular; font-size: 16px; color: #333333; letter-spacing: 0px; } .btn_mes{ margin-bottom: 15px; width: 100%; padding-left: 48px; padding-right: 48px; position: relative; } .btn_mes2{ width: 100%; padding-left: 70px; padding-right: 70px; /* position: relative; */ position: absolute; bottom: 0px; margin-bottom: 10px; } .license-submit{ width: 100%; height: 44px; background: #FF534C; border: 1px solid #FF534C; font-size: 14px; border-radius: 4px; color: #FFFFFF; } .sku-close { background: url(/imgs/vshop/verification-code-del.png) no-repeat right; -webkit-background-size: 25px auto; display: inline-block; width: 26px; height: 26px; position: absolute; right: 0px; top: 0px; margin-right: -13px; margin-top: -13px; } .verification-code{ z-index: 102; color: #FFAA00; position: absolute; font-size: 12px; top: 4px; } .verification-code-back{ width: 100%; position: absolute; height: 46px; } .arrow div:nth-of-type(1){ position: relative; } .arrow-mess{ margin-top: 52px; }

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。