AngelPlayer`s Diary

[쉽게 배우는 JSP 웹 프로그래밍] 8장 연습문제 답안

개인 공부/JSP
2021. 3. 26. 10:37

※ 직접 풀이를 진행하였기 때문에, 정답에 오류가 있을 수 있습니다.

오류를 발견 시, 댓글로 남겨주시면 감사하겠습니다..!

 

※ 소스 코드는 Copy & Paste를 하면 제대로 출력되지 않아서,

최하단에 별도의 첨부파일로 제공합니다.

 

쉽게 배우는 JSP 웹 프로그래밍 (송미영 저)

 

 

 

01. 

폼에서 입력한 값을 서버로 올리기 전에 규칙에 맞게 적용되었는지 검증하는 것

 

 

 

02.

기본 유효성 검사 - 입력된 데이터 값의 존재 유무를 검사

데이터 형식 유효성 검사 - 패언에 적합한지 여부를 검사(정규 표현식 사용)

 

 

 

03.

input 태그에서 button 또는 submit을 누르면 onclick 속성을 통해 핸들러 함수를 설정

js를 통해 핸들러 함수를 작성

input 태그의 name을 통해 해당 태그의 값을 불러와 확인

 

 

 

04.

validation01.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>
		function formCheck() {
			const form = document.loginForm;

			if(form.id.value == "") {
				alert("아이디를 입력해주세요..!");
				form.id.focus();
				return;
			} 

			if(form.password.value == "") {
				alert("비밀번호를 입력해주세요..!");
				form.password.focus();
				return;
			} 

			if ((form.password.value).search(form.id.value) > -1) {
				alert("비밀번호는 ID를 포함할 수 없습니다.");
				return false;
			}
            
			form.submit();

		}
	</script>
</head>
<body>
	
	<form action="validation01_process.jsp" method="POST" name="loginForm">
		<p>아이디 : <input type="text" name="id"></p>
		<p>비밀번호 : <input type="text" name="password"></p>
		<input type="button" value="전송" onclick="formCheck()">
	</form>
</html>

 

validation01_process.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>
</head>
<body>
	<h3>입력에 성공했습니다.</h3>
	<%
		request.setCharacterEncoding("utf-8");
	
		String id = request.getParameter("id");
		String password = request.getParameter("password");	
	%>
	
	<p>아이디 : <%=id %></p>
	<p>비밀번호 : <%=password %></p>
</body>
</html>

 

 

 

05.

validation02.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>
		function formCheck() {
			const form = document.loginForm;
			
			if(form.id.value == "") {
				alert("아이디를 입력해주세요..!");
				form.id.focus();
				return;
			} else if (form.password.value == "") {
				alert("비밀번호를 입력해주세요..!");
				form.password.focus();
				return;
			} else if(form.password_check.value == "") {
				alert("비밀번호 재확인을 입력해주세요..!");
				form.password_check.focus();
				return;
			} 

			const passwd = String(form.password.value);

			for (i = 0; i < passwd.length -2; i++) {
				if(passwd[i] == passwd[i+1] && passwd[i+1] == passwd[i+2]) {
					alert("영문, 숫자는 3자 이상 연속 입력할 수 없습니다..!");
					form.password.select();
					return;
				}
			}
			
            if (form.password.value != form.password_check.value) {
				alert("비밀번호와 비밀번호 확인을 서로 다르게 입력하였습니다..!");
				form.password.select();
				return;
			}

			form.submit();

		}
	</script>
</head>
<body>
	
	<form action="validation02_process.jsp" method="POST" name="loginForm">
		<p>아이디 : <input type="text" name="id"></p>
		<p>비밀번호 : <input type="text" name="password"></p>
		<p>비밀번호 확인 : <input type="text" name="password_check"></p>
		<input type="button" value="전송" onclick="formCheck()">
	</form>

</body>
</html>

 

 

validation02_process.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>
</head>
<body>
	<h3>입력에 성공했습니다.</h3>
	<%
		request.setCharacterEncoding("utf-8");
	
		String id = request.getParameter("id");
		String password = request.getParameter("password");	
	%>
	
	<p>아이디 : <%=id %></p>
	<p>비밀번호 : <%=password %></p>
</body>
</html>

 

 

 

06.

validation03.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>
		function formCheck() {
			const form = document.loginForm;
			
			if(form.id.value == "") {
				alert("아이디를 입력해주세요..!");
				form.id.focus();
				return;
			} else if (form.password.value == "") {
				alert("비밀번호를 입력해주세요..!");
				form.password.focus();
				return;
			} else if(form.password_check.value == "") {
				alert("비밀번호 재확인을 입력해주세요..!");
				form.password_check.focus();
				return;
			} 

			var check = /^(?=.*[A-Za-z])(?=.*\d)(?=.*[$@$!%*#?&])[A-Za-z\d$@$!%*#?&]{8,}$/;

			if(!check.test(form.password.value)) {
				alert("영문+숫자+특수기호 8자리 이상으로 구성하여야 합니다..!");
				form.password.select();
				return;
			}
			
			if (form.password.value != form.password_check.value) {
				alert("비밀번호와 비밀번호 확인을 서로 다르게 입력하였습니다..!");
				form.password.select();
				return;
			}

			form.submit();

		}
	</script>
</head>
<body>
	
	<form action="validation03_process.jsp" method="POST" name="loginForm">
		<p>아이디 : <input type="text" name="id"></p>
		<p>비밀번호 : <input type="text" name="password"></p>
		<p>비밀번호 확인 : <input type="text" name="password_check"></p>
		<input type="button" value="전송" onclick="formCheck()">
	</form>

</body>
</html>

 

validation03_process.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>
</head>
<body>
	<h3>입력에 성공했습니다.</h3>
	<%
		request.setCharacterEncoding("utf-8");
	
		String id = request.getParameter("id");
		String password = request.getParameter("password");	
	%>
	
	<p>아이디 : <%=id %></p>
	<p>비밀번호 : <%=password %></p>
</body>
</html>

 

ch08.zip
0.00MB

'개인 공부 > JSP' 카테고리의 다른 글

[쉽게 배우는 JSP 웹 프로그래밍] 9장 연습문제 답안  (0) 2021.03.28
[쉽게 배우는 JSP 웹 프로그래밍] 9장 '다국어 처리' 정리 요약  (0) 2021.03.27
[쉽게 배우는 JSP 웹 프로그래밍] 8장 '유효성 검사' 정리 요약  (0) 2021.03.24
[쉽게 배우는 JSP 웹 프로그래밍] 7장 연습문제 답안  (0) 2021.03.23
[쉽게 배우는 JSP 웹 프로그래밍] 7장 '파일 업로드' 정리 요약  (0) 2021.03.22

공유하기

facebook twitter kakaoTalk kakaostory naver band
'개인 공부/JSP' 의 관련글

티스토리툴바