最初のステップは、検証コードを表示することです。ビジネスライセンスを押すときは、ポップアップボックスをポップアップさせます。図1に示すように、検証コードはポップアップボックスの上にあります。
（写真1）
ポップアップフレームのスタイルを図2に示します。
（図2）
検証コードの値を確認して、検証コードが正しく入力されているかどうかを判断する必要があります。入力が間違っている場合、エラーメッセージを求めて、迅速なメッセージを図3に示します。
（図3）
図4に示すように、ページが正しく検証されている場合、これはエラーメッセージをプロンプトすることはなく、ターゲットページに調整されます。
（図4）
ルーティングレイヤーの説明
/**サプライヤーストア - ショップの紹介*///ルーティングレイヤーの1セット、ジャンプのためにルートディレクトリの/buyer/vshop/info.ejsページにジャンプしてから、interface router.get（ '/buyer/vshop/info'、function（req、res、next）を呼び出します。 ：function（fn）{//インターフェイスを3つcallするローカルマシンvar args = {users.getClientip（req）}; VerifyCodeHelper.createvCode（args、function（err、result）{if（err）{console.log（err）;} else {fn（null、{captcha：result.data.queryurl、csnonce：result.csnonce || 0}）}}}）; res. err。 res.render（ "Buyer/vshop/describe"、{title：srcbiztype == 1？result.getDetail.name： "Shop Introduction"、 "vshopinfo"、captcha：result.verifycode.captcha、// }）; }）; }）;EJSレイヤーの説明
<％ - include ../../.../header％> // 1-ルーティングされたcsnonce <script> app.newlogin = {csnonce： '<％-csnonce％>'、}; <link href = "/css/vshop/describe.css？v = <％= config.version％>" rel = "styleSheet"/> <style id = "dynamic"> </style> <div> </div> <div> id = "btn_sku_dialog_close"> </span> <li>以下のグラフィック検証コードを入力してください</li> <li> <img id = "j_btnverifypiccodetencent" src = "" style = "height：30px; margin：0 15px;" /> </li> <li> <div> <入力タイプ= "text" maxlength = "6"> </div> </li> </ul> <div> <input Type = "Button" value = "submit"> </div> </div> <div> <入力タイプ= "ボタン" value = "submit"> </div> <div div div oper "> < ./widget_vshop％> </header> <section data-role = "body"> <div> <ul> <li> <lion <div> div> <％ - detail.address％> </div> </li> <li> <div> opening time </div> <div> <％ - detail.createTime％ Speed </div> <div> <％-detail.score.express％> </div> </li> <li> <div>サービス態度</div> <div> <％ - detail.score.service.service.service.service.service.service.service.service.service.service.service.sersment <％if（detail.shoptypeindex == 1 || detail.shoptypeindex == 2 || detail.shoptypeindex == 3）{var bg = '/imgs/vshop/tip.png',color='#39dda5'} els {var bg = '/imgs/vshop/tip3.png',color ='＃59aaff '}％> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <div> <div> <span style = "background：url（<％-bg％>）left 1px no-repeat; ％> </i> </span> </div> </li> </ul> <ul> <li> <a href = "tel：<％ - detail.phone％>">サービス電話</a> </li> <li> <a data-aid = "<％aid％>">オンラインカスタマーサービス</a> </a> </li> < AID％> "> - > <a href ="＃ "> <span>ビジネスライセンス</span> <ablea> view <span> </span> </label> </a> </li> </ul> </div> <％ - intlide/footer％ </section> </div> // 2- roted <script type = "text/javascript" src = "<％= captcha％>"> </scrip> // 3-introduce関連JSファイル<sircrid> seajsus（ "js_cmd/vshop/home-cmd"）; </script> <％ - include ../../footer％>JSレイヤーの説明
/**これはパブリックファイル、VSHOPホームページ、およびすべてのVSHOP製品が共有されますrequire（ "./ Tool-CMD"）、fxzTool = require（ "./ fxztool-cmd"）、vue = require（ "lib_cmd/vue-cmd"）、require（ "js_cmd/navbtns-cmd"）、$ eles = {}、eles = {} {}; vue（{}、method：{}}）; $（ "" "）; show（ '。arrow'）; $（'。ARROW_MASK '）。 $（ '。検証 - コード'）。$（ '。検証 - コード'）。 $（ '＃j_btnverifypiccodecent'） tsocapobj.refresh（）; （ret_json.errorcode！= 0）{"。btn_mes_text"） class = '検証 - コード'>正しい検証コード</div> "）;} $（ '。btn_mes_text'）。blur（function（）{$（ '。btn_mes_text'）。 }}）;/ 6-ページ初期化$（）{initpage（）; verify_initpage（）;}）;CCSレイヤーの説明
@import url（common.css）; .div-section-info .info4 {padding：0} .div-section-info .info4 li {padding：11px 14px;ラインハイト：20px;境界線：1pxソリッド＃e6e6e6; } .div-section-info .info4 li a {color：＃333;表示：ブロック; } .div-section-info .info4 li a.tel {background：url（/imgs/vshop/callandmsg.png）no-repeat;バックグラウンドサイズ：20px 60px;背景ポジション：右0; } .div-section-info .info4 li a.webim {background：url（/imgs/vshop/callandmsg.png）no-repeat;バックグラウンドサイズ：20px 60px;バックグラウンドポジション：右-30px; } .div-section-info .info4 li aラベル{display：block;フロート：そうです; } .div-section-info .info4 liラベルスパン{display：block;幅：12px;高さ：12px;国境右：1pxソリッド＃666;ボーダーボトム：1pxソリッド＃666; -webkit-transform：回転（-45deg）;フロート：そうです;マージントップ：4px; } .arrow_mask {position：sixt;上：0;左：0;下：0;右：0; Z-Index：101;表示：なし;背景：黒;不透明度：0.7; } .ARROW {width：250px;高さ：226px;バックグラウンドカラー：#fffff;位置：修正;トップ：50％;左：50％; Z-Index：102; -webkit-transform：翻訳（-50％、-50％）; -moz-transform：翻訳（-50％、-50％）; -ms-transform：翻訳（-50％、-50％）; -o-transform：翻訳（-50％、-50％）;変換：翻訳（-50％、-50％）;ボーダーラジウス：10px;表示：なし; } .ARROW-mess li：nth-of-type（1）{text-align：center;マージンボトム：8px;フォントサイズ：14px;色：＃333333; } .ARROW-mess li：nth-of-type（2）{text-align：center;マージンボトム：10px; } .ARROW-mess li：nth-of-type（3）input {width：100％;高さ：30px;国境：1pxソリッド＃979797;テキストアライグ：センター;ボーダーラジウス：3px;フォントファミリー：Pingfangsc-Regular;フォントサイズ：16px;色：＃333333;文字間隔：0px; } .btn_mes {margin-bottom：15px;幅：100％;パディング左：48px;パディング右：48px;位置：相対; } .btn_mes2 {width：100％;パディング左：70px;パディング右：70px; /*位置：相対; */位置：絶対;下：0px;マージンボトム：10px; } .license-submit {width：100％;高さ：44px;背景：＃ff534c;境界線：1PXソリッド＃FF534C;フォントサイズ：14px;ボーダーラジウス：4px;色：#ffffff; } .sku-close {background：url（/imgs/vshop/verification-code-del.png）No-Repeat Right; -webkit-background-size：25px auto;ディスプレイ：インラインブロック。幅：26px;高さ：26px;位置：絶対;右：0px;上：0px;マージン右：-13px;マージントップ：-13px; } .verification-code {z-index：102;色：＃ffaa00;位置：絶対;フォントサイズ：12px;トップ：4px; } .verification-code-back {width：100％;位置：絶対;高さ：46px; } .ARROW div：nth-of-type（1）{position：relative; } .ARROW-MESS {MARGIN-TOP：52PX; }上記はこの記事のすべての内容です。みんなの学習に役立つことを願っています。誰もがwulin.comをもっとサポートすることを願っています。