JS makes graphics verification code to implement code _JAVASCRIPT skills

The first step is to show the verification code page, when we press the business license to let it, pop-up a frame, the frame above is the verification code, as shown in figure:

(Figure I)

The style of the frame is shown in Figure II:

(Figure II)

We want to check the value of the verification code, to determine whether the verification code is entered correctly, when the input is not correct, we prompt the error message, the message as shown in Figure three:

(Figure III)

If the page is validated correctly, this does not prompt for an error message and is transferred to our target page, as shown in Figure four:

(Figure IV)

Routing Layer Description

    /** Supplier Shop-Shop profile///1-at the routing layer, the page jumps to the root/buyer/vshop/info.ejs page to jump, and then the call to the interface in the callback function Router.get (' /buyer/vshop/info ', function (req, res, next) {//2-call interface to get data Async.Parallel ({verifycode:function (

          FN) {//3-call interface to get native IP address var args= {userIp:tools.getClientIp (req)}; 4-Call Interface Verifycodehelper Createvcode method to get captcha and csnonce data, their values are Tencent interface Verifycodehelper returned data verifycodehelper.cr
            Eatevcode (args, function (err, result) {if (err) {Console.log (err); else{fn (null, {CAPTCHA:RESULT.DATA.QUERYURL, Csnonce:resul t.csnonce | |
        0})});
        }},function (err, result) {if (err) {res.end (err);
          }else{result.getdetail= Res.shopinfo; var fxzstatus = Res.fxzstatus | |

        {}; 5-Perform root directory Buyer/vshop/describe-page rendering, passing related parameters to Ejs page res.render ("Buyer/vshop/describe", {title:srcbiztype==1? result.getdetail. Name: "Shop profile", pagename: "vshopinfo", captcha:result.verifycode.captcha,//Verification code Istencent
        : 1, csnonce:result.verifycode.csnonce});
    }
      });

 });

 ejs Layer Description

  <%-include. /..
  /header%>//1-Get route delivery csnonce <script> app.newlogin= {csnonce: ' <%-csnonce ',}; <link href= "/css/vshop/describe.css?v=<%= config.version%>" rel= "stylesheet"/> <style "dynamic" & gt;</style> <div class= "Arrow_mask" ></div> <div class= "Arrow" > <div>  </div> <ul class= "arrow-
      Mess "> <span class=" sku-close "id=" Btn_sku_dialog_close "> </span> <li> Please enter the following graphics verification code </li> <li>  </li> <li> <div class=" Btn_mes "> <input class=" Btn_mes_tex
      T "type=" text "maxlength=" 6 "> </div> </li> </ul> <div class=" Btn_mes2 "> <inpUT type= "button" class= "License-submit" value= "Submit" > </div> </div> <div data-role= "container" cla ss= "body <%= pagename%>" >  

 js Layer Description
  

 /** This is a common file, Vshop home &vshop all products Share * *//1-the various modules required to introduce the page 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 instantiation of var vm = new Vue ({data: {}, methods: {}});
      3-page initialization function initpage () {vm. $mount (' #vue_hooker ');
    Window.Scroll (0,0); //4-Authentication Code correlation handler function license () {$ ('. Info4. Business-license '). Click (function (EV) {//Shell $ ('. Btn_
        Mes_text '). Val ("");
        $ ('. Arrow_mask '). Show ();
        $ ('. Arrow '). Show ();
      $ (' #nav_omit '). Remove ();
      });
        $ (' #btn_sku_dialog_close '). Click (function (EV) {//Pinball window $ ('. Arrow_mask '). Hide (); $ ('. Arrow '). Hide ();
      $ ('. Btn_mes_text '). Val ("");

      });
        $ ('. Btn_mes_text '). focus (function () {//input box gets the center $ ('. Btn_mes_text '). Val ("");
        if ($ ('. Verification-code '). length!=0) {$ ('. Verification-code '). Remove ();
      }
      });
      $ ('. License-submit '). Click (function () {app.verifypiccode ();

    }); The//5-Authentication Code initialization function () Tsocapobj is the method function Verify_initpage () {$ (' #J_BtnVerifyPicCodeTencent ') inside the Tencent interface. On (' Clic
      K ', function () {Tsocapobj.refresh ();
      });
      Initializes, the parameter passes in the element that displays the authentication code imgid tsocapobj.init ("j_btnverifypiccodetencent");

      Refresh Pull Verification Code picture Tsocapobj.refresh ();
        app.verifypiccode= function (FN) {//get user input var ans = $ (". Btn_mes_text"). Val ();
            Validates the answer, and then recalls the function tsocapobj.verify (ans, function (Ret_json) {if (ret_json.errorcode!=0) {that the second parameter passed in.
            $ (". Btn_mes_text"). Val ("");
            Tsocapobj.refresh (); Tip ("Graphics validation code input Error!")
            "); if ($ ('. Verification-code '). length==0) {$ ('. Btn_mes '). EQ (0). Append ("<div class= ' verification-code ' > Please enter the correct authentication 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-the execution of the page initialization function $ (function () {initpage ();
      License ();
    Verify_initpage ();

  });

 });

 ccs Layer Description

  @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; ArrowDiv:nth-of-type (1) {position:relative;
  }. arrow-mess{margin-top:52px;


 }

The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.