유효성 검사 & 정규 표현식

유효성 검사

데이터의 적절성을 확인하는 과정

정규 표현식

문자열의 특정 형태를 찾아내기 위한 패턴 표현식

let 변수명 = /정규 표현식/[Flag]
JavaScript
복사

let 변수명 = new RegExp('정규 표현식' , ['Flag'] )
JavaScript
복사

flag

•

i     : ignore  case : 대문자 소문자를 구분없이 검출

•

g   : global :  문자열의 내의 모든 패턴 검출

•

m :  multi : 문자열의 줄바꿈이 있는지 까지도 검출

구문	설명	예제
문자	일반 문자는 자체로 매치됩니다.	abc는 "abc"와 매치
.	어떤 문자 하나와 매치됩니다.	a.c는 "abc"와 매치
\d	숫자(digit)와 매치됩니다.	\d+는 "123"와 매치
\D	숫자가 아닌 문자와 매치됩니다.	\D+는 "abc"와 매치
\w	문자(word character)와 매치됩니다.	\w+는 "hello"와 매치
\W	문자가 아닌 문자와 매치됩니다.	\W+는 "123!"와 매치
\s	공백 문자와 매치됩니다.	\s+는 " \t\n"와 매치
\S	공백이 아닌 문자와 매치됩니다.	\S+는 "abc123"와 매치
^	문자열의 시작과 매치됩니다.	^abc는 "abcdef"와 매치하지 않음
$	문자열의 끝과 매치됩니다.	xyz$는 "xyz123"와 매치하지 않음
[abc]	대괄호 안의 어떤 문자(a, b, c)와 매치됩니다.	[aeiou]는 "apple"에서 "a"와 매치
[^abc]	대괄호 안의 어떤 문자(a, b, c)를 제외한 문자와 매치됩니다.	[^aeiou]는 "apple"에서 "p", "l" 등과 매치
[a-z]	a부터 z까지 범위의 문자와 매치됩니다.	[a-z]+는 "hello"에서 "hello"와 매치
(x)	그룹을 나타내며, x를 매치합니다.	(abc)+는 "abcabc"와 매치
x\|y	x 또는 y 매치합니다	x\|y 는 “x” 또는 “y” 와 매치
x?	x가 0 또는 1회 나타날 때 매치합니다.	ab?c는 "abc"와 "ac"와 매치
x*	x가 0회 이상 나타날 때 매치합니다.	ab*c는 "ac", "abc", "abbc" 등과 매치
x+	x가 1회 이상 나타날 때 매치합니다.	ab+c는 "abc", "abbc" 등과 매치
x{m}	x가 정확히 m회 나타날 때 매치합니다.	a{2}는 "aa"와 매치
x{m, n}	x가 최소 m회에서 최대 n회까지 나타날 때 매치합니다.	a{1,3}는 "a", "aa", "aaa"와 매치
x{m,}	x가 최소 m회 이상 나타날 때 매치합니다.	a{2,}는 "aa", "aaa" 등과 매치
x	y	x 또는 y와 매치됩니다.

정규표현식 메소드

•

test( )    : 문자열이 지정한 정규표현식에 부합한지 여부 반환 (true/false)

•

exec( )  : 문자열이 지정한 정규표현식에 부합한 문자열을 추출하여 반환

아이디 검사

•

영어, 한글, 숫자만 부합

/^[a-zA-Z0-9ㄱ-ㅎㅏ-ㅣ가-힣]+$/
JavaScript
복사

let regExpId = /^[a-zA-Z0-9ㄱ-ㅎㅏ-ㅣ가-힣]+$/
Java
복사

이름 검사

•

한글만 부합

JavaScript
복사

let regExpName = /^[가-힣]*$/
Java
복사

전화번호 검사

•

XXX-XXX-XXXX 또는 XXX-XXXX-XXXX 만 부합

/^\d{3}-\d{3,4}-\d{4}$/
JavaScript
복사

let regExpPhone = /^\d{3}-\d{3,4}-\d{4}$/
Java
복사

이메일 검사

•

(첫글자 영문자)(영어,숫자, _ - . )@(영어).(영어)

/^[0-9a-zA-Z]([-_\.]?[0-9a-zA-Z])*@[0-9a-zA-Z]([-_\.]?[0-9a-zA-Z])*\.[a-zA-Z]{2,3}$/i
JavaScript
복사

let regExpEmail = /^[0-9a-zA-Z]([-_\.]?[0-9a-zA-Z])*@[0-9a-zA-Z]([-_\.]?[0-9a-zA-Z])*\.[a-zA-Z]{2,3}$/i
Java
복사

비밀번호 검사

•

영어, 숫자 포함 8글자 이상 (특수문자 허용)

/^(?=.*[A-Za-z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,}$/
JavaScript
복사

let passwordPattern = /^(?=.*[A-Za-z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,}$/;
JavaScript
복사

•

?=     :  현재 위치에서 괄호 안의 패턴이 앞쪽에 있는지 확인

•

a(?=b) :   ab  ,  ac ,  acb 

패턴	설명
(?=.*[A-Za-z])	영문자 중 적어도 하나 이상 존재 (. 한글자 , * 0~, )
(?=.*\d)	적어도 숫자 하나 이상 존재
(?=.[@$!%?&])	적어도 “@$!%*?&” 특수 기호 중 하나 이상 존재
[A-Za-z\d@$!%*?&]	영문, 숫자, 특수문자 구성
{8,}	8자 이상

예시코드

•

Java 라는 문자 대소문자 구분 없이 검사

•

아이디, 이름, 전화번호, 이메일 패턴 검사

•

로그인 유효성 검사

•

회원가입 유효성 검사

Java 라는 문자 대소문자 구분 없이 검사

•

regexp01.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>정규표현식</title>
</head>
<body>
	<h1>정규표현식</h1>
	<form name="form" onsubmit="return checkForm()">
		<p>제목 : <input type="text" name="title" /></p>
		<p><input type="submit" value="등록" /></p>
	</form>
	
	<script>
		function checkForm() {
			let regExp = /Java/i		// Java 라는 문자열을 대소문자 구분없이 검사
			let str = document.form.title.value
			let result = regExp.exec(str)
			
			// exec() 	: 정규 표현식에 부합한 문자열 반환
			// test()	: 정규 표현식에 부합한지 여부를 반환(true/false)
			if( regExp.test(str) ) {
				alert(result[0])
			}
			return false
		}
	</script>
</body>
</html>
HTML
복사

아이디, 이름, 전화번호, 이메일 패턴 검사

•

regexp02.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>정규표현식</title>
</head>
<body>
	<h1>정규표현식</h1>
	<form name="form" onsubmit="return checkForm()">
		<p>제목 : <input type="text" name="title" /> </p>
		
		<p>아이디 : <input type="text" name="id" /> </p>
		<p>이름 : <input type="text" name="name" /> </p>
		
		<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>
		
		<p><input type="submit" value="등록" /> </p>
	</form>
	<script>
	
		// 회원가입 정규 표현식으로 유효성 검사
		function checkForm() {
			
			// 아이디 패턴 : 영문자, 한글 시작
			let regExpId = /^[a-zA-Zㄱ-ㅎㅏ-ㅣ가-힣]+$/
			
			// 이름 패턴 : 한글
			let regExpName = /^[가-힣]*$/
			
			// 전화번호 패턴 : [3자리 숫자]-[3~4자리 숫자]-[4자리 숫자]
			let regExpPhone = /^\d{3}-\d{3,4}-\d{4}$/
			
			// 이메일 패턴 [숫자,영문자]@[숫자,영문자].~~.[영문자2~3자리]
			// OOO@OOOO.com
			// OOO@OOOO.co.kr
			// OOO@OOOO.ac.kr
			// OOO@OOOO.org
			let regExpEmail = /^[0-9a-zA-Z]([-_\.]?[0-9a-zA-Z])*@[0-9a-zA-Z]([-_\.]?[0-9a-zA-Z])*\.[a-zA-Z]{2,3}$/i
			
			// 분석 - /^[0-9a-zA-Z](-_\.)?[0-9a-zA-Z]*
			// /^[0-9a-zA-Z](-_\.)?[0-9a-zA-Z]*
			// ^[0-9a-zA-Z]		: 시작은 숫자 또는 영어
			// (-_\.)?			: 중간에 -, _, .  0 또는 1회 가능
			// [0-9a-zA-Z]*		: 그 후에는 숫자 또는 영어가 0 또는 1회이상
			
			// 전체 분석
			// (1) : /^[0-9a-zA-Z](-_\.)?[0-9a-zA-Z]*
			// (2) : @
			// (3) : [0-9a-zA-Z](-_\.)?[0-9a-zA-Z]*
			// (4) : .
			// (5) : [a-zA-Z]{2,3}$/i
					
			// 가능
			// joeun
			// joeun1004
			// joeun_1004
			// joeun-1004
			// 1004joeun
			// 1004-joeun
			// joeun.1004
			
			// 불가능
			// -joeun
			// _jouen
			
			let id = form.id.value
			let name = form.name.value
			let phone = form.phone1.value + "-" + form.phone2.value + "-" + form.phone3.value
			let email = form.email.value
			
			// test() : 부합O-true, 부합X-false
			if( !regExpId.test(id) ) {
				alert('아이디를 형식에 맞게 입력해주세요')
				return false
			}
			
			if( !regExpName.test(name) ) {
				alert('이름 형식에 맞게 입력해주세요')
				return false
			}
			
			if( !regExpPhone.test(phone) ) {
				alert('전화번호 형식에 맞게 입력해주세요')
				return false
			}
			
			if( !regExpEmail.test(email) ) {
				alert('이메일 형식에 맞게 입력해주세요')
				return false
			}
			
		}
	</script>
</body>
</html>
HTML
복사

로그인 유효성 검사

•

validation01.jsp

•

validation01_pro.jsp

•

validation01.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>아이디 비밀번호 유효성 검사</title>
</head>
<body>
	<h1>로그인</h1>
	<h3>유효성 검사</h3>
	<!--
		onsubmit="return 여부"
		- 여부 : true 이면, submit(요청전송)
		        false 이면, sumbmit 안 함 
	-->
	<form name="loginForm" onsubmit="return checkLogin()" action="validation01_pro.jsp" method="post">
		<p>아이디 : <input type="text" name="id" maxlength="20" /></p>
		<p>비밀번호 : <input type="password" name="pw" /></p>
		<p><input type="submit" value="로그인"></p>
	</form>
	
	<script>
		// 로그인 유효성 검사
		function checkLogin() {
			// alert("로그인 요청")
			let form = document.loginForm	// name이 loginForm 인 폼 요소를 가져옴
			
			let id = form.id.value
			let pw = form.pw.value
			
			// alert(id)
			// alert(pw)
			
			// 1. 아이디는 필수값, 6~20자 이내
			// 아이디 입력여부 검증
			if( id == "" ) {
				alert('아이디를 입력해주세요')
				form.id.focus()			// id input 태그에 포커스
				return false
			}
			
			// 아이디 글자 수 검증
			if( id.length < 6 || id.length > 20 ) {
				alert('아이디는 6~20자 이내로 입력 가능합니다.')
				form.id.select()		// id 입력 값을 선택
				return false
			}
			// 2. 비밀번호는 필수값, 6자 이상
			// 비밀번호 입력여부 검증
			if( pw == "" ) {
				alert('비밀번호를 입력해주세요')
				form.pw.focus()			// pw input 태그에 포커스
				return false
			}
			
			// 비밀번호 글자 수 검증
			if( pw.length < 6 ) {
				alert('비밀번호는 6자 이상으로 입력해야합니다.')
				form.id.select()		// pw 입력 값을 선택
				return false
			}
			
			return true
		}
	</script>
</body>
</html>
HTML
복사

•

validation01_pro.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>유효성 검사</title>
</head>
<body>
	<h3>로그인에 성공했습니다.</h3>
	<%
		request.setCharacterEncoding("UTF-8");
		String id = request.getParameter("id");
		String pw = request.getParameter("pw");
		
	%>
	<p>아이디  : <%= id %> </p> 
	<p>비밀번호 : <%= pw %> </p> 
</body>
</html>






HTML
복사

회원가입 유효성 검사

•

validation02.jsp

•

validation02_pro.jsp

•

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>
</head>
<body>
	<h1>회원가입</h1>
	<h3>유효성 검사</h3>
	
	<form name="joinForm" onsubmit="return checkJoin()" action="validation02_pro.jsp" method="post">
		<p>아이디 : <input type="text" name="id" maxlength="20" /></p>
		<p>비밀번호 : <input type="password" name="pw" /></p>
		<p>이름 : <input type="text" name="name" /></p>
		<p>나이 : <input type="text" name="age" onkeyup="checkNumber()" /></p>
		<p><input type="submit" value="회원가입"></p>
	</form>
	
	<script>
	
		// 회원가입 유효성 검사
		function checkJoin() {
			let form = document.joinForm	// name이 joinForm 인 폼 요소를 가져옴
			
			let id = form.id.value
			let pw = form.pw.value
			
			// alert(id)
			// alert(pw)
			
			// 1. 아이디는 필수값, 6~20자 이내
			// 아이디 입력여부 검증
			if( id == "" ) {
				alert('아이디를 입력해주세요')
				form.id.focus()			// id input 태그에 포커스
				return false
			}
			
			// 아이디 글자 수 검증
			if( id.length < 6 || id.length > 20 ) {
				alert('아이디는 6~20자 이내로 입력 가능합니다.')
				form.id.select()		// id 입력 값을 선택
				return false
			}
			// 2. 비밀번호는 필수값, 6자 이상
			// 비밀번호 입력여부 검증
			if( pw == "" ) {
				alert('비밀번호를 입력해주세요')
				form.pw.focus()			// id input 태그에 포커스
				return false
			}
			
			// 비밀번호 글자 수 검증
			if( pw.length < 6 ) {
				alert('비밀번호는 6자 이상으로 입력해야합니다.')
				form.id.select()		// id 입력 값을 선택
				return false
			}
			
			
			// 3. 이름은 필수값, 첫글자는 숫자로 사용 불가
			let name = form.name.value
			
			if( name == "" ) {
				alert('이름을 입력해주세요')
				form.name.focus()
				return false
			}
			
			// isNaN() : 숫자가 아니면 true
			if( !isNaN( name.substr(0, 1) ) ) {
				alert('이름은 숫자로 시작할 수 없습니다.')
				form.name.select()
				return false
			}

			return true
		}
		
		// 나이 유효성 검사
		function checkNumber() {
			let form = document.joinForm
			
			console.log( event.keyCode )
			
			// 숫자가 아닌 경우
			if( !(event.keyCode >= 48 && event.keyCode <= 57 ) ) {
				alert('숫자만 입력 가능합니다.')
				event.returnValue = false
				form.age.value = ''
 			}	
		}
	</script>
</body>
</html>
HTML
복사

•

validation02_pro.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>유효성 검사</title>
</head>
<body>
	<h3>회원가입에 성공했습니다.</h3>
	<%
		request.setCharacterEncoding("UTF-8");
		String id = request.getParameter("id");
		String pw = request.getParameter("pw");
		String name = request.getParameter("name");
		String age = request.getParameter("age");
		
	%>
	<p>아이디  : <%= id %> </p> 
	<p>비밀번호 : <%= pw %> </p> 
	<p>이름 : <%= name %> </p> 
	<p>나이 : <%= age %> </p> 
</body>
</html>
HTML
복사