[JSP] 로그인 기능, 창 만들기 (bootStrap5 적용), 유효성 검사

1. Controller

package ex01;

import java.io.IOException;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

@WebServlet("/login2")
public class Login2 extends HttpServlet{

	@Override
	protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		req.getRequestDispatcher("/WEB-INF/jsp/member/login2.jsp").forward(req, resp);
	}

	@Override
	protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		req.setCharacterEncoding("utf-8");
		String id = req.getParameter("id");
		String pw = req.getParameter("pw");
		
		System.out.println(id);
		System.out.println(pw);
		
		req.setAttribute("id", id);
		req.setAttribute("pw", pw);
		
		req.getRequestDispatcher("/WEB-INF/jsp/member/login2_result.jsp").forward(req, resp);
	}
}

2. JSP

(유효성 검증, 틀 만들기)

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script>
    // 유효성 검증 예정
    window.onload = function(){
        document.frm.onsubmit = function() {
            console.log(document.frm.id.value);
            console.log(document.frm.pw.value);
            console.log(document.frm.pwChk.value);
            if(document.frm.id.value.length < 5){
                alert("아이디를 입력하세요")
                return false;
            }
            else if(document.frm.pw.value !== document.frm.pwChk.value){
                alert("비밀번호를 확인해주세요.")
                return false;
            }
        }
    }
</script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.1/css/bootstrap.min.css" integrity="sha512-Ez0cGzNzHR1tYAv56860NLspgUGuQw16GiOOp/I2LuTmpSK9xDXlgJz3XN4cnpXWDmkNBKXR/VDMTCnAaEooxA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.1/js/bootstrap.min.js" integrity="sha512-EKWWs1ZcA2ZY9lbLISPz8aGR2+L7JVYqBAYTq5AXgBkSjRSuQEGqWx8R1zAX16KdXPaCjOCaKE8MCpU0wcHlHA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
</head>
<body>
</head>
<body>
<div class="container">
	<div class="col-6 mx-auto">
		<form class="form"  method="post">
			<label for="userid" class="form-label">아이디</label>
			<input type="text" name="user_id" id="userId" class="form-control">
			<label for="password" class="form-label">비밀번호</label>
			<input type="text" name="user_pw" id="password" class="form-control">
			<div class="d-grid">
				<button class="btn btn-primary btn-block my-3">로그인</button>
			</div>
			<div class="d-grid">
			<button type="reset" class="btn btn-danger float-right">다시입력</button>
			</div>
		</form>
	</div>
</div> 
</body>
</html>

3. 로그인 결과창

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<P>${id}</P>
<P>${pw}</P>
</body>
</html>

4. 출력화면

'JAVA_SERVLET' 카테고리의 다른 글

[JAVA_SERVLET] 파일 업로드 (다중업로드, 자동 요일별분류) (0)	2022.03.19
[JAVA_SERVLET] 회원 목록 조회 (+DB 연동) (0)	2022.03.16
[JAVA_SERVLET] 서블릿을 이용한 환율 계산기. (0)	2022.03.15
[JAVA_SERVLET] .jsp 적용이 안된 경우 (0)	2022.03.14

'JAVA_SERVLET' 카테고리의 다른 글

티스토리툴바