<%--
Created by IntelliJ IDEA.
User: Dell
Date: 2021/3/27
Time: 19:51
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div {
width: 160px;
height: 36px;
background-color: #f40;
line-height: 36px;
text-align: center;
color: #fff;
font-size: 16px;
margin: 30px auto;
cursor: pointer;
-webkit-user-select: none; /*禁止用户选中文字*/
}
</style>
</head>
<body>
<form action="/dl_war_exploded/ss" method="post">
<table>
<tr>
<td>用户名:</td>
<td><input type="text" name="username" class="username"> </td>
</tr>
<tr>
<td>密 码:</td>
<td><input type="password" name="password" class="password"> </td>
</tr>
<td>验证码:</td>
<td><input type="text" name="yzm" id="inyzm"></td>
</tr>
<tr>
<td></td>
<td><div id="code_box">Af3D</div></td>
</tr>
<tr>
<td></td>
<td colspan="2"><input type="submit" value="登录" onclick="yzyzm()"> </td>
</tr>
</table>
</form>
<!--<div id="code_box">Af3D</div>-->
<script>
var result;
var code_box = document.getElementById("code_box");
function refreshCode() {
//62个字符 随机选择4位
var code = '0123456789qwertyuiopasdfghjklzxcvbnmQWERTYUIOPASDFGHJKLZXCVBNM',
char = '',
result = '';
for (var i = 0; i < 4; i++) {
//随机选择一位 （0,61） 写出0到61的随机的索引数字
var code_index = Math.round(Math.random()*61);
//得到随机的索引 取出随机地字符
var char = code[code_index];
//随机取出的字符 存在几个相同重复的问题 ，而且对于字母，不能区分大小写。
// 避免重复的思路是：取出字符之后,和最后的result对比一下，看看里边是不是已经存在了，如果存在本次循环就终止，进行下一次
if (result.toUpperCase().indexOf(char.toUpperCase()) > -1)
//indexOf() == -1 说明结果里边没有要找的字符 那么 > -1 就是 里边有重复的字符
{
i --;
//为什么会 --？ 因为如果条件成立，那么本轮循环就结束进行下一轮循环（自然i就加1了），那么本轮本应该取出的字符就没有了
//到最后会少一个字符 缺席
continue;//终止本轮循环 进行下一轮
}
result += char;
}
code_box.innerHTML = result;
}
//点击事件
code_box.onclick = refreshCode;
function yzyzm() {
var inyzm = document.getElementById("inyzm").value;
if(inyzm!==result.toLowerCase()){
alert("验证码输入错误");
}
}
</script>
</body>
</html>
<%--
Created by IntelliJ IDEA.
User: Dell
Date: 2021/3/27
Time: 19:49
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>Title</title>
<style>
h1{
color: blue;
}
</style>
</head>
<body>
<h1 >登陆成功</h1>
</body>
</html>
package servlet;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
@WebServlet("/ss")
public class loginservlet extends HttpServlet {
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
String username = req.getParameter("username");
String password = req.getParameter("password");
if ("zs".equals(username)&&"123".equals(password)){
req.setAttribute("username", username);
req.getRequestDispatcher("login_success.jsp").forward(req, resp);
}else {
req.getRequestDispatcher("login.jsp").forward(req, resp);
}
}
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
doPost(req, resp);
}
}
