脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → web 验证码功能

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

 更新时间：2017年06月19日 14:49:22   作者：kerryqpw  
web开发中，经常会使用验证码功能，例如登录、注册，或其他关键功能之前经常会使用。下面通过实例代码给大家介绍Web制作验证码功能实例代码，感兴趣的朋友一起看看吧

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

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

   实现效果：

  实现原理：

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

   验证码字符串保存再后端的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获得CheckBoxList选中的数量

    javascript获得CheckBoxList选中的数量

    javascript获得CheckBoxList选中的数量(jQuery与Javascript对照学习/前台与后台)
    2009-10-10
  • JavaScript中实现异步编程模式的4种方法

    JavaScript中实现异步编程模式的4种方法

    这篇文章主要介绍了JavaScript中实现异步编程模式的4种方法,本文讲解了回调函数、事件监听、发布/订阅、Promises对象4种方法,需要的朋友可以参考下
    2014-09-09
  • 微信小程序scroll-view实现滚动到锚点左侧导航栏点餐功能(点击种类,滚动到锚点)

    微信小程序scroll-view实现滚动到锚点左侧导航栏点餐功能(点击种类,滚动到锚点)

    这篇文章主要介绍了微信小程序scroll-view左侧导航栏点餐功能实现，点击种类，滚动到锚点；滚动到锚点，种类选中,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
    2020-06-06
  • JavaScript基于SVG的图片切换效果实例代码

    JavaScript基于SVG的图片切换效果实例代码

    这篇文章主要介绍了JavaScript基于SVG的图片切换效果实例代码,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
    2020-12-12
  • 深入浅析JSON.parse()、JSON.stringify()和eval()的作用详解

    深入浅析JSON.parse()、JSON.stringify()和eval()的作用详解

    这篇文章主要介绍了深入浅析JSON.parse()、JSON.stringify()和eval()的作用详解的相关资料,需要的朋友可以参考下
    2016-04-04
  • javascript canvas封装动态时钟

    javascript canvas封装动态时钟

    这篇文章主要为大家详细介绍了javascript canvas封装动态时钟，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2020-09-09
  • 基于JS实现漫画中大雨滂沱的效果

    基于JS实现漫画中大雨滂沱的效果

    这篇文章主要为大家详细介绍了如何利用JavaScript实现漫画中大雨滂沱的效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2022-06-06
  • ES2020 新特性(种草)

    ES2020 新特性(种草)

    这篇文章主要介绍了ES2020 新特性(种草),文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2020-01-01
  • js href的用法

    js href的用法

    关于js window.location.href location.href parent.location.href top.location.href 的用法
    2010-05-05
  • 原生js中ajax访问的实例详解

    原生js中ajax访问的实例详解

    这篇文章主要介绍了原生js中ajax访问的实例详解的相关资料,希望通过本文大家能够掌握理解这部分内容，需要的朋友可以参考下
    2017-09-09

最新评论