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 相关文章推荐
推荐11款jQuery开发的复选框和单选框美化插件
Aug 02 Javascript
2则自己编写的jQuery特效分享
Feb 26 Javascript
利用python分析access日志的方法
Oct 26 Javascript
微信小程序 缓存(本地缓存、异步缓存、同步缓存)详解
Jan 17 Javascript
Bootstrap组件之下拉菜单,多级菜单及按钮布局方法实例
May 25 Javascript
关于echarts在节点显示动态数据及添加提示文本所遇到的问题
Apr 20 Javascript
JS中通过url动态获取图片大小的方法小结(两种方法)
Oct 31 Javascript
JS实现点击按钮随机生成可拖动的不同颜色块示例
Jan 30 Javascript
vue 实现小程序或商品秒杀倒计时
Apr 14 Javascript
JS中的算法与数据结构之集合(Set)实例详解
Aug 20 Javascript
解决父组件将子组件作为弹窗调用只执行一次created的问题
Jul 24 Javascript
详解Vue中$props、$attrs和$listeners的使用方法
Feb 18 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高级编程实例:编写守护进程
2014/09/02 PHP
php 可变函数使用小结
2018/06/12 PHP
PHP判断是否微信访问的方法示例
2019/03/27 PHP
关于 byval 与 byref 的区别分析总结
2007/10/08 Javascript
基于jquery实现的表格分页实现代码
2011/06/21 Javascript
IE网页js语法错误2行字符1、FF中正常的解决方法
2013/09/09 Javascript
多种JQuery循环滚动文字图片效果代码
2020/06/23 Javascript
原生JS实现匀速图片轮播动画
2016/10/18 Javascript
layer实现弹窗提交信息
2016/12/12 Javascript
Angular.js实现注册系统的实例详解
2016/12/18 Javascript
浅谈DOM的操作以及性能优化问题-重绘重排
2017/01/08 Javascript
vue 自定义全局方法,在组件里面的使用介绍
2018/02/28 Javascript
vue.js基于v-for实现批量渲染 Json数组对象列表数据示例
2019/08/03 Javascript
js 实现watch监听数据变化的代码
2019/10/13 Javascript
js实现移动端吸顶效果
2020/01/08 Javascript
element-ui table行点击获取行索引(index)并利用索引更换行顺序
2020/02/27 Javascript
Vue与React的区别和优势对比
2020/12/18 Vue.js
Python运用于数据分析的简单教程
2015/03/27 Python
Python xlrd读取excel日期类型的2种方法
2015/04/28 Python
Python聚类算法之DBSACN实例分析
2015/11/20 Python
Python学生信息管理系统修改版
2018/03/13 Python
通过Py2exe将自己的python程序打包成.exe/.app的方法
2018/05/26 Python
对Python 获取类的成员变量及临时变量的方法详解
2019/01/22 Python
Python创建字典的八种方式
2019/02/27 Python
Python3中urlencode和urldecode的用法详解
2019/07/23 Python
Python高级编程之消息队列(Queue)与进程池(Pool)实例详解
2019/11/01 Python
关于Pytorch的MNIST数据集的预处理详解
2020/01/10 Python
Python3+SQLAlchemy+Sqlite3实现ORM教程
2021/02/16 Python
面向中国市场的在线海淘美妆零售网站:Beauty House美丽屋
2021/03/02 全球购物
餐饮业的创业计划书范文
2013/12/26 职场文书
战友聚会邀请函
2014/01/18 职场文书
淘宝客服专员岗位职责
2014/04/11 职场文书
2015年汽车销售工作总结
2015/04/07 职场文书
教师纪律作风整顿心得体会
2016/01/23 职场文书
Nginx安装完成没有生成sbin目录的解决方法
2021/03/31 Servers
总结高并发下Nginx性能如何优化
2021/11/01 Servers