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 学习笔记之变量及其作用域
Jan 14 Javascript
jQuery实现仿腾讯视频列表分页效果的方法
Aug 07 Javascript
json的使用小结
Jun 08 Javascript
javascript表单控件实例讲解
Sep 13 Javascript
如何使用jquery实现文字上下滚动效果
Oct 12 Javascript
Node.js安装配置图文教程
May 10 Javascript
js,jq,css多方面实现简易下拉菜单功能
May 13 Javascript
解决VUEX刷新的时候出现数据消失
Jul 03 Javascript
在react中使用vuex的示例代码
Jul 30 Javascript
详解webpack 最简打包结果分析
Feb 20 Javascript
Cordova(ionic)项目实现双击返回键退出应用
Sep 17 Javascript
VUE实现图片验证码功能
Nov 18 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
解决dede生成静态页和动态页转换的一些问题,及火车采集入库生成动态的办法
2007/03/29 PHP
为PHP5.4开启Zend OPCode缓存
2014/12/26 PHP
PHP 文件上传后端处理实用技巧方法
2017/01/06 PHP
PHP堆栈调试操作简单示例
2018/06/15 PHP
PDO::quote讲解
2019/01/29 PHP
CodeIgniter框架实现的整合Smarty引擎DEMO示例
2019/03/28 PHP
thinkPHP5框架接口写法简单示例
2019/08/05 PHP
IE6/7/8/9不支持exec的简写方式
2011/05/25 Javascript
JSON 数据格式介绍
2012/01/13 Javascript
JavaScript高级程序设计(第3版)学习笔记2 js基础语法
2012/10/11 Javascript
JS操作select下拉框动态变动(创建/删除/获取)
2013/06/02 Javascript
JQuery each打印JS对象的方法
2013/11/13 Javascript
jquery中的过滤操作详细解析
2013/12/02 Javascript
jquery实现二级导航下拉菜单效果
2015/12/18 Javascript
Vue.js系列之项目结构说明(2)
2017/01/03 Javascript
Form表单上传文件(type=&quot;file&quot;)的使用
2017/08/03 Javascript
Vue封装Swiper实现图片轮播效果
2018/02/06 Javascript
vue.js中npm安装教程图解
2018/04/10 Javascript
[02:07]DOTA2超级联赛专访BBC:难忘网吧超神经历
2013/06/09 DOTA
Python中内建函数的简单用法说明
2016/05/05 Python
使用pyecharts在jupyter notebook上绘图
2020/04/23 Python
numpy中的高维数组转置实例
2018/04/17 Python
关于python3中setup.py小概念解析
2019/08/22 Python
python程序文件扩展名知识点详解
2020/02/27 Python
关于tensorflow softmax函数用法解析
2020/06/30 Python
纯css3实现的动画按钮的实例教程
2014/11/17 HTML / CSS
用HTML5制作视频拼图的教程
2015/05/13 HTML / CSS
HTML5拖放API实现自动生成相框功能
2020/04/07 HTML / CSS
美国最受欢迎的度假目的地优惠套餐:BookVIP
2018/09/27 全球购物
商务日语毕业生自荐信范文
2013/11/14 职场文书
利群广告词
2014/03/20 职场文书
会议欢迎标语
2014/06/30 职场文书
早读课迟到检讨书
2014/09/25 职场文书
个人作风建设剖析材料
2014/10/11 职场文书
《少年闰土》教学反思
2016/02/18 职场文书
Python Numpy之linspace用法说明
2021/04/17 Python