[JSP 웹 프로그래밍] 유효성 검사 2 (데이터 형식 유효성 검사)

728x90

1. 데이터 형식 유효성 검사

▷ 사용자가 폼 페이지의 입력 항목에 입력한 데이터 값이 특정 형태에 적합한지 검사하기 위해 정규 표현식(regular expression)을 사용하는 방법

▷ 기본 유효성검사보다 복잡

◎ 아스키 코드
▷ 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>

값들이 제대로 전달되며 만약 조건에 맞지 않으면 경고창이 나타납니다.

유효성 검사를 할 때 자바스크립트를 사용하는 이유는 서버에서 직접 검증할 필요 없이 웹에서 바로 검증하면 되기 때문에 자바스크립트를 사용합니다.

유효성 검사의 여러 조건들을 사용해서 입력 제한이 되도록 만들었습니다.

검증과정은 많이 쓰일 것 같으니 제대로 익혀놔야겠어요!!

많은 분들의 피드백은 언제나 환영합니다! 많은 댓글 부탁드려요~~

728x90

'BackEnd > JSP' 카테고리의 다른 글

[JSP 웹 프로그래밍] 다국어 처리 2 (JSTL fmt 태그) (0)	2023.03.06
[JSP 웹 프로그래밍] 다국어 처리 1 (Locale Class) (0)	2023.03.05
[JSP 웹 프로그래밍] 유효성 검사 1 (validation) (0)	2023.03.03
[JSP 웹 프로그래밍] 파일 업로드 2 (Commons-FileUpload) (1)	2023.03.02
[JSP 웹 프로그래밍] 폼 태그 2 (textarea, 폼 데이터 처리) (0)	2023.03.02

☆보보의 티스토리(IT개발자)☆

[JSP 웹 프로그래밍] 유효성 검사 2 (데이터 형식 유효성 검사)

'BackEnd > JSP' 카테고리의 다른 글

티스토리툴바

[JSP 웹 프로그래밍] 유효성 검사 2 (데이터 형식 유효성 검사)

'BackEnd > JSP' 카테고리의 다른 글

'BackEnd/JSP' Related Articles

티스토리툴바