网页验证码简单实现

最新推荐文章于 2024-03-25 15:04:50 发布
最新推荐文章于 2024-03-25 15:04:50 发布
阅读量868 收藏 4
点赞数
分类专栏： javaScript 文章标签： 验证码 网页
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/datouniao1/article/details/52174266
版权

在这个地方我简单的做了一个网页验证码的实现，这个验证是对应的四位的数字，是由随机数产生，然后然后让用户在输入数字进行对比。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
    #wide
    {
        background: url(image/knx.jpg);
        background: pink;
        opacity: 0.5;
        width: 80px;
        height: 35px;
        font-weight: bold;
        letter-spacing:6px;
        font-family: 华文楷体;
        font-size: 1.4em;
        line-height: 35px;
        text-align: center;
        position: absolute;
        left:150px;
    }
    #veri
    {
        position: absolute;
        width: 80px;
        height: 30px;
        font-size: 1.3em;
    }
</style>
</head>
<script>
    window.onload=function(){
        var pos=document.getElementById("rand");
        var inp1=document.getElementById("veri");
        var Num=GetRandomNum(1000,9999);
        pos.innerHTML=Num;
        var wide=document.getElementById("wide");
        wide.onclick=function()
        {
            Num=GetRandomNum(1000,9999);
            pos.innerHTML=Num;
        };
        inp1.onblur=function(){
            verification(inp1,Num);
        }

    }
    function GetRandomNum(Max,Min)
    {
        var Range=Max-Min;
        var Rand=Math.random();
        return parseInt((Min+Rand*Range));
    }
    function verification(inp1,num)
    {

        if(parseInt(inp1.value)==num)
        {
            return true;

        }
        else if(inp1.value.length==0)
        {
            alert("请输入验证码");

        }
        else
        {
            alert("验证码输入错误");
            return false;
        }
    }
</script>
<body>
<input type="text" id="veri" placeholder="验证码"/>
<div id="wide">
<div id="rand"></div>
</div>
</body>
</html>

我是大头鸟
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
登录和注册页面 - 验证码功能的实现
xaiobit_hl的博客
07-24 4367
登录和注册页面 - 验证码功能的实现
web简易数字型验证码实现（超简单）
Alphamilk的博客
12-09 1597
通过js和css简单实现数字验证码的实现（适合新手）
【基于HTML5的网页设计及应用】——随机验证码
最新发布
shsjssnn的博客
03-25 514
【基于HTML5的网页设计及应用】——随机验证码
如何做一个简单的网页验证码
OneWater_的博客
11-20 485
随机背景色，随机验证码，随机干扰点
验证码的实现
weixin_44239550的博客
12-17 4609
用什么来输出验证码图片？输出流，写到servlet里面，哪里需要就直接调用这个servlet怎么确保点击一次更换一张验证码？每次点击事件后更换src的地址值，要确保每次地址值都不一样还需要加上时间的毫秒值。在servlet中拼接其他字符需要加上英文状态下的?。如何进行判断用户输入的验证码是否正确？保存返回值就可以了，保存到session中，再比对用户输入的就可以。用户验证码的逻辑是怎么样的？填写错误之后先提示，然后仍然跳转到注册界面，最后直接return掉这一次的servlet请求。
网站中的验证码，JAVA代码（javax.script.ScriptEngineManager)
CSDN甄子蛋
10-03 1642
这个包不经常用，需要手动导入，具体代码如下： public BufferedImage createCode(User user, long goodsId) { if(user==null||goodsId&amp;lt;=0) { return null; } int width=80; int height=32; //创建一个图片 BufferedImage image=new B...
C#实现的简单验证码识别实例
01-01
我要识别的验证码是一种非常简单，如图: 识别步骤： 1、图片灰度化(把彩色的验证码图片转换成灰色的图片)、图片二值化 代码如下: for (int i = 0; i < bmp.Width; i++)  {  for (int j = 0; j < bmp....
JS 实现随机验证码功能
10-20
验证码验证是网页常出现的一个验证点，所谓验证码类型有很多，下面代码只是实现一个简单的验证功能，需要的朋友参考下
python脚本实现验证码识别
12-25
好吧，其实是验证码太简单。下面就是要识别的验证码。 我主要用的是Python中的PIL库。 首先进行二值化处理。由于图片中的噪点颜色比较浅，所以可以设定一个阈值直接过滤掉。这里我设置的阈值是150，像素大于150的...
简单的实现网页验证码图片识别并转换为文本程序
07-04
一个简单的实现网页验证码图片识别并转换为文本程序，工程在VS2010下编译通过，可以识别网页上字母和数字等，基本上只要不是很复杂的校验码都能识别成功 哦！
Web功能设计：验证码
啊Q老师
10-07 2236
Web功能设计：验证码
网页中的验证码
05-01
便于编程人员编写程序
随机生成验证码
07-30
验证码，已经写好，直接放入工程可以使用，会直接在页面显示。验证功能自己写。
纯前端实现—网页验证码
热门推荐
孤寒者的博客
11-13 2万+
实现效果： 1.通过页面刷新以及鼠标点击验证码区域可以实现验证码的刷新； 2.实现常规验证码的操作。如果你不输入验证码会告诉你让你输入；如果输入错误也会提醒你；当你输入正确无误会庆祝哦！ 验证码 源码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">
十大验证码解决方案服务比较
Captcha_Service的博客
11-26 1万+
! [Alt] (https://imgconvert.csdnimg.cn/aHR0cHM6Ly9hdmF0YXIuY3Nkbi5uZXQvNy83L0IvMV9yYWxmX2h4MTYzY29tLmpwZw) Здравствуйте! Это первый раз , когда вы используете ** редактор Markdown ** показана на стран...
网页数字验证码的生成方法
小马哥的专栏
10-30 988
package com.niit.igeek.servlet; import java.awt.Color; import java.awt.Font; import java.awt.Graphics; import java.awt.image.BufferedImage; import java.io.IOException; import java.util.Random; impor
网页验证码php代码实现,php网页端验证码功能的实现代码
weixin_35720035的博客
04-01 556
我们在实际开发中，会用到短信验证码以及网页验证码，相对来说网页验证码的成本比较低，安全系数也还可以，本文主要和大家详细介绍了php制作网页端验证码效果，运用到短信验证码以及网页验证码实践中，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能帮助到大家。接下来我们就来做一个网页端的验证码，直接上代码：首先来说一下文件目录结构：|----------phpyanzheng 项目文件夹|----...
最简单的验证码（利用JSP生成验证码）
花2不谢
08-29 1万+
可以直接利用jsp输出验证码。jsp文件如下： <%@ page contentType="image/jpeg" import="java.awt.*, java.awt.image.*,java.util.*,javax.imageio.*" pageEncoding="utf-8"%> <%! Color getRandColor(int fc,int bc) { Random ra
怎么用javaweb写网页验证码
04-25
要使用 JavaWeb 编写网页验证码，你需要进行以下步骤： 1. 在你的 JavaWeb 项目中，创建一个 Servlet 类，并实现 doGet() 方法。 2. 在 doGet() 方法中，生成一个随机的验证码字符串。 3. 将验证码字符串保存在 session 中。 4. 将验证码的图像生成为 PNG 格式，并将其输出到浏览器的输出流中。 5. 在网页中将图像和输入框（用于输入验证码）放置于一个 form 表单中，并在 form 中指定 action 属性为该 Servlet 的路径。 以下是简单的示例代码： ``` @WebServlet("/validateCodeServlet") public class ValidateCodeServlet extends HttpServlet { private static final long serialVersionUID = 1L; protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { // 创建图像对象 BufferedImage image = new BufferedImage(100, 30, BufferedImage.TYPE_INT_RGB); Graphics2D g = image.createGraphics(); // 设置背景色 g.setColor(Color.WHITE); g.fillRect(0, 0, image.getWidth(), image.getHeight()); // 生成随机的验证码字符串 String code = generateRandomCode(); // 将验证码字符串保存在 session 中 HttpSession session = request.getSession(); session.setAttribute("validateCode", code); // 在图像上绘制验证码字符串 g.setColor(Color.BLACK); Font font = new Font("Arial", Font.BOLD, 20); g.setFont(font); g.drawString(code, 10, 20); // 清空绘图对象 g.dispose(); // 输出图像到浏览器 response.setContentType("image/png"); OutputStream os = response.getOutputStream(); ImageIO.write(image, "png", os); os.flush(); os.close(); } // 生成随机的验证码字符串 private String generateRandomCode() { String code = ""; // 生成 5 位长度的随机字符串 for (int i = 0; i < 5; i++) { int random = (int)(Math.random() * 10); code += random; } return code; } } ``` 在网页中将验证码图像和输入框放置于一个 form 表单中： ``` <form action="validateCodeServlet" method="get"> <img src="validateCodeServlet" onclick="this.src='validateCodeServlet?time='+Math.random()" /> <input type="text" name="validateCode" /> <input type="submit" value="提交" /> </form> ``` 注意，在生成验证码图像时，你可以根据需要自己定义验证码的样式和字体，上述代码只是一个简单的示例。另外，为了防止浏览器显示缓存，每次通过生成的链接来请求验证码图像时，可在链接后面加上一个不同的参数，例如上面的示例中添加的 ?time='+Math.random() 。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值