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 相关文章推荐
jQuery 一个图片切换的插件
Oct 09 Javascript
Javascript表格翻页效果实现思路及代码
Aug 23 Javascript
JavaScript将XML转成JSON的方法
Mar 12 Javascript
jQuery实现有动画淡出效果的二级折叠菜单代码
Oct 17 Javascript
mvc 、bootstrap 结合分布式图简单实现分页
Oct 10 Javascript
js正则表达式注册页面表单验证
Oct 11 Javascript
解决JS内存泄露之js对象和dom对象互相引用问题
Jun 25 Javascript
vue props传值失败 输出undefined的解决方法
Sep 11 Javascript
vue单页缓存存在的问题及解决方案(小结)
Sep 25 Javascript
Puppeteer 爬取动态生成的网页实战
Nov 14 Javascript
bootstrap+spring boot实现面包屑导航功能(前端代码)
Oct 09 Javascript
微信小程序图片右边加两行文字的代码
Apr 23 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
海河写的 Discuz论坛帖子调用js的php代码
2007/08/23 PHP
百度ping方法使用示例 自动ping百度
2014/01/26 PHP
php中的四舍五入函数代码(floor函数、ceil函数、round与intval)
2014/07/14 PHP
基于CI框架的微信网页授权库示例
2016/11/25 PHP
PHP使用mysqli同时执行多条sql查询语句的实例
2019/03/22 PHP
javascript正则表达式使用replace()替换手机号的方法
2015/01/19 Javascript
Javascript中setTimeOut和setInterval的定时器用法
2015/06/12 Javascript
基于JavaScript实现全屏透明遮罩div层锁屏效果
2016/01/26 Javascript
老生常谈 js中this的指向
2016/06/30 Javascript
总结Node.js中的一些错误类型
2016/08/15 Javascript
JavaScript九九乘法口诀表的简单实现
2016/10/04 Javascript
扩展jquery easyui tree的搜索树节点方法(推荐)
2016/10/28 Javascript
浅谈mvvm-simple双向绑定简单实现
2018/04/18 Javascript
create-react-app修改为多页面支持的方法
2018/05/17 Javascript
vue+element-ui动态生成多级表头的方法
2018/08/28 Javascript
浅谈关于iview表单验证的问题
2018/09/29 Javascript
vue.js this.$router.push获取不到params参数问题
2020/03/03 Javascript
[01:02:55]CHAOS vs Mineski 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/18 DOTA
利用Fn.py库在Python中进行函数式编程
2015/04/22 Python
python实现给数组按片赋值的方法
2015/07/28 Python
python 默认参数问题的陷阱
2016/02/29 Python
python中使用iterrows()对dataframe进行遍历的实例
2018/06/09 Python
Python中利用aiohttp制作异步爬虫及简单应用
2018/11/29 Python
Python实现 版本号对比功能的实例代码
2019/04/18 Python
python logging通过json文件配置的步骤
2020/04/27 Python
Python实现GIF图倒放
2020/07/16 Python
解析浏览器的一些“滚动”行为鉴赏
2019/09/16 HTML / CSS
世界顶级俱乐部的官方球衣和套装:Subside Sports
2018/04/22 全球购物
介绍一下Ruby的多线程处理
2013/02/01 面试题
团委书记的竞聘演讲稿
2014/04/24 职场文书
会议营销主持词
2015/07/03 职场文书
校长新学期寄语2016
2015/12/04 职场文书
Css预编语言及区别详解
2021/04/25 HTML / CSS
NodeJs内存占用过高的排查实战记录
2021/05/10 NodeJs
Ajax请求超时与网络异常处理图文详解
2021/05/23 Javascript
上帝为你开了一扇窗之Tkinter常用函数详解
2021/06/02 Python