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制作验证码功能实例代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

赞 (0)

相关推荐

  • Java Web开发之图形验证码的生成与使用方法

    本文实例讲述了Java Web开发之图形验证码的生成与使用方法.分享给大家供大家参考.具体如下: 图形验证码的主要目的是为了增强的安全性,增加用户通过遍历所有可能性来破解密码的难度. 图形验证码的使用包括如下3部分: ① 图形验证码的生成: ② 在页面中的使用: ③ 验证: 1.图形验证码的生成 假设在Servlet生成图形验证码,在JavaBean或者JSP中生成的基本过程是相同的.设计如下过程: ① 设置响应的文档类型: ② 生成随机码: ③ 把随机码保存到session中: ④ 生成图片:

  • Java Web项目中验证码功能的制作攻略

    Java Web项目中验证码功能的制作攻略

    一.前言 在表单页面中使用验证码的好处在于有效防止用户恶意提交表单,或者使用外挂非法攻击系统. 二.准备条件 1.一个普通的web项目 webProject: 2.一个web服务器 Tomcat. 三.实现思路: 1.自定义一个servlet  VerifyCodeServlet 画一个包含验证字符的验证码图片,这里的图片需要使用Graphics2D手动去画: 2.在具体页面使用img标签的src引用这个servlet即可显示servlet: 3.因为画图的时候把验证码信息放入了session,

  • java web中图片验证码功能的简单实现方法

    用户在注册网站信息的时候基本上都要数据验证码验证.那么图片验证码功能该如何实现呢? 大概步骤是: 1.在内存中创建缓存图片 2.设置背景色 3.画边框 4.写字母 5.绘制干扰信息 6.图片输出 废话不多说,直接上代码 package com.lsgjzhuwei.servlet.response; import java.awt.Color; import java.awt.Font; import java.awt.Graphics; import java.awt.image.Buffer

  • node.js WEB开发中图片验证码的实现方法

    用node做web开发很多都可能碰到需要验证码的地方,之前在github上搜索,有一些比如node-captcha等的类库,都需要依赖第三方的图形处理库或者软件,像我之前安装cario这个图形库时,真是费了好大一番劲,但是其实我们只用到了这些图形库的一点点小功能,比如图片的尺寸修改裁剪,或者生产验证码. 先介绍一下CImg这个c++的图形库吧,CImg是一个跨平台的C++的图像处理库,提供了加载.处理.显示.保存等一系列功能,最吸引人的地方是整个图形库就一个CImg.h这个文件,所以非常的便携绿

  • Javaweb开发中通过Servlet生成验证码图片

    Javaweb开发中通过Servlet生成验证码图片

    一.BufferedImage类介绍 生成验证码图片主要用到了一个BufferedImage类,如下: 创建一个DrawImage Servlet,用来生成验证码图片 package gacl.response.study; import java.awt.Color; import java.awt.Font; import java.awt.Graphics; import java.awt.Graphics2D; import java.awt.image.BufferedImage; i

  • .Net Core 下使用ZKWeb.System.Drawing实现验证码功能(图形验证码)

    .Net Core 下使用ZKWeb.System.Drawing实现验证码功能(图形验证码)

    本文介绍.Net Core下用第三方ZKWeb.System.Drawing实现验证码功能. 通过测试的系统: Windows 8.1 64bit Ubuntu Server 16.04 LTS 64bit Fedora 24 64bit CentOS 7.2 64bit 可以实现以下功能: Open jpg, bmp, ico, png Save jpg, bmp, ico, png Resize image Draw graphics with brush and pen Open font

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

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

    web开发中,经常会使用验证码功能,例如登录.注册,或其他关键功能之前经常会使用.合理使用 验证功能可以防止ddos攻击.爬虫攻击等.   实现效果:   实现原理: 由后台提供生成验证码的接口,前端每次请求会后端会生成验证码图片和验证码,验证码图片发送到客户端供客户端显示, 验证码字符串保存再后端的Session中,待前端再次请求业务接口与session里的验证码字符串做比对.    实现思路: 1.先由后端提供可以生产验证码图片的接口 2.前端通过 img 中设置 src 属性,请求验证码生

  • Java生成验证码功能实例代码

    页面上输入验证码是比较常见的一个功能,实现起来也很简单.给大家写一个简单的生成验证码的示例程序,需要的朋友可以借鉴一下. 闲话少续,直接上代码.代码中的注释很详细. package com.SM_test.utils; import java.awt.Color; import java.awt.Font; import java.awt.Graphics; import java.awt.Graphics2D; import java.awt.RenderingHints; import ja

  • AngularJS 实现点击按钮获取验证码功能实例代码

    html :样式采用了sui框架的样式,请自行引入查看,AngularJS,自己引入, <div ng-controller="forGetPassword" ng-app="routingDemoApp"> <form novalidate name="forget"> <header class="bar bar-nav"> <a href="javascript:his

  • SpringSecurity实现图形验证码功能实例代码

    Spring Security Spring Security是一个能够为基于Spring的企业应用系统提供声明式的安全访问控制解决方案的安全框架.它提供了一组可以在Spring应用上下文中配置的Bean,充分利用了Spring IoC,DI(控制反转Inversion of Control ,DI:Dependency Injection 依赖注入)和AOP(面向切面编程)功能,为应用系统提供声明式的安全访问控制功能,减少了为企业系统安全控制编写大量重复代码的工作. 本文重点给大家介绍Spri

  • Java实现随机验证码功能实例代码

    现在许多系统的注册.登录或者发布信息模块都添加的随机码功能,就是为了避免自动注册程序或者自动发布程序的使用.验证码实际上就是随机选择一些字符以图片的形式展现在页面上,如果进行番茄花园xp系统下载提交操作的同时需要将图片上的字符同时提交,如果提交的字符与服务器session保存的不同,则认为提交信息无效.为了避免自动程序分析解析图片,通常会在图片上随机生成一些干扰线或者将字符进行扭曲,增加自动识别的难度. 复制代码 代码如下: package com.servlet;import java.awt

  • Angularjs 制作购物车功能实例代码

    Angularjs 制作购物车功能实例代码

    初学angularJS   闲暇之余做了个小案例. 功能:计算购物车商品的价格,以及删除购物车商品. 以下是完整案例(jQuery和angularjs需要自己引入) <!doctype html> <html ng-app="myApp"> <head> <meta charset="utf-8"> <title>无标题文档</title> <style> .cursors{curs

  • Ajax+Struts2实现验证码验证功能实例代码

    Ajax+Struts2实现验证码验证功能实例代码

    众所周知,验证码在我们的生活中都是非常常见的,很多公司都在各种折腾各种各样的验证码,这里简要的用一个小案例来实现验证码的功能(ps:其实我挺讨厌验证码这个东西的). 今天分享的是通过ajax来动态的验证验证码输入是否正确.我们这里采用的是ajax+struts2来做的这个验证. 我们新建一个web工程.然后需要导入struts的相应包.之后我们需要写一个类来生成验证码. 这里命名为01_image.jsp,这类的主要功能就是生成验证码,里面是各种画线条,随机数字等,我这里设置的是5个数字的验证,

  • Android仿滴滴出行验证码输入框功能实例代码

    最近公司项目中有一个类似滴滴出行填写验证码的弹框,下面是我撸出来的效果: 中间的那个输入密码的6个框框其实就是用shape画的背景,通过监听EditText获取焦点来改变背景,废话少说,直接上代码吧. 2.效果实现 代码内容比较简单,所以大家可以直接看代码 VerificationCodeInput.java /** * @author hydCoder * @date 2017/9/22 14:39 * @desc 输入验证码的自定义view * @email hyd_coder@163.co

  • JSP 制作验证码的实例详解

    JSP 制作验证码的实例详解 验证码 验证码(CAPTCHA)是"Completely Automated Public Turing test to tell Computers and Humans Apart"(全自动区分计算机和人类的图灵测试)的缩写,是一种区分用户是计算机还是人的公共全自动程序.可以防止:恶意破解密码.刷票.论坛灌水,有效防止某个黑客对某一个特定注册用户用特定程序暴力破解方式进行不断的登陆尝试,实际上用验证码是现在很多网站通行的方式,我们利用比较简易的方式实现

  • SpringBoot 集成Kaptcha实现验证码功能实例详解

    SpringBoot 集成Kaptcha实现验证码功能实例详解

    在一个web应用中验证码是一个常见的元素.不管是防止机器人还是爬虫都有一定的作用,我们是自己编写生产验证码的工具类,也可以使用一些比较方便的验证码工具.在网上收集一些资料之后,今天给大家介绍一下kaptcha的和springboot一起使用的简单例子. 准备工作: 1.你要有一个springboot的hello world的工程,并能正常运行. 2.导入kaptcha的maven: <!-- https://mvnrepository.com/artifact/com.github.penggl

随机推荐