實際效果

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

彈框的樣式如圖二所示：
（圖二）

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

（圖三）

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

（圖四）
——–營業執照頁面為私密頁面，使用其他頁面代替原圖。

路由層描述

//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層描述

//1-獲取路由傳遞的 csnonce<script>APP.newLogin= {csnonce: '<%- csnonce %>',};</script>//2-獲取路由傳遞的captcha<script type="text/javascript" src="<%= captcha %>"></script>//3-引入相關ＪＳ文件<script>seajs.use("js_cmd/vshop/home-cmd");</script><link href="/css/vshop/describe.css?v=<%= config.version %>" rel="stylesheet" /><style id="dynamic"></style><div class="arrow_mask"></div><div class="arrow"><div><img src="/imgs/vshop/verification-code-back.png" class="verification-code-back" /></div><ul class="arrow-mess"> <span class="sku-close" id="btn_sku_dialog_close"> </span><li>請輸入下面的圖形驗證碼</li><li><img id="J_BtnVerifyPicCodeTencent" src="" class="captcha" style="height:30px;margin:0 15px;" /></li><li><div class="btn_mes"><input class="btn_mes_text" type="text" maxlength="6"></div></li></ul><div class="btn_mes2"><input type="button" class="license-submit" value="提交"></div></div><div data-role="container" class="body <%= pageName %>"><header data-role="header"><%- include ./widget_vshop %></header><section data-role="body" class="section-body"><div class="div-section div-section-info"><ul class="info1"><li class="gap"><div class="left">所在地</div><div class="right"><%- detail.address%></div></li><li><div class="left">開店時間</div><div class="right"><%- detail.createTime%></div></li></ul><ul class="info2"><li class="gap"><div class="left">發貨速度</div><div class="right"><%- detail.score.express%></div></li><li class="gap"><div class="left">服務態度</div><div class="right"><%- detail.score.service%></div></li><li><div class="left">描述相符</div><div class="right"><%- detail.score.describe%></div></li></ul><ul class="info3"><%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 class="left anotherC">認證</div><div class="right textR"><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 class="info4"><li><a href="tel:<%- detail.phone%>" class="tel">服務電話</a></li><li><a data-aid="<%- aid%>" class="webim">在線客服</a></li><li class="business-license"><!--<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>

JS層描述

//1-引入頁面所需的各個模塊define(function (require, exports, module) {var $ = require("./top-suction-cmd"),Vue = require("lib_cmd/vue-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();});//6-初始化，參數傳入顯示驗證碼的元素imgidTSOCapObj.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);}});}}//7- 頁面初始化函數的執行$(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;}

總結

以上是生活随笔為你收集整理的JS如何制作图形验证码的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。