Javascript 制作图形验证码实例详解

JavaScript 2019-01-06

js 图形验证码制作

实际效果

第一步我们来到要展示验证码的页面，当我们按下营业执照的时候让其，弹出一个弹框，弹框的上面就是验证码，如图一所示：

这里写图片描述

（图一）

弹框的样式如图二所示：

这里写图片描述

（图二）

我们要对验证码的值进行校验，判断验证码是否输入正确，当输入不正确的时候，我们提示错误信息，提示信息如图三所示：

这里写图片描述

（图三）

如果页面了验证正确，这不会提示错误信息并且调到我们的目标页面，如图四所示：

这里写图片描述

（图四） ——–营业执照页面为私密页面，使用其他页面代替原图。

路由层描述

rush:js;"> //1-在路由层进行设置，页面跳转到根目录下/buyer/vshop/info.ejs页面进行跳转，然后在回调函数中进行接口的调用 
    router.get('/buyer/vshop/info',function(req,res,next) {

//2-调用接口获取数据 

    async.p<a href="https://www.jb51.cc/tag/ara/" target="_blank" class="keywords">ara</a>llel({ 
      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
            })
          }
        });
      }
    },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
        });
      }
    });
  });</pre>

EJS层描述

rush:js;"> //1-获取路由传递的 csnonce 
<script>
  APP.newLogin= {
    csnonce: '<%- csnonce %>',};
</script>

//2-获取路由传递的captcha

<script type="text/javascript" src="<%= captcha %>"&gt;</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"&gt;</style>
<div class="arrow_mask"&gt;</div>
<div class="arrow"&gt;
  <div>
    <img src="/imgs/vshop/verification-code-back.png" class="verification-code-back" />
  </div>
  <ul class="arrow-mess"&gt; <span class="sku-close" id="btn_sku_dialog_close"&gt; </span>
    <li>请输入下面的图形验证码</li>
    <li>
        <img id="J_BtnVerifyPicCodeTencent" src="" class="captcha" style="height:30px;margin:0 15px;" />
    </li>
    <li>
      <div class="btn_mes"&gt;
        <input class="btn_mes_text" type="text" maxlength="6"&gt;
      </div>
    </li>
  </ul>
  <div class="btn_mes2"&gt;
    <input type="button" class="license-submit" value="提交"&gt;
  </div>
</div>
<div data-role="container" class="body <%= pageName %>"&gt;
  <header data-role="header"&gt;
    <%- include ./widget_vshop %>
  </header>
  <section data-role="body" class="section-body"&gt;
    <div class="div-section div-section-info"&gt;
      <ul class="info1"&gt;
        <li class="gap"&gt;<div class="left"&gt;所在地</div><div class="right"&gt;<%- detail.address%></div></li>
        <li><div class="left"&gt;开店时间</div><div class="right"&gt;<%- detail.createTime%></div></li>
      </ul>
      <ul class="info2"&gt;
        <li class="gap"&gt;<div class="left"&gt;发货速度</div><div class="right"&gt;<%- detail.score.express%></div></li>
        <li class="gap"&gt;<div class="left"&gt;服务态度</div><div class="right"&gt;<%- detail.score.service%></div></li>
        <li><div class="left"&gt;描述相符</div><div class="right"&gt;<%- detail.score.describe%></div></li>
      </ul>
      <ul class="info3"&gt;
        <%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"&gt;认证</div><div class="right textR"&gt;<span style="background: url(<%-bg%>) left 1px no-repeat;background-size: 14px 12px;"&gt;<i style="background: <%-color%>"&gt;<%- detail.shopType %></i></span></div></li>
      </ul>
      <ul class="info4"&gt;
        <li><a href="tel:<%- detail.phone%>" class="tel"&gt;服务电话</a></li>
        <li><a data-aid="<%- aid%>" class="webim"&gt;在线客服</a></li>
        <li class="busi<a href="https://www.jb51.cc/tag/nes/" target="_blank" class="keywords">nes</a>s-license"&gt;
          <!--<a href="/buyer/vshop/license?aid=<%- aid%>"&gt;-->
          <a href="#"&gt;
            <span >营业执照</span>
            <label>查看<span></span></label>
          </a>

        </li>
      </ul>
    </div>
    <%- include ./footer %>
    <div id="vue_hooker"&gt;
      <child-nav></child-nav>
      <%- include ../../widget_navBtns %>
    </div> 
  </section>
</div></pre>

JS层描述

rush: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-初始化，参数传入显示验证码的元素imgid
TSOCapObj.init("J_BtnVerifyPicCodeTencent");
//刷新拉取验证码图片
TSOCapObj.refresh();

    APP.verifyPicCode= function(fn) {
      //<a href="https://www.jb51.cc/tag/huoqu/" target="_blank" class="keywords">获取</a><a href="https://www.jb51.cc/tag/yonghu/" target="_blank" class="keywords">用户</a>输入
      var ans = $(".btn_mes_text").val();
      //验证答案，验证完成后会回调第二个参数传入的<a href="https://www.jb51.cc/tag/hanshu/" target="_blank" class="keywords">函数</a>
      TSOCapObj.verify(ans,function(ret_json){
        if (ret_json.errorCode!=0) {
          $(".btn_mes_text").val("");
          TSOCapObj.refresh();
          //tip("图形验证码输入<a href="https://www.jb51.cc/tag/cuowu/" target="_blank" class="keywords">错误</a>！");
          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();
});

});</pre>

CCS层描述

rush:js;"> @import url(common.css); 
.div-section-info .info4{padding: 0}
.div-section-info .info4 li{
  padding: 11px 14px;
  line-height: 20px;
  border-b<a href="https://www.jb51.cc/tag/ott/" target="_blank" class="keywords">ott</a>om: 1px solid #e6e6e6;

}
.div-section-info .info4 li a{
  color: #333;

  <a href="https://www.jb51.cc/tag/dis/" target="_blank" class="keywords">dis</a>play: 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{ 
  <a href="https://www.jb51.cc/tag/dis/" target="_blank" class="keywords">dis</a>play: block;
  float: right;
}

.div-section-info .info4 li a label span{ 
  <a href="https://www.jb51.cc/tag/dis/" target="_blank" class="keywords">dis</a>play: block;
  width: 12px;
  height: 12px;
  border-right:1px solid #666;
  border-b<a href="https://www.jb51.cc/tag/ott/" target="_blank" class="keywords">ott</a>om:1px solid #666;
  -webkit-transform:rotate(-45deg);
  float: right;
  margin-top: 4px;

}
.arrow_mask {
  position: fixed;
  top: 0;
  left: 0;
  b<a href="https://www.jb51.cc/tag/ott/" target="_blank" class="keywords">ott</a>om: 0;
  right: 0;
  z-index: 101;
  <a href="https://www.jb51.cc/tag/dis/" target="_blank" class="keywords">dis</a>play: 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;
  <a href="https://www.jb51.cc/tag/dis/" target="_blank" class="keywords">dis</a>play: none;
}
.arrow-mess li:nth-of-type(1){
  text-align: center;
  margin-b<a href="https://www.jb51.cc/tag/ott/" target="_blank" class="keywords">ott</a>om: 8px;
  font-size: 14px;
  color: #333333;
}
.arrow-mess li:nth-of-type(2){
  text-align: center;
  margin-b<a href="https://www.jb51.cc/tag/ott/" target="_blank" class="keywords">ott</a>om: 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-b<a href="https://www.jb51.cc/tag/ott/" target="_blank" class="keywords">ott</a>om: 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;
  b<a href="https://www.jb51.cc/tag/ott/" target="_blank" class="keywords">ott</a>om: 0px;
  margin-b<a href="https://www.jb51.cc/tag/ott/" target="_blank" class="keywords">ott</a>om: 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;
  <a href="https://www.jb51.cc/tag/dis/" target="_blank" class="keywords">dis</a>play: 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;
}</pre>
js制作图形验证码图像验证码验证码制作

相关文章

【JavaScript】聊一聊js中的浅拷贝与深拷贝与手写实现
什么是深拷贝与浅拷贝？深拷贝与浅拷贝是js中处理对象或数据...
【JavaScript】前端算法题（重建二叉树、反向输出链表每个节点）
前言 今天复习了一些前端算法题，写到一两道比较有意思的题：...
【JavaScript】聊聊js中关于this的指向
最近在看回JavaScript的面试题，this 指向问题是入坑前端必须...
js如何实现弹出form提交表单？
js如何实现弹出form提交表单？（图文+视频）
js怎么获取复选框选中的值
js怎么获取复选框选中的值
js如何实现倒计时跳转页面
js如何实现倒计时跳转页面