简单的前台验证码.

最新推荐文章于 2020-08-18 11:57:25 发布
最新推荐文章于 2020-08-18 11:57:25 发布
阅读量122 收藏
点赞数
分类专栏： 前台页 文章标签： html 验证码
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sanyecao2314/article/details/84446297
版权

项目里用到的不要和后台交互的简单验证码.标记一下.

<html>
<head>
<style type="text/css">
.code{
background-image:url(111.jpg);
font-family:Arial,宋体;
font-style:italic;
color:green;
border:0;
padding:2px 3px;
letter-spacing:3px;
font-weight:bolder;
}
.unchanged {
border:0;
}
</style>
<script language="javascript" type="text/javascript">
var code ; //在全局 定义验证码
function createCode(){ 
code = new Array();
var codeLength = 4;//验证码的长度
var checkCode = document.getElementById("checkCode");
checkCode.value = "";

var selectChar = new Array(2,3,4,5,6,7,8,9,'A','B','C','D','E','F','G','H','J','K','L','M','N','P','Q','R','S','T','U','V','W','X','Y','Z');

for(var i=0;i<codeLength;i++) {
   var charIndex = Math.floor(Math.random()*32);
   code +=selectChar[charIndex];
}
if(code.length != codeLength){
   createCode();
}
checkCode.value = code;
}

function validate () {
var inputCode = document.getElementById("input1").value.toUpperCase();

if(inputCode.length <=0) {
   alert("请输入验证码！");
   return false;
}
else if(inputCode != code ){
   alert("验证码输入错误！");
   createCode();
   return false;
}
else {
   alert("成功！");
   return true;
}
}
</script>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"></head>
<body onLoad="createCode();">

<input type="text" id="input1" />
<input type="button" id="checkCode" class="code" style="width:60px" onClick="createCode()" /> <a href="#" onClick="createCode()"></a>
<input id="Button1" onClick="validate();" type="button" value="确定" />
<script></script>
</body>
</html>

 

sanyecao2314
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JS实现获取短信验证码功能（前台代码）
12-10
也是通过网络搜集整理的，我自己在实际项目中用到，使用了jquery技术，很简单，全套的，保证一看就懂。
Happy Captcha简易验证码源代码
03-18
Happy Captcha简易验证码是一款易于使用的Java验证码软件包，旨在花最短的时间，最少的代码量，实现Web站点的验证码功能。 Happy Captcha简易验证码提供了图片和动画两种展现形式，验证码内容包括中文(收录3500个...
前台页面验证码如何生成
gongww712的博客
05-16 2081
验证码：就是将一串随机产生的数字或符号，生成一幅图片， 图片里加上一些干扰象素（防止OCR），由用户肉眼识别其中的验证码信息，输入表单提交网站验证，验证成功后才能使用某项功能。  验证码作用：  一般是防止有人利用机器人自动批量注册、对特定的注册用户用特定程序暴力破解方式进行不断的登陆、灌水。因为验证码是一个混合了数字或符号的图片，人眼看起来都费劲，机器识别起来就更困难。像百度贴吧未登录发贴要
前台生成验证码
Fuyonghui123的博客
08-29 618
package cn.gov.csrc.servlet;      import java.awt.Color;   import java.awt.Font;   import java.awt.Graphics;   import java.awt.image.BufferedImage;   import java.io.IOException;   import java.u
前台动态获取验证码
qq_43154385的博客
12-14 699
引入jsp方式 先创建一个jsp文件,下面这段jsp,其实就是在jsp上写java代码来画一个验证码图片,然后把生成的验证码存入session当中,然后在后台就可以通过session来获取到验证码进行验证 前台：validatecode.jsp，这是一个单独的jsp &lt;%@ page language="java" contentType="text/html; charset=UT...
一个简单的PHP验证码实现代码
10-25
在PHP中实现一个简单的验证码并不复杂，通过以下几个关键步骤，我们可以创建一个既实用又美观的验证码系统。 首先，我们需要生成一个随机的四位数字验证码。这可以通过循环和`mt_rand()`函数来实现。`mt_rand()`是...
java实现验证码类生成中文验证码
09-04
java实现的汉字输入验证码,主要包含两个类，一个是生成验证码，一个是判断验证码输入是否正确,实现原理非常简单，将汉字和干扰线生成图片并将汉字保存到session，前台获取每次生成验证码图片并用文本框值和session值...
Java汉字随机验证码
02-13
主要包含两个类，一个是...实现原理比较简单，将汉字和干扰线生成图片并将汉字保存到session，前台获取每次生成的验证码图片进行展示，验证的时候就获取文本框输入的值传到后台与session值进行比较，功能就怎么简单。
前台验证码简单生成
weixin_40515983的博客
03-16 197
网站上的验证码的作用是保护网站安全，一般网站都要通过验证码来防止机器大规模注册，机器暴力破解数据密码等危害。java如何实现呢？废话不多说，以下是个简单的例子。 1.主要生成方法（包含main方法，直接运行即可） package com.hcycom.vipmsrest.util; import org.apache.commons.lang.RandomStringUtils; imp...
JS前台验证码生成
Yang_Code
01-03 761
在使用本代码之前要引入jQuery   $(function () {              var show_num = [];     draw(show_num);     console.log("验证码"+show_num);      //canvas是验证码显示的div     $("#canvas").on('click',function(){         dra...
Web---图片验证码生成教程详解-从简单到复杂-从本地到前后台
weixin_34008933的博客
07-18 335
首先，我们先来看本地如何生成图片验证码的，再来写输出到网页的验证码如何实现。 先来看最简单的—实现的功能是，将一个字符串变成图片写入到文件中 实现代码： package cn.hncu.img; import java.awt.Graphics; import java.awt.image.BufferedImage; ...
网站前台验证码（源代码）的实现点击刷新
Blue的博客
07-19 6352
为了方便想学习网站前台方向读者刚睁开眼睛就决定将自己写的验证码的实现写下来供大家参考 在此基础上其实可以实现运算的验证码、或者是图片展示的验证码、其他样式的验证码。请大家多多评价提供自己的想法这样能够集思广益提供更加多的思路。好了下面发代码： login.jsp页面的代码主要看中间验证码部分是怎么实现的： <% String path = request.getContextPath();
前台读取后台生成的验证码内容
limlimlim的专栏
08-27 5337
1.在后台生成验证码的一般处理程序中除了在session写入验证码的内容，在cookie中也写一个验证码的内容                 //把验证码内容保存到cookie中，方便客户端验证                 HttpCookie vCodeCookie = new HttpCookie("vCode", checkCode);                 vCode
验证码-图片设置
weixin_47254122的博客
08-18 460
开发工具与关键技术： MVC 作者：杜永鹏 撰写时间：2020/8/17 登录页面 验证图片的加载和切换;验证图片并不是一张静态的图票,而这张图片通过代码去自动生成。 1.调用图片的生成工具类 2.添加一个目录把自动生成的工具类粘贴到目录中 2.1它是一个公共的静态的类，直接调用就ok 3.写一个方法（方法名首字母要大写） 4.调用类前要把命名空间给引进来（这一步不能少不然接下来就会找不到） 5.生成随机字符串作为验证码（长度可自设） 6.根据生成的验证码字符串保存图片 7.将生成的验证码字符串保存
有关前台验证和后台验证
热门推荐
苏公子的博客
04-07 1万+
正常来说，前台验证和后台验证是都要有的。 因为JS验证不安全，如果有意为之，那么完全可以绕过你的JS验证。 如果你开发的是商业应用，那么稳定性和安全性是相当重要的，而这里就存在有安全漏洞。 客户端验证：仅仅是为了方便，它可以为用户提供快速反馈，给人一种运行在桌面应用程序的感觉，使用户能够及时察觉所填写数据的不合法性。基本上用脚本代码实现，如JAVASCRIPT或VBSCRIPT，...
javaweb登录验证码实现
最新发布
05-17
要实现JavaWeb登录验证码，可以采用以下步骤： 1. 在登录页面中添加验证码输入框和图片显示框。 2. 生成随机的验证码字符串。 3. 把验证码字符串保存到session中。 4. 在后台生成一张验证码图片，并把验证码字符串画到图片上。 5. 把图片输出到前台显示。 6. 用户输入验证码后，后台从session中取出保存的验证码字符串进行比对，验证是否正确。 下面是一个简单的示例代码： 1. 登录页面login.jsp： ```html <form action="login" method="post"> <label>用户名：</label> <input type="text" name="username"><br> <label>密码：</label> <input type="password" name="password"><br> <label>验证码：</label> <input type="text" name="verifyCode"> <img src="verifyCode" onclick="this.src='verifyCode?'+Math.random()"><br> <input type="submit" value="登录"> </form> ``` 2. 后台生成验证码的Servlet： ```java @WebServlet("/verifyCode") public class VerifyCodeServlet extends HttpServlet { private static final long serialVersionUID = 1L; protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { // 设置响应的类型格式为图片格式 response.setContentType("image/jpeg"); // 创建验证码对象 VerifyCode verifyCode = new VerifyCode(); // 把验证码字符串保存到session中 HttpSession session = request.getSession(); session.setAttribute("verifyCode", verifyCode.getCode()); // 把验证码图片输出到前台 verifyCode.write(response.getOutputStream()); } } ``` 3. 验证验证码的Servlet： ```java @WebServlet("/login") public class LoginServlet extends HttpServlet { private static final long serialVersionUID = 1L; protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { // 获取用户输入的验证码和保存在session中的验证码字符串 String verifyCode = request.getParameter("verifyCode"); HttpSession session = request.getSession(); String sessionVerifyCode = (String) session.getAttribute("verifyCode"); // 比对验证码是否正确 if (!verifyCode.equalsIgnoreCase(sessionVerifyCode)) { response.getWriter().println("验证码错误！"); return; } // 验证通过，继续登录验证逻辑... } } ``` 其中，VerifyCode是一个生成验证码图片的辅助类，可以参考下面的代码实现： ```java public class VerifyCode { private static final int WIDTH = 120; // 验证码图片宽度 private static final int HEIGHT = 40; // 验证码图片高度 private static final int CODE_LENGTH = 6; // 验证码长度 private static final String CODE_CHARS = "0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ"; // 验证码字符集 private String code; // 验证码字符串 public VerifyCode() { // 生成随机的验证码字符串 StringBuilder sb = new StringBuilder(); Random random = new Random(); for (int i = 0; i < CODE_LENGTH; i++) { sb.append(CODE_CHARS.charAt(random.nextInt(CODE_CHARS.length()))); } this.code = sb.toString(); } public String getCode() { return code; } public void write(OutputStream os) throws IOException { // 创建验证码图片 BufferedImage image = new BufferedImage(WIDTH, HEIGHT, BufferedImage.TYPE_INT_RGB); Graphics2D g = (Graphics2D) image.getGraphics(); g.setColor(Color.WHITE); g.fillRect(0, 0, WIDTH, HEIGHT); g.setColor(Color.BLACK); g.drawRect(0, 0, WIDTH - 1, HEIGHT - 1); g.setFont(new Font("宋体", Font.BOLD, 20)); for (int i = 0; i < code.length(); i++) { g.drawString(String.valueOf(code.charAt(i)), 20 * i + 10, 25); } // 输出验证码图片 ImageIO.write(image, "JPEG", os); os.flush(); os.close(); } } ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值