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


Posted in Javascript onDecember 22, 2016

js 图形验证码制作

实际效果

第一步我们来到要展示验证码的页面,当我们按下营业执照的时候让其,弹出一个弹框,弹框的上面就是验证码,如图一所示:
Javascript 制作图形验证码实例详解(图一)

弹框的样式如图二所示:
Javascript 制作图形验证码实例详解(图二)

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

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

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

Javascript 制作图形验证码实例详解(图四)
——?营业执照页面为私密页面,使用其他页面代替原图。

路由层描述

//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-引入相关JS文件

    <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-初始化,参数传入显示验证码的元素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);
            }
          });
        }
      }

  //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;
    }
Javascript 相关文章推荐
最近项目写了一些js,水平有待提高
Jan 31 Javascript
JS类的封装及实现代码
Dec 02 Javascript
让IE8浏览器支持function.bind()方法
Oct 16 Javascript
angularJS与bootstrap结合实现动态加载弹出提示内容
Oct 16 Javascript
JS实现自定义简单网页软键盘效果代码
Nov 05 Javascript
用js读写cookie的简单方法(推荐)
Aug 08 Javascript
JS多文件上传的实例代码
Jan 11 Javascript
Angularjs 双向绑定时字符串的转换成数字类型的问题
Jun 12 Javascript
微信小程序实现留言功能
Oct 31 Javascript
微信小程序基于canvas渐变实现的彩虹效果示例
May 03 Javascript
详解JavaScript修改注册表的方法
Jan 05 Javascript
vue如何实现关闭对话框后刷新列表
Apr 08 Vue.js
jquery中用函数来设置css样式
Dec 22 #Javascript
jquery实现(textarea)placeholder自动换行
Dec 22 #Javascript
js数组去重的hash方法
Dec 22 #Javascript
JavaScript生成.xls文件的代码
Dec 22 #Javascript
微信小程序 表单Form实例详解(附源码)
Dec 22 #Javascript
微信小程序 122100版本更新问题解决方案
Dec 22 #Javascript
JS闭包与延迟求值用法示例
Dec 22 #Javascript
You might like
PHP迭代与递归实现无限级分类
2017/08/28 PHP
使用 PHP Masked Package 屏蔽敏感数据的实现方法
2019/10/15 PHP
通过ifame指向的页面高度调整iframe的高度
2006/10/05 Javascript
javascript多种数据类型表格排序代码分析
2010/09/11 Javascript
简单的两种Extjs formpanel加载数据的方式
2013/11/09 Javascript
EasyUi combotree 实现动态加载树节点
2016/04/01 Javascript
js拖拽的原型声明和用法总结
2016/04/04 Javascript
jquery.validate使用详解
2016/06/02 Javascript
chrome浏览器如何断点调试异步加载的JS
2016/09/05 Javascript
jQuery实现根据生日计算年龄 星座 生肖
2016/11/23 Javascript
JS组件系列之JS组件封装过程详解
2017/04/28 Javascript
JS实现身份证输入框的输入效果
2017/08/21 Javascript
基于jquery.page.js实现分页效果
2018/01/01 jQuery
微信小程序canvas绘制圆角base64图片的实现
2019/08/18 Javascript
JS数组push、unshift、pop、shift方法的实现与使用方法示例
2020/04/29 Javascript
Vue 的双向绑定原理与用法揭秘
2020/05/06 Javascript
google广告之另类js调用实现代码
2020/08/22 Javascript
python用来获得图片exif信息的库实例分析
2015/03/16 Python
python 实现一个贴吧图片爬虫的示例
2017/10/12 Python
python 通过logging写入日志到文件和控制台的实例
2018/04/28 Python
Python实现使用卷积提取图片轮廓功能示例
2018/05/12 Python
html5开发之viewport使用
2013/10/17 HTML / CSS
Evisu官方网站:日本牛仔品牌,时尚街头设计风格
2016/12/30 全球购物
Hotels.com越南:酒店预订
2019/10/29 全球购物
护士毕业生自荐信
2014/02/07 职场文书
英文求职信范文
2014/05/23 职场文书
教师职位说明书
2014/07/29 职场文书
医生个人年度总结
2015/02/28 职场文书
暂停营业通知
2015/04/25 职场文书
校友会致辞
2015/07/30 职场文书
汽车车尾标语大全
2015/08/11 职场文书
2019自荐信该如何写呢?
2019/07/05 职场文书
导游词之河姆渡遗址博物馆
2019/10/10 职场文书
《妈妈别哭,有我在》读后感3篇
2020/01/13 职场文书
Python数据类型最全知识总结
2021/05/31 Python
IDEA 2022 Translation 未知错误 翻译文档失败
2022/04/24 Java/Android