스프링

[스프링] 13장 유효성 검사

반응형

 

유효성 검사(validation)

 

: 입력한 데이터 값이 특정 규칙에 맞게 입력되었는지 검증하는 것

유효하지 않은 데이터 값을 입력할 시 부적합하다고 판명 -> 다시 폼 페이지로 되돌림

ex) 나이 입력, 회원 가입 시 아이디 중복 검사, 아이디 비밀번호 검사, IP 패킷 검사

 

=> 핸들러 함수 사용

 

 

 

  • 핸들러 함수

: 폼 페이지에서 이벤트 발생(submit 클릭)시 유효성 검사를 위해 매핑하는 메소드

자바 스크립트를 이용하여 코드를 작성

 

 

 

유효성 검사 예시

 

 

  • 아이디, 비밀번호 값 확인
<%@ page language="java" contentType="text/html; charset=UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<title>Validation</title>
<script type="text/javascript">
	function checkform() {
		let id = document.loginForm.id.value;
		let passwd = document.loginForm.passwd.value;
		
		console.log("id : " + id + ", passwd : " + passwd);
	}
</script>
</head>
<body>
	<!-- 폼페이지 
	action 생략 : action="validation01.jsp" method="get"
	-->
	<form name="loginForm">
		<p>아이디 : <input type="text" name="id" /></p>
		<p>비밀번호 : <input type="password" name="passwd" /></p>
		<!-- checkform() : 핸들러 함수 -->
		<p><input type="button" value="전송" onclick="checkform()" /></p>
	</form>
</body>
</html>

 

결과 화면1

 

 

 

  • 유효성 검사 체크
<%@ page language="java" contentType="text/html; charset=UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<title>Validation</title>
<script type="text/javascript">
	function checkLogin() {
		let form = document.loginForm;
		let id = form.id.value;
		let passwd = form.passwd.value;
		
		console.log("id : " + id + ", passwd : " + passwd);
		if(id=="") {
			alert("아이디를 입력해주세요.");
			form.id.focus(); //해당 입력 항목에 커서를 위치
			return;
		} else if(passwd == "") {
			alert("비밀번호를 입력해주세요.");
			form.passwd.focus();
			return;
		}
		//위의 분기문을 잘 통과
		form.submit();
	}
</script>
</head>
<body>
	<!-- 폼페이지 
	action 생략 : action="validation01.jsp" method="get"
	-->
	<form name="loginForm">
		<p>아이디 : <input type="text" name="id" /></p>
		<p>비밀번호 : <input type="password" name="passwd" /></p>
		<!-- checkLogin() : 핸들러 함수 -->
		<p><input type="button" value="전송" onclick="checkLogin()" /></p>
	</form>
</body>
</html>

 

결과 화면2

 

 

 

  • 아이디, 비밀번호 글자 수 제한

validation04.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<title>validation</title>
<script type="text/javascript">
	function checkLogin(){
		let form = document.loginForm;
		// 아이디 : 4~12자 이내로 입력
		if(form.id.value.length < 4 || form.id.value.length > 12) {
			alert("아이디는 4~12자 이내로 입력 가능합니다.");
			form.id.select();
			return;
		}
		// 비밀번호 : 4자 이상으로 입력
		if(form.passwd.value.length < 4) {
			alert("비밀번호는 4자 이상으로 입력해야 합니다.");
			form.passwd.select(); // focus() : 커서를 위치
			return;
		}
		
		// 모두 통과했다면
		form.submit();
	}
</script>
</head>
<body>
	<!-- 폼페이지 
	요청 URI : validation04_process.jsp
	요청 파라미터 : {id=a001&passwd=java}
	요청방식 : post
	-->
	<form name="loginForm" action="validation04_process.jsp" method="post">
		<p>아이디 : <input type="text" name="id" /></p>
		<p>비밀번호 : <input type="password" name="passwd" /></p>
		<!-- checkLogin() : 핸들러 함수 -->
		<p><input type="button" value="전송" onclick="checkLogin()" /></p>
	</form>
</body>
</html>

 

 

validation04_process.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
	<h3>입력에 성공했습니다.</h3>
	<!-- 폼페이지 
	요청 URI : validation04_process.jsp
	요청 파라미터 : {id=a001&passwd=java}
	요청방식 : post
	-->
	<%
		// 문자 인코딩 유형 처리
		request.setCharacterEncoding("UTF-8");
		String id = request.getParameter("id"); //a001
		String passwd = request.getParameter("passwd"); //java
	%>
	<p>아이디 : <%=id%></p>
	<p>비밀번호 : <%=passwd%></p>
</body>
</html>

 

결과 화면3-1 : 아이디 확인

 

결과 화면3-2 : 비밀번호 확인

 

결과 화면3-3 : 입력 성공 화면

 

 

 

  • 이름 유효성 추가

validation05.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<title>validation</title>
<script type="text/javascript">
	function checkLogin(){
		let form = document.loginForm;
		// 아이디 : 4~12자 이내로 입력
		if(form.id.value.length < 4 || form.id.value.length > 12) {
			alert("아이디는 4~12자 이내로 입력 가능합니다.");
			form.id.select();
			return;
		}
		// 비밀번호 : 4자 이상으로 입력
		if(form.passwd.value.length < 4) {
			alert("비밀번호는 4자 이상으로 입력해야 합니다.");
			form.passwd.select(); // focus() : 커서를 위치
			return;
		}
		
		// "1admin".substr(0,1) => 1
		// It is Not a Number : 그것은 숫자가 아니다.
		// isNaN
		if(!isNaN(form.name.value.substr(0,1))){ // 1
			// 숫자라면
			alert("이름은 숫자로 시작할 수 없습니다.");
			form.name.focus();
			return;
		}
		
		// 모두 통과했다면
		form.submit();
	}
</script>
</head>
<body>
	<!-- 폼페이지 
	요청 URI : validation04_process.jsp
	요청 파라미터 : {id=a001&passwd=java}
	요청방식 : post
	-->
	<form name="loginForm" action="validation04_process.jsp" method="post">
		<p>아이디 : <input type="text" name="id" /></p>
		<p>비밀번호 : <input type="password" name="passwd" /></p>
		<p>이름 : <input type="text" name="name" /></p>
		
		<!-- checkLogin() : 핸들러 함수 -->
		<p><input type="button" value="전송" onclick="checkLogin()" /></p>
	</form>
</body>
</html>

 

결과 화면4

 

 

 

  • 아이디 영문 소문자만 가능, 비밀번호는 숫자만 입력 가능
<%@ page language="java" contentType="text/html; charset=UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<title>validation</title>
<script type="text/javascript">
	function checkLogin(){
		let form = document.loginForm;
		// 아이디 : 4~12자 이내로 입력
		if(form.id.value.length < 4 || form.id.value.length > 12) {
			alert("아이디는 4~12자 이내로 입력 가능합니다.");
			form.id.select();
			return;
		}
		
		// A001 = > 아이디는 영문 소문자만 가능
		for(let i=0;i<form.id.value.length; i++) {
			let ch = form.id.value.charAt(i);
			
			if( (ch<'a' || ch>'z')&&(ch>='A' || ch<='Z')&&(ch>='0' || ch<='9') ) {
				alert("아이디는 영문 소문자만 입력 가능합니다.");
				form.id.select();
				return;
			}
		}
		
		// 비밀번호 : 4자 이상으로 입력
		if(form.passwd.value.length < 4) {
			alert("비밀번호는 4자 이상으로 입력해야 합니다.");
			form.passwd.select(); // focus() : 커서를 위치
			return;
		}
		
		// 비밀번호는 숫자만 입력 가능. isNaN
		if( isNaN(form.passwd.value) ) {
			alert("비밀번호는 숫자만 입력 가능합니다.");
			form.passwd.select();
			return;
		}
		
		
		
		// "1admin".substr(0,1) => 1
		// It is Not a Number : 그것은 숫자가 아니다.
		// isNaN
		if(!isNaN(form.name.value.substr(0,1))){ // 1
			// 숫자라면
			alert("이름은 숫자로 시작할 수 없습니다.");
			form.name.focus();
			return;
		}
		
		// 모두 통과했다면
		form.submit();
	}
</script>
</head>
<body>
	<!-- 폼페이지 
	요청 URI : validation04_process.jsp
	요청 파라미터 : {id=a001&passwd=java}
	요청방식 : post
	-->
	<form name="loginForm" action="validation04_process.jsp" method="post">
		<p>아이디 : <input type="text" name="id" /></p>
		<p>비밀번호 : <input type="password" name="passwd" /></p>
		<p>이름 : <input type="text" name="name" /></p>
		
		<!-- checkLogin() : 핸들러 함수 -->
		<p><input type="button" value="전송" onclick="checkLogin()" /></p>
	</form>
</body>
</html>

 

결과 화면5-1

 

결과 화면5-2

 

 

반응형

'스프링' 카테고리의 다른 글

[스프링] 15장 쇼핑몰 시스템4  (0) 2024.04.12
[스프링] 14장 정규 표현식  (0) 2024.04.12
[스프링] 11장 파일 업로드  (0) 2024.04.09
[스프링] 10.5장 과제  (0) 2024.04.08
[스프링] 10장 쇼핑몰 시스템2  (0) 2024.04.02

티스토리툴바