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 相关文章推荐
js innerHTML 改变div内容的方法
Aug 03 Javascript
使用jQuery重置(reset)表单的方法
May 05 Javascript
jQuery实现高亮显示网页关键词的方法
Aug 07 Javascript
JavaScript中的Function函数
Aug 27 Javascript
微信小程序五星评分效果实现代码
Apr 06 Javascript
JavaScript实现的原生态Tab标签页功能【兼容IE6】
Sep 18 Javascript
浅析JS中回调函数及用法
Jul 25 Javascript
Fetch超时设置与终止请求详解
May 18 Javascript
Vue实现菜单切换功能
Nov 08 Javascript
Vue基本指令实例图文讲解
Feb 25 Vue.js
React实现动效弹窗组件
Jun 21 Javascript
react使用antd的上传组件实现文件表单一起提交功能(完整代码)
Jun 29 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
PHP输出控制功能在简繁体转换中的应用
2006/10/09 PHP
PHP中IP地址与整型数字互相转换详解
2014/08/20 PHP
JS实现浏览器菜单命令
2006/09/05 Javascript
JSON 和 JavaScript eval使用说明
2010/06/13 Javascript
jQuery的实现原理的模拟代码 -5 Ajax
2010/08/07 Javascript
jQuery Tools tooltip使用说明
2012/07/14 Javascript
JQuery 获取json数据$.getJSON方法的实例代码
2013/08/02 Javascript
引用外部脚本时script标签关闭的写法
2014/01/20 Javascript
Ajax请求在数据量大的时候出现超时的解决方法
2014/02/27 Javascript
jQuery.parseJSON(json)将JSON字符串转换成js对象
2014/07/27 Javascript
JavaScript中使用Math.floor()方法对数字取整
2015/06/15 Javascript
readonly和disabled属性的区别
2015/07/26 Javascript
jquery+css实现绚丽的横向二级下拉菜单-附源码下载
2015/08/23 Javascript
1秒50万字!js实现关键词匹配
2016/08/01 Javascript
vue.js使用代理和使用Nginx来解决跨域的问题
2018/02/03 Javascript
vue地区选择组件教程详解
2018/05/04 Javascript
详解package.json版本号规则
2019/08/01 Javascript
微信小程序实现导航栏和内容上下联动功能代码
2020/06/29 Javascript
python通过BF算法实现关键词匹配的方法
2015/03/13 Python
python通过加号运算符操作列表的方法
2015/07/28 Python
实例解析Python的Twisted框架中Deferred对象的用法
2016/05/25 Python
详解如何用python实现一个简单下载器的服务端和客户端
2019/10/28 Python
VSCode中自动为Python文件添加头部注释
2019/11/14 Python
python GUI库图形界面开发之PyQt5输入对话框QInputDialog详细使用方法与实例
2020/02/27 Python
Python爬虫requests库多种用法实例
2020/05/28 Python
报社实习生自荐信
2014/01/24 职场文书
大学自我评价
2014/02/12 职场文书
优秀大学生职业生涯规划书
2014/02/27 职场文书
大学四年个人自我小结
2014/03/05 职场文书
亲子活动总结
2014/04/26 职场文书
谢师宴答谢词
2015/01/05 职场文书
数学教师个人工作总结
2015/02/06 职场文书
2016国庆节67周年寄语
2015/12/07 职场文书
高中优秀作文(范文)
2019/08/15 职场文书
vue router 动态路由清除方式
2022/05/25 Vue.js
ubuntu端向日葵键盘输入卡顿问题及解决
2022/12/24 Servers