程序运行截图如下:
当输入错误验证码点击登录后
输入正确验证码后,就可以跳转了。
这里主要是使用JS生成了验证码
程序结构如下
源码如下:
vail.js
扫描二维码关注公众号,回复:
9422266 查看本文章
//高、宽、字符大小、字符集
var w = 80;
var h = 24;
var fontsize = h - 6;
var str = "0123456789abcdefABCDEF";
function randInt(max) {
return Math.floor(Math.random() * 100000 % max);
}
//生成随机长度字符串
function randCode(len) {
if(len < 4){
len = 4;
}
var code = "";
for(var i = 0; i < len; i++){
code += str.charAt(randInt(str.length));
}
return code;
}
function randColor() {
var r = randInt(256);
var g = randInt(256);
var b = randInt(256);
return "rgb(" + r +"," + g + "," + b + ")";
}
//绘制图片
function drawCode(canvas) {
var valiCode = randCode(8);
w = 5 + fontsize * valiCode.length;
if(canvas != null && canvas.getContext && canvas.getContext("2d")){
//设置显示区域大小
canvas.style.width = w;
//设置画板高度
canvas.setAttribute("width", w);
canvas.setAttribute("height", h);
//得到画笔
var pen = canvas.getContext("2d");
//绘制背景
pen.fillStyle = "rgb(255, 255, 255)";
pen.fillRect(0, 0, w, h);
//设置水平位置
pen.textBaseline = "top"; //middle, bottom
//绘制内容
for(var i = 0; i < valiCode.length; i++){
pen.fillStyle = randColor();
pen.font = "bold " + (fontsize + randInt(3)) + "px 微软雅黑";
pen.fillText(valiCode.charAt(i), 5 + fontsize * i, randInt(5));
}
//绘制噪音线
for(var i = 0; i < 2; i++){
pen.moveTo(randInt(w) / 2, randInt(h));
pen.lineTo(randInt(w), randInt(h));
pen.strokeStyle = randColor();
pen.lineWidth = 2;
pen.stroke();
}
return valiCode;
}
}
web.xml
<!DOCTYPE web-app PUBLIC
"-//Sun Microsystems, Inc.//DTD Web Application 2.3//EN"
"http://java.sun.com/dtd/web-app_2_3.dtd" >
<web-app>
<display-name>Archetype Created Web Application</display-name>
</web-app>
index.jsp
<%--
Created by IntelliJ IDEA.
User: cff
Date: 2020/1/30
Time: 23:06
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>Title</title>
</head>
<body>
<h1>SUCCESS</h1>
</body>
</html>
jsVail.jsp
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>js</title>
<style type="text/css">
.code_a{
color: #0000ff;
font-size: 12px;
text-decoration: none;
cursor: pointer;
}
#cvs{
cursor: pointer;
}
</style>
<script src="js/vail.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var valicode;
function changeCode(){
var cvs = document.getElementById("cvs");
valicode = drawCode(cvs);
}
function valiCode(){
var code = document.getElementById("inCode").value;
if(code.toLowerCase() == valicode.toLowerCase()){
return true;
}
else{
document.getElementById("err").innerHTML = "输入的验证码错误!";
changeCode();
return false;
}
}
window.onload = changeCode;
</script>
</head>
<body>
<form action="index.jsp" method="post">
<label>验证码:</label>
<input type="text" id="inCode" name="inCode" />
<canvas id="cvs" οnclick="changeCode()"></canvas>
<a class="code_a" οnclick="changeCode()">换一张</a><br/>
<input type="submit" value="登录" οnclick="return valiCode()" />
</form>
<div style="color:red" id="err"></div>
</body>
</html>
porn.xml
<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
<modelVersion>4.0.0</modelVersion>
<groupId>org.example</groupId>
<artifactId>vailJavaScript</artifactId>
<version>1.0-SNAPSHOT</version>
<packaging>war</packaging>
</project>