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

Js图形验证码制作

真实效果

第一步，我们来到显示验证码的页面。我们按营业执照的时候，让它弹出一个弹出框。验证码在弹出框的顶部，如图1所示：

(图1)

弹性框架的样式如图2所示：

(图2)

我们需要检查验证码的值，以确定验证码是否输入正确。当输入不正确时，我们将提示一条错误消息，如图3所示：

(图3)

如果页面被正确验证，它将不会提示错误消息并被转移到我们的目标页面，如图4所示：

(图4)——营业执照页面为私人页面，使用其他页面代替原页面。

路由层描述

//1-设置在路由层，页面跳转到根目录下的/buyer/vshop/info.ejs页面，然后调用接口router.get ('/buyer/vshop/info '，函数(req，RES，Next) {//2-调用接口获取数据async。parallel({ verifycode : function(fn){//3-调用接口获取本地IP地址varargs={ userip : tools . getclientip(req)}；//4-调用接口verifyCodeHelper的createVcode方法，获取captcha和csnonce的数据，其值为接口verifycode helper . createVcode(args，function (err，result){ if(err){ console . log(err)返回的数据；} else{ fn(null，{ captcha : result . data . queryrl，csnonce : result . csnonce | | 0 })})；} }，函数(err，result){ if(err){ RES . end(err)；} else { result . getdetail=RES . shopiinfo；var fxzStatus=RES . fxzStatus | | { }；//5-在根目录下渲染买方/vshop/description页面，并将相关参数传递给EJS页面res.render('买方/vshop/description '，{title : srcbiztype==1？result . GetDetail . name : ' store introduction '，pagename :' vshopinfo '，captcha : result . verify code . captcha，//验证码为腾讯33601，csnonce 3360 result . verify code . csnonce })；} });});EJS层描述

//1-获取路由传递的csnonce脚本app。NewLogin={ csnonce : ' %-csnonce % '，}；/script//2-获取路由传递的验证码脚本类型=' text/JavaScript ' src=' http :%=验证码“%”脚本//3-引入相关射流研究…文件脚本seajs。使用(' js _ cmd/vshop/home-cmd ')；/script link href='/CSS/vs hop/description。CSS？v=%=config.version %' rel='样式表/style id='动态/style div class=' arrow _ mask '/div class=' arrow ' div img src=' http :/imgs/vshop/verification-code-back。png ' class=' verification-code-back '/div ul class=' arrow-mess ' span=' SKU-close ' id=' BTN _ SKU _ dialog _ close '/span Li请输入下面的图形验证码/Li Li img id=' J _ btnvrifcodetencent ' src=' http : ' class=' captcha ' style=' height :30 px；margin :0 15px '/Li Li div class=' BTN _ mes ' input class=' BTN _ mes _ text ' type=' text ' maxlength=' 6 '/div/Li/ul div class=' BTN _ mes 2 ' input type=' button ' class=' license-submit ' value='提交/div /div数据-角色=' container ' class=' body %=page name % '标头数据-角色='标头%-包括./widget _ vshop %/header section data-role=' body ' class=' section-body ' div class=' div-section div-section-info ' ul class=' info 1 ' Li class=' gap ' div class=' left '所在地/div div class=' right ' %-detail。地址%/div/Li Li div class='左侧'开店时间/div div class=' right ' %-detail。创建时间%/div/Li/ul ul class=' info 2 ' Li class=' gap ' div class=' left '发货速度/div div class=' right ' %-detail。得分。express %/div/Li Li class=' gap ' div class=' left '服务态度/divdiv class='右%-详细信息。得分。服务%/div/Li Li div类='左'描述相符/div div class=' right ' %-detail。得分。描述%/div/Li/ul class=' info3 ' % if(详细信息。shoptype index==1 | | detail。shoptype index==2 | | detail。shop type index==3){ var BG='/imgs/vs hop/tip。png '，color=' # 59 aaff ' } % lidiv class=' left other c '认证/div div class=' right TextR ' span style=' background : URL(%)-BG %)left 1px no-repeat；背景尺寸size: 14px 12px'I style='背景：%-颜色% ' %-细节。详细信息。电话% ' class=' tel '服务电话/a/li lia数据-aid='%- aid%' class='webim '在线客服/a/Li Li='营业执照！-a href='/买方/vshop/许可证？aid=%- aid%' - a href='#' span营业执照/span标签查看跨度/跨度/标签/a /li /ul /div %-包括/footer % div id='vue_hooker '子-导航/子-导航%-包括././widget _ NavBtns %/div/section/div js层描述

//1-引入页面所需的各个模块定义(函数(要求，导出，模块){ var $=require ' ./top-吸力-cmd ')，Vue=require('lib_cmd/vue-cmd ')，$eles={}，eles={ }；//2-Vue实例化var vm=new Vue({ data: {}，methods : { })；//3- 页面初始化函数函数initPage() { vm .$ mount(' # vue _ hooker ')；window.scroll(0，0)；} //4- 验证码相关处理函数函数许可证(){ $(.)信息4 .营业执照)。点击（函数(ev) { //弹层$('.BTN .val(" ")；$('.箭头掩码').show()；$('.箭头')。show()；$(' # nav _省略')。移除();});$('#btn_sku_dialog_close ').点击（函数(ev){//弹窗$('.箭头掩码').hide()；$('.箭头')。hide()；$('.BTN .val(" ")；});$('.BTN .focus(function(){ //输入框获得焦点$('.BTN .val(" ")；if($(').验证码')。长度！=0){ $('.验证码')。移除();} });$('.许可证-提交")。单击(function(){ app。verifycpiccode()；});} //5- 验证码初始化函数()TSOCapObj是腾讯接口里面的方法函数verify _ initPage(){ $(' # J _ btnvrifcodetencent ').on('click '，function(){ tscopbj。刷新()；});//6-初始化，参数传入显示验证码的元素imgid tsocopbj。init(' J _ btnvrifcodetencent ')；//刷新拉取验证码图片tsocopbj。刷新()；app。verifycpiccode=function(fn){//获取用户输入var ans=$(' .BTN .val()；//验证答案，验证完成后会回调第二个参数传入的函数tsocopbj。验证(ans，function(ret _ JSON){ if(ret _ JSON。错误代码！=0) { $('.BTN .val(" ")；tsocopbj。刷新()；//提示('图形验证码输入错误!');if($(').验证码')。长度==0){ $('。BTN _梅斯' .等式(0).追加(“div类=”验证码'请输入正确的验证码/div ')；} $('.BTN .模糊(函数(){ $(').BTN .文本("");});} else { window。位置='/买方/vs hop/许可证？aid=' APP.aidfn(ret _ JSON。门票)；} });} } //7- 页面初始化函数的执行$(function(){ initPage()；许可证();verify _ initPage()；});});CCS层描述

@导入URL(常用。CSS)；分区信息。信息4 { padd : 0 } .分区信息。info 4 Li { padd : 11px 14px线高： 20px边框-底部： 1px实心# e6e6e6}。阿利{ color: # 333display:块；} .分区信息。信息4阿利电话{背景：网址(/imgs/vshop/callandmsg。png)不重复；背景尺寸尺寸： 20px 60px背景-位置：右0;} .分区信息。信息4阿利。png)不重复；背景尺寸尺寸： 20px 60px背景-位置：右侧-30px；} .阿利标签{ display:块向右浮动：} .阿利标签跨度{ display:块宽度： 12px高度： 12pxborder-right:1px实心# 666;边框-底部：1px实心# 666;-web套件-transform :旋转(-45)；向右浮动：保证金-top : 4px；} .箭头掩码{位置：固定；top : 0；左： 0；底部： 0；右： 0；z指数： 101；显示器：无；背景：黑色；opacity: 0.7 }。箭头{宽度： 250像素高度： 226像素；背景-color : # FFFFFF；位置：固定；前：名50%；左侧： 50%;z指数： 102；-web kit-transform : translate(-50%，-50%)；-moz-transform : translate(-50%，-50%)；-ms-transform : translate(-50%，-50%)；-o-transform : translate(-50%，-50%)；transform: translate(-50%，-50%)；边框半径： 10px显示器：无；} .第(1)类箭头-m Li :n { text-align : center；边距-底部： 8pxfont-size : 14pxcolor: # 333333}。第(2)类箭头-m Li :n { text-align : center；边距-底部： 10px} .第(3)种类型的箭头输入{宽度： 100%；高： 30pxborder: 1px固体# 979797;文本对齐：中心；边界半径： 3pxfont-family : PingFangSC-正则；font-size : 16px颜色： # 333333字母-间距： 0px} .BTN _ mes {边缘-底部： 15px宽度： 100%;左填充左侧： 48px填充-右侧： 48px相对位置：} .BTN _ mes2 {宽度： 100%；左填充左侧： 70px填充-右侧： 70px/*相对位置：*/position:绝对值；bottom: 0px边距-底部： 10px} .许可证-提交{宽度： 100%；高度： 44px背景# ff 534 border : 1 px实心# ff 534 font-size : 14px；边界半径： 4pxcolor: # FFFFFF}。SKU-关闭{背景： URL(/imgs/vshop/验证码德尔。png)不重复的权利；-web套件-背景-尺寸： 25px auto显示器：内联块；宽度： 26px高度： 26px绝对位置：right: 0pxtop: 0px右边距：-13px；保证金-top :-13px；} .验证码{ z-index : 102color: # FFAA00绝对位置：font-size : 12pxtop: 4px}。验证码返回{宽度： 100%；绝对位置：高度： 46px} .箭头div:nth第(1)种类型{相对位置：} .arrow-mess { margin-top : 52px；}