Web制作验证码功能实例代码


Posted in Javascript onJune 19, 2017

web开发中,经常会使用验证码功能,例如登录、注册,或其他关键功能之前经常会使用。合理使用

验证功能可以防止ddos攻击、爬虫攻击等。

   实现效果:

Web制作验证码功能实例代码

  实现原理:

   由后台提供生成验证码的接口,前端每次请求会后端会生成验证码图片和验证码,验证码图片发送到客户端供客户端显示,

   验证码字符串保存再后端的Session中,待前端再次请求业务接口与session里的验证码字符串做比对。

   实现思路:

   1、先由后端提供可以生产验证码图片的接口

   2、前端通过 img 中设置 src 属性,请求验证码生成的接口。

   3、对img设置点击事件,每次点击img的时候,都会改变src值重新请求src

   4、做页面接口操作时,比对输入的验证码是否正确

   实现代码:

   前端:

     html:  

<div class="centent-top" style=""> 
   <div class="centent-left"><span>*</span>验证码:</div> 
   <input type="text" class="verification-code-input"> 
   <div class="verification-code"><img id="yzm" src="/SchoolRoll/accuser/code/check"></div> 
   <div class="change"><span>看不清?</span><span style="color:#37CAF2;cursor: pointer;" id="changeImgCode">换一张</span></div> 
  </div>

   js:

var yzm =document.getElementById("yzm"); 
 var changeImgCode =document.getElementById("changeImgCode"); 
 yzm.onclick=function () { 
  changPin(); 
 } 
 changeImgCode.onclick=function () { 
  changPin(); 
 } 
 // 换验证码 
 function changPin() { 
  $("#yzm").attr("src", "/SchoolRoll/accuser/code/check?time=" + Math.random()); 
 }

以上所述是小编给大家介绍的Web制作验证码功能实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
用javascript连接access数据库的方法
Nov 17 Javascript
JavaScript Event学习第八章 事件的顺序
Feb 07 Javascript
理解Javascript_12_执行模型浅析
Oct 18 Javascript
用Jquery选择器计算table中的某一列某一行的合计
Aug 13 Javascript
jQuery实现360°全景拖动展示
Mar 18 Javascript
JS实时弹出新消息提示框并有提示音响起的实现代码
Apr 20 Javascript
Bootstrap的class样式小结
Dec 01 Javascript
JS Select下拉框(支持输入模糊查询)
Feb 04 Javascript
Vue.use源码分析
Apr 22 Javascript
bootstrap table支持高度百分比的实例代码
Feb 28 Javascript
mpvue构建小程序的方法(步骤+地址)
May 22 Javascript
JavaScript canvas基于数组生成柱状图代码实例
Mar 06 Javascript
angularjs+bootstrap实现自定义分页的实例代码
Jun 19 #Javascript
详解vue服务端渲染(SSR)初探
Jun 19 #Javascript
jQuery实现简单的手风琴效果
Apr 17 #jQuery
原生JS+Canvas实现五子棋游戏实例
Jun 19 #Javascript
Node.js环境下Koa2添加travis ci持续集成工具的方法
Jun 19 #Javascript
Node.js中 __dirname 的使用介绍
Jun 19 #Javascript
JavaScript 上传文件(psd,压缩包等),图片,视频的实现方法
Jun 19 #Javascript
You might like
JS中encodeURIComponent函数用php解码的代码
2012/03/01 PHP
PHP中使用asort进行中文排序失效的问题处理
2014/08/18 PHP
php实现留言板功能(会话控制)
2017/05/23 PHP
TNC vs BOOM BO3 第三场2.13
2021/03/10 DOTA
基于jquery的二级联动菜单实现代码
2011/04/25 Javascript
express的中间件cookieParser详解
2014/12/04 Javascript
javascript常用的方法整理
2015/08/20 Javascript
使用jquery插件qrcode生成二维码
2015/10/22 Javascript
js判断空对象的实例(超简单)
2016/07/26 Javascript
JS实现数字格式千分位相互转换方法
2016/08/01 Javascript
解析ajaxFileUpload 异步上传文件简单使用
2016/12/30 Javascript
vue组件学习教程
2017/09/09 Javascript
bootstrap table实现横向合并与纵向合并
2019/07/18 Javascript
Vue vm.$attrs使用场景详解
2020/03/08 Javascript
python中的一些类型转换函数小结
2013/02/10 Python
python如何通过twisted实现数据库异步插入
2018/03/20 Python
Python常见字典内建函数用法示例
2018/05/14 Python
django开发post接口简单案例,获取参数值的方法
2018/12/11 Python
Python 互换字典的键值对实例
2019/02/12 Python
Django model 中设置联合约束和联合索引的方法
2019/08/06 Python
python pyecharts 实现一个文件绘制多张图
2020/05/13 Python
python 实现PIL模块在图片画线写字
2020/05/16 Python
python 实现rolling和apply函数的向下取值操作
2020/06/08 Python
Python闭包装饰器使用方法汇总
2020/06/29 Python
python爬取”顶点小说网“《纯阳剑尊》的示例代码
2020/10/16 Python
斯洛伐克时尚服装网上商店:Cellbes
2016/10/20 全球购物
英国领先的新鲜松露和最好的松露产品供应商:TruffleHunter
2019/08/26 全球购物
物流管理专业毕业生自荐信
2014/03/04 职场文书
爱国主义演讲稿
2014/05/07 职场文书
社区巾帼文明岗事迹材料
2014/06/03 职场文书
护林防火标语
2014/06/27 职场文书
2014年民主评议党员工作总结
2014/12/02 职场文书
2015年党员公开承诺事项
2015/04/27 职场文书
新闻报道稿范文
2015/07/23 职场文书
React Native项目框架搭建的一些心得体会
2021/05/28 Javascript
Win11怎么启动任务管理器?Win11启动任务管理器的几种方法
2021/11/23 数码科技