로그인 페이지: login.jsp
회원관리를 위한 JSP 파일은 member 폴더에 생성
JSP 생성 시 “parent folder”값을 “/WebContent/member”로 지정
입력값을 체크하기 위한 자바스크립트 파일 member.js 작성
WebContent 아래에 script 폴더에 저장
아이디와 암호 모두 입력되었을 때만 로그인 인증 처리 수행
입력이 안되면 알림창으로 에러 메시지 출력
login(submit) : form 태그 action 속성을 "login.do"로 요청, onclick="return loginCheck()"
join(button) : 서블릿 클래스를 "join do"로 요청
<login.jsp>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Log In page</title>
<!-- 입력정보 유효성 검사 javascript -->
<script type="text/javascript" src="../script/member.js"></script>
</head>
<body>
<h3>Log In</h3>
<form method="POST" action="/login.do" name="loginform">
<table>
<tr>
<td>아이디</td>
<td colspan="2"><input type="text" name="userid"></td>
</tr>
<tr>
<td>비밀번호</td>
<td colspan="2"><input type="password" name="pwd"></td>
</tr>
<tr>
<td><input type="submit" value="Log In" onclick="return loginCheck()"></td>
<td style="text-align: center"><input type="reset" value="cancle"></td>
<td style="text-align: right"><input type="button" value="Join" onclick="location.href='join.do'">
<td>
</tr>
</table>
</form>
</body>
</html>
<member.js>
/**
* 로그인 처리 현황
1. 아이디와 암호 모두 입력되었을 때만 로그인 인증 처리 수행
2. 입력이 안되면 알림창으로 에러 메시지 출력
*/
function loginCheck(){
if (document.loginform.userid.value == ""){
alert("아이디를 입력해 주세요.");
document.loginform.userid.focus();
return false;
} else if (document.loginform.pwd.value == ""){
alert("비밀번호를 입력해주세요.");
document.loginform.pwd.focus();
return false;
} else {
return true;
}
}자바스크립트로 유효성 검사
728x90
반응형
'JSP, Servlet > JSP를 이용하여 로그인 페이지 만들기' 카테고리의 다른 글
| [JSP] 데이터베이스를 이용한 회원관리 시스템 - 6(회원정보 수정) (0) | 2020.08.20 |
|---|---|
| [JSP] 데이터베이스를 이용한 회원관리 시스템 - 5(회원가입 구현) (0) | 2020.08.20 |
| [JSP] 데이터베이스를 이용한 회원관리 시스템 - 4(로그인 인증처리, 회원 인증 처리) (0) | 2020.08.19 |
| [JSP] 데이터베이스를 이용한 회원관리 시스템 - 2(DAO, VO클래스 생성) (0) | 2020.08.18 |
| [JSP] 데이터베이스를 이용한 회원관리 시스템 - 1(기본세팅-테이블 생성) (0) | 2020.08.18 |
