(JSP 웹 프로그래밍) 검증 2 (데이터 형식 검증)

  • by

1. 데이터 유형 검증

▷ 사용자가 양식 페이지의 입력 항목에 입력한 데이터 값이 특정 형식에 적합한지 확인하기 위해 정규식을 사용하는 방법

▷ 기본 검증보다 복잡

◎아스키 코드
▷ 48 = 0, 57 = 9
▷ 65 = A, 90 = Z
▷ 97=a, 122=z

숫자만 입력 : event.keyCode >= 48 && event.keyCode<= 57
영어 전용 입력 : (event.keyCode >= 65 && event.keyCode<= 90) || (event.keyCode >= 97 && event.keyCode<= 122)
특수 문자만 입력 : (event.keyCode >= 33 && event.keyCode<= 47) || (event.keyCode >= 58 && event.keyCode<= 64) || (event.keyCode >= 58 && event.keyCode<= 64) || (event.keyCode >= && event.keyCode<= 126)
한글만 입력 : event.keyCode >= 12592 && event.keyCode<= 12687

인기글

◎정규 표현

▷ 특정 규칙이 있는 문자열 집합을 나타내는 데 사용되는 형식 언어

▷ 문자열의 특정 유형을 찾기 위해 패턴으로 표현한 표현

▷주민등록번호, 전화번호, 이메일 등 데이터 형식의 패턴이 일정한 데이터를 검사하기 위해 이용

◎정규 표현의 사용 형식

▷ 객체 초기화(object initializer)를 사용하는 방법으로, 입력된 식이 거의 변하지 않는 상수형일 때 주로 사용


◎ flag 사용 가능한 변수


▷ RegExp 객체를 사용하는 방법으로 정규 표현식이 자주 변경될 때 주로 사용됩니다.


◎정규 표현의 메소드의 종류


◎ exec를 사용하여 특정 문자 (java)를 입력하면 경고 창이 표시되는 예

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!
DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Validation</title>
</head>
<script type="text/javascript">
	function checkForm(){
		var regExp = /Java/i; // var regExp = nwe RegExp('java', 'i');와 같다
		var str = document.frm.title.value;
		var result = regExp.exec(str);
		alert(result(0));
	}
</script>
<body>
	<form name="frm">
		<p> 제목 : <input type="text" name="title">
			<input type="submit" value="전송" onclick="checkForm()">
	</form>

</body>
</html>


◎정규 표현의 표현 방법

▷ 기본 메타 문자 유형


▷ 문자 클래스의 종류


◎ 회원등록 폼 페이지에 입력한 데이터 형식을 검증한다

1. validation05.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!
DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Validation</title>
</head>
<script type="text/javascript">
	function checkMember(){
		
		var regExpId = /^(a-z|A-Z|ㄱ-ㅎ|ㅏ-ㅣ|가-힣)/;	// id가 영문자 또는 한글 입력으로 시작
		var regExpName = /^(가-힣)*$/;		// 이름은 한글만 입력
		var regExpPasswd = /^(0-9)*$/;		// 비밀번호는 숫자만 입력
		var regExpPhone = /^\d{3}-\d{3,4}-\d{4}$/;	// 전화번호 패턴으로 입력(숫자) 첫번째 3, 두번째 3~4, 세번째 4
		var regExpEmail = /^(0-9a-zA-Z)((-_\.)?(0-9a-zA-Z))*@(0-9a-zA-Z)((-_\.)?(0-9a-zA-Z))*\.(a-zA-Z){2,3}$/i;
		
		var form = document.Member;
		
		var id = form.id.value;
		var name = form.name.value;
		var passwd = form.passwd.value;
		var phone = form.phone1.value + "-" + form.phone2.value + "-"+ form.phone3.value;
		var email = form.email.value;
		
		if(!
regExpId.test(id)){
			alert("아이디는 문자로 시작해주세요!
");
			form.id.select();
			return;
		}

		if(!
regExpName.test(name)){
			alert("이름은 한글만 입력해주세요!
");
			return;
		}

		if(!
regExpPasswd.test(passwd)){
			alert("비밀번호는 숫자만 입력해주세요!
");
			return;
		}

		if(!
regExpPhone.test(phone)){
			alert("연락처 입력을 확인해주세요!
");
			return;
		}

		if(!
regExpEmail.test(email)){
			alert("이메일 입력을 확인해주세요!
");
			return;
		}
		
		form.submit();
	}
</script>
<body>
	<h3>회원 가입</h3>
	<form name="Member" action="validation05_process.jsp" method="post">
		<p> 아이디 : <input type="text" name="id">
		<p> 비밀번호 : <input type="password" name="passwd">
		<p> 이름 : <input type="text" name="name">
		<p> 연락처 : <select name="phone1">
					<option value="010">010</option>
					<option value="011">011</option>
					<option value="016">016</option>
					<option value="017">017</option>
					<option value="019">019</option>
					</select>-<input type="text" maxlength="4" size="4"
					name="phone2">-
					<input type="text" maxlength="4" size="4" name="phone3">
		<p> 이메일 : <input type="text" name="email">					
		<p><input type="button" value="가입하기" onclick="checkMember()">	
	</form>
</body>
</html>​


2. validation05_process.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!
DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Validation</title>
</head>
<body>
	<%
		request.setCharacterEncoding("utf-8");

	%>
	
	<p> 아이디 : <%= request.getParameter("id") %>
	<p> 비밀번호 : <%= request.getParameter("passwd") %>
	<p> 이름 : <%= request.getParameter("name") %>
	<p> 연락처 : <%= request.getParameter("phone1") %>-<%= request.getParameter("phone2") %>
	-<%= request.getParameter("phone3") %>
	<p> 이메일 : <%= request.getParameter("email") %>
</body>
</html>​


값이 올바르게 전달되고 조건에 맞지 않으면 경고 창이 표시됩니다.

검증 시 JavaScript를 사용하는 이유는 서버에서 직접 검증할 필요 없이 웹에서 직접 검증해야 하기 때문에 JavaScript를 사용합니다.

검증의 다양한 조건을 사용하여 입력 제한이 되도록 했습니다.

검증 과정은 많이 쓰일 것 같으니 제대로 끓여 두어야 합니다!

많은 사람들의 의견은 항상 환영합니다!
많은 코멘트를 부탁드립니다~~