romworld

JSP 15 - 정규표현식 (REGULAR EXPRESSION) 본문

WEB/JSP

JSP 15 - 정규표현식 (REGULAR EXPRESSION)

inderrom 2023. 1. 9. 12:49

1. Flag : /정규 표현식/ 끝에 사용하며 생략 가능

 

i(Ignore Case) 대소문자 구별 없다
m(Multi Line) 줄바꿈이 있는지 검출
g(Global) 모든 패턴 검출

 

2. 메소드

test() - 정규표현식.test(대상문자열)
- true/false 리턴
exec() - 정규표현식.exec(대상문자열)
- 패턴에 맞는 문자열 추출.(select)

 

 

ex) form태그에 onclick="checkForm()"이벤트르 주고 exec() 알아보기

<script type="text/javascript">
	function checkForm(){
		//정규식(Regular Expression)
		//정규식은 슬러시로 시작하여 슬러시로 끝남
		//i : 대/소문자 무시
		//주어진 문자열에서  java를 검색(exec())
		let regExp = /Java/i;
		//제목의 데이터를 가져옴
		let str = document.frm.title.value;
		let result = regExp.exec(str);
		
		console.log("result : " + result);
		
		document.form.submit();
	}
</script>

3.표현 방법

^ 시작
$ 끝
. 1 개
* 0개 이상
+ 1개 이상
? 존재하거나 존재하지 않을 때
x 문자열
[xy] x또는 y를 찾음
x{n} x를 n번 반복
x{n.} x를 n번 이상 반복
x{n,m} x를 n이상 m번이하 반복
x|y x 또는 y (or)
[x-z] x-z까지 문자를 찾는 것
\d 숫자를 찾는다
   

 

 

test() 메소드, let regExp = /^[a-z|A-Z|ㄱ-ㅎ|ㅏ-ㅣ|가-힣]/;

<%@ page language="java" contentType="text/html; charset=UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
<script src="/js/jquery-3.6.3.min.js"></script>
<title>Validation</title>
<script>
function checkForm(){
	// J/s
	let str = document.frm.name.value;
	console.log("str : " + str);
	// 정규식 (이름은 숫자로 시작할 수 없습니다.)
	// |(shift + 역슬래시) : or(또는)
	let regExp = /^[a-z|A-Z|ㄱ-ㅎ|ㅏ-ㅣ|가-힣]/; //첫글자가 문자니?
	// 정규식.test( 대상문자열) => true/false
	if(!regExp.test(str)){ // 첫 글자가 문자가 아니면..
		alert("이름은 숫자로 시작할 수 없습니다.")
		return; // 함수 종료
	}		

}
</script>
<script type="text/javascript">
	// JQuery
	$(function(){
		$('#btnJquery').on('click', function(){
			let str = $("input[name='name']").val();
			console.log("str : " + str);
		});
	});
</script>
</head>
<body>
	<!-- action이 생략되었다면?
	action="현재jsp"
	method="get" -->
	<form name="frm">
		<p>이름 : <input type="text" name="name" /></p>
		<p>
			<input type="button" id="btn" value="전송" onclick="checkForm()" />
			<input type="button" id="btnJquery" value="전송2"  />
		</p>
	</form>
</body>
</html>

4. 자주 사용되는 패턴

 

아이디,비밀번호,이름,연락처,이메일 검사

 

<validation07.jsp>

<%@ page language="java" contentType="text/html; charset=UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="/js/jquery-3.6.3.min.js"></script>
<title>Validation</title>
<script type="text/javascript">
	function checkMember(){
		//정규표현식
		let regExpId = /^[a-z|A-Z|ㄱ-ㅎ|ㅏ-ㅣ|가-힣]/;	//아이디는 문자로 시작해주세요
		let reExpPasswd = /^[0-9]*$/;	//비밀번호는 숫자만 입력해주세요.  +:1이상, *:0이상
		let regExpName = /^[가-힣]*$/; //이름은 한글만 입력해주세요. +:1이상, *:0이상
		let regExpPhone = /^\d{3}-\d{3,4}-\d{4}$/;	//연락처 형식을 확인해주세요. 010-123-1234, 010-1234-1234
		let regExpEmail = /^[0-9a-zA-Z]([-_\.]?[0-9a-zA-Z])*@[0-9a-zA-Z]([-_\.]?[0-9a-zA-Z])*\.[a-zA-Z]{2,3}$/i;	//이메일 형식을 확인해주세요. i:대소문자 구별안함
			//test-com@aa.co.kr
		
		// J/S
		let form = document.Member;
		let id = form.id.value;
		let passwd = form.passwd.value;
		let name = form.name.value;
		let phone = form.phone1.value + "-" 
				  +  form.phone2.value + "-"
				  +  form.phone3.value;
		let email = form.email.value;
		console.log("id : " + id 
				+ ", passwd : " + passwd
				+ ", name : " + name
				+ ", phone : " + phone
				+ ", email : " + email);
	
		//정규식.test(대상문자열)
		//1) 아이디는 문자로 시작해주세요
		if(!regExpId.test(id)){
			alert("아이디는 문자로 시작해주세요");
			form.id.select();
			return;//함수 종료
		}
		//2) 이름은 한글만 입력해주세요
		if(!regExpName.test(name)){
			alert("이름은 한글만 입력해주세요");
			form.name.select();
			return;
		}
		//3) 비밀번호는 숫자만 입력해주세요
		if(!reExpPasswd.test(passwd)){
			alert("비밀번호는 숫자만 입력해주세요");
			form.passwd.select();
			return;
		}
		//4) 연락처 형식을 확인해주세요
		if(!regExpPhone.test(phone)){
			alert("연락처 형식을 확인해주세요");
			return;
		}
		//5) 이메일 형식을 확인해주세요
		if(!regExpEmail.test(email)){
			alert("이메일 형식을 확인해주세요");
			form.email.select();
			return;
		}
		
		//if를 모두 통과했다면..
		form.submit();
	}
</script>
<script type="text/javascript">
	$(function(){
		$(".btn-primary").on("click",function(){
			//JQuery
			//정규표현식
			let regExpId = /^[a-z|A-Z|ㄱ-ㅎ|ㅏ-ㅣ|가-힣]/;	//아이디는 문자로 시작해주세요
			let reExpPasswd = /^[0-9]*$/;	//비밀번호는 숫자만 입력해주세요.  +:1이상, *:0이상
			let regExpName = /^[가-힣]*$/; //이름은 한글만 입력해주세요. +:1이상, *:0이상
			let regExpPhone = /^\d{3}-\d{3,4}-\d{4}$/;	//연락처 형식을 확인해주세요. 010-123-1234, 010-1234-1234
			let regExpEmail = /^[0-9a-zA-Z]([-_\.]?[0-9a-zA-Z])*@[0-9a-zA-Z]([-_\.]?[0-9a-zA-Z])*\.[a-zA-Z]{2,3}$/i;	//이메일 형식을 확인해주세요. i:대소문자 구별안함
				//test-com@aa.co.kr
			
			// J/S
			let id = $("input[name='id']").val();
			let passwd = $("input[name='passwd']").val();
			let name = $("input[name='name']").val();
			//<select 요소에서 선택된 요소를 :selected
			//ch09_38.jsp 참고
			let phone = $("select").val() + "-" 
					  +  $("input[name='phone2']").val() + "-"
					  +  $("input[name='phone3']").val();
			let email = $("input[name='email']").val();
			console.log("id : " + id 
					+ ", passwd : " + passwd
					+ ", name : " + name
					+ ", phone : " + phone
					+ ", email : " + email);
		
			//정규식.test(대상문자열)
			//1) 아이디는 문자로 시작해주세요
			if(!regExpId.test(id)){
				alert("아이디는 문자로 시작해주세요");
				$("input[name='id']").focus();
				return;//함수 종료
			}
			//2) 이름은 한글만 입력해주세요
			if(!regExpName.test(name)){
				alert("이름은 한글만 입력해주세요");
				$("input[name='name']").focus();
				return;
			}
			//3) 비밀번호는 숫자만 입력해주세요
			if(!reExpPasswd.test(passwd)){
				alert("비밀번호는 숫자만 입력해주세요");
				$("input[name='passwd']").focus();
				return;
			}
			//4) 연락처 형식을 확인해주세요
			if(!regExpPhone.test(phone)){
				alert("연락처 형식을 확인해주세요");
				return;
			}
			//5) 이메일 형식을 확인해주세요
			if(!regExpEmail.test(email)){
				alert("이메일 형식을 확인해주세요");
				$("input[name='email']").focus();
				return;
			}
			
			//if문을 모두 통과했다면..
			$("form").submit();
		});
		//연락처의 첫번째 번호가 바뀌면 이벤트 처리
		$("select").on("change",function(){
			$(":selected").css("background-color", "blue");	
			console.log($(":selected").val());
		});
	});
</script>
</head>
<body>
	<h3>회원 가입</h3>
	<!-- 폼페이지 -->
	<form action="validation07_process.jsp" name="Member" method="post">
		<!-- 폼데이터 -->
		<p>아이디 : <input type="text" name="id" /></p>
		<p>비밀번호 : <input type="password" name="passwd" /></p>
		<p>이름 : <input type="text" name="name" /></p>
		<p>연락처 : 
			<select name="phone1" id="sel1">
				<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>
		<p>이메일 : <input type="text" name="email" /></p>
		<p><input type="button" value="가입하기" onclick="checkMember()" /></p>
		<p><input type="button" value="가입하기2" class="btn btn-primary" /></p>
	</form>
</body>
</html>

 

출력 <validation07_process> 

<%@ page language="java" contentType="text/html; charset=UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
<title>Validation</title>
</head>
<body>
<% //스크립틀릿
request.setCharacterEncoding("UTF-8");

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

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

JSP 17 - Properties File Editor (다국어 처리) ,JSTL fmt 활용  (0) 2023.01.11
JSP 16 - 쇼핑몰 사이트 만들기(5) [상품등록 - 정규식]  (0) 2023.01.10
JSP 15 - 유효성 검사 (Validation), 콜백함수,핸들러 함수, focus(),select()  (0) 2023.01.05
JSP 14 - 파일업로드  (0) 2023.01.04
JSP 13 - 쇼핑몰 사이트 만들기(4) [상품등록 (파일업로드)]  (0) 2023.01.03
'WEB/JSP' Related Articles more
Comments