最初のステップは、検証コードを表示することです。ビジネスライセンスを押すときは、ポップアップボックスをポップアップさせます。図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をもっとサポートすることを願っています。