정규표현식(암기법 : 정규 표현식 썻어? 이긍..)
- 특정한 규칙을 가진 문자열의 집합을 표현하는데 사용하는 형식 언어
- 문자열의 특정 형태를 찾아내기 위해 일정한 형식의 패턴으로 표현
- 예) 주민등록번호, 전화번호, 이메일
- var 변수명 = /정규 표현식/[Flag]
- var 변수명 = new RegExp('정규 표현식',[Flag]);
- Flag란?
i : ignore Case(문자열의 대문자와 소문자를 구별하지 않고 검출)
g : Global(문자열 내의 모든 패턴을 검출)
m : Multi Line(문자열에 줄 바꿈 행이 있는지 검출) - [Flag]는 생략 가능. 만약 생략했다면.. 한 번만 검출함
- 정규 표현식 메소드
test() : 문자열이 정규 표현식에 부합한지 판단(true/false 반환)
exec() : 문자열에서 정규 표현식에 부합된 문자열을 추출하여 반환 - 정규 표현식에서 사용하는 기호(메타 문자) - 특정한 의미를 가진 문자
^x : 문자열이 x로 시작
x$ : 문자열이 x로 종료
.x : (임의의 한 문자) 문자열이 x로 끝남
x+ : x가 한 번 이상 반복
x? : x가 없다
x* : x가 0번 이상 반복
x|y : (or)x 또는 y를 찾음
(x) : ()안의 내용을 그룹화
(x)(y) : 그룹화. 자동 그룹번호 부여 -> 배열
x{n} : x를 n번 반복한 문자를 찾음
x{n,} : x를 n번 이상 반복한 문자를 찾음
x{n,m} : x를 n번 이상 m번 이하 반복한 문자를 찾음
[xy] : x 또는 y를 찾음
[^xy] : x,y를 제외하고 문자 하나를 찾음
[x-z] : x부터 z 사이의 문자 중 하나를 찾음
꿀팁. 자주 사용되는 패턴 정리
숫자만 : ^[0-9]$
영문자만 : ^[a-zA-Z]
이메일 : /^0-9a-zA-Z?[0-9a-zA-Z]@0-9a-zA-Z?[0-9a-zA-Z].[a-zA-Z]{2,3}
전화번호 : ^\d{2.3}-\d{3,4}-d{4}$ : 숫자가 2개또는 3개 반복{}
주민번호 : \d{6}-[1-4]\d{6} : 1-4중에 하나[]
ip주소 : ([0-9]{1-3}).([0-9]{1.3}).([0-9]{1.3}).([0-9]{1.3})
URL : ^(file|gopher|news|nntp|telnet|https?|ftps?|sftp):\/\/([a-z0-9-]+.)+[a-z0-9]{2,4}.*
http://regexlib.com -> 정규식 관련 정보 사이트
유효성 검사란?
- 폼 페이지에서 입력한 데이터 값이 서버로 전송되기 전에 특정 규칙에 맞게 입력되었는지 검증하는 것
- 종류 : 예시) 나이 입력 시 숫자 체킹, 회원 가입 시 아이디 중복 체크, 로그인 인증 시 아이디와 비밀번호를 체킹 등
유효성 검사의 종류
- 기본 유효성 검사 : 값의 존재 유무
- 데이터 형식의 유효성 검사 : 패턴에 적합한지 여부(정규 표현식 사용)
<%@ 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>
<script type="text/javascript">
function checkLogin(){
var form = document.loginForm;
if(form.id.value.length<4 || form.id.value.length>12){
alert("아이디는 4~12자 이내로 입력 가능")
form.id.select();
return;
}
if(form.passwd.value.length<4){
alert("비밀번호는 4자 이상으로 입력해야 합니다")
form.passwd.select();
return;
}
//이름을 이상하게 입력했을때 isNaN(): 그거 숫자로 입력했어?
//1234abc => 1
if(!isNaN(form.name.value.substr(0,1))){//
alert("숫자로 시작할 수 없습니다.")
form.name.select();
}
//아이디 영문소문자 체킹 form.id.value : tesTer
//t[0]e[1]s[2]T[3]e[4]r[5]
for(i=0;i<form.id.value.length;i++){
var ch = form.id.value.charAt(i);
if((ch<'a' || ch>'z') && (ch>'A' || ch<'Z') && (ch>'0' || ch<'9')){
alert("아이디는 영문 소문자만 입력 가능합니다!")
form.id.select();
return;
}//end if
}//end for
//나이에 문자가 들어가면 안됨
if(!isNaN(form.age.value)){//문자일때! 즉 숫자가 아닐때
alert("나이는 숫자만 입력 가능합니다.");
form.age.focus();
return false;
}
form.submit();
}
</script>
</head>
<body>
<form name="loginForm" action="validation02_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>
<p>나이 : <input type="text" name="age" /></p>
<p><input type="button" value="전송" onclick="checkLogin()"></p>
</form>
</body>
</html>isNaN() : is Not a Number의 약자 => 숫자 false, 숫자가 아니면 true가 됨
정규표현식 조건 주기
<head>
<title>Validation</title>
<script type="text/javascript">
function checkMember(){
//id 체크 정규식 : 숫자, 영문만 입력 가능
var regExpId = /^[0-9a-z]+$/;
//비밀번호 : 숫자, 특문 각 1회 이상, 영문은 2개 이상 사용하여 8자리 이상 입력
var regExpPasswd = /(?=.*\d{1,50})(?=.*[~`!@#$%\^&*()-+=]{1,50})(?=.*[a-zA-Z]{2,50}).{8,50}$/;
//이름 : 한글 검사
var regExpName = /^[가-힣]+$/;
//전화번호 형식인지 검사
var regExpPhone = /^\d{2,3}-\d{3,4}-\d{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;form 태그에 있는 name값에 일치하는 value값을 변수에 넣기!
var id = form.id.value;
var passwd = form.passwd.value;
var name = form.name.value;
var phone = form.phone1.value + "-" + form.phone2.value
+ "-" + form.phone3.value;
var email = form.email.value;정규표현식.test(변수): 위에 넣은 변수가 조건을 준 변수와 일치하지 않으면 alert 띄우기
if(!regExpId.test(id)){
alert("아이디는 숫자, 영문만 입력 가능합니다.")
form.id.select();
return;
}
if(!regExpPasswd.test(passwd)){
alert("숫자, 특문 각 1회 이상, 영문은 2개 이상 사용하여 8자리 이상 입력 가능합니다");
form.passwd.select();
return;
}
if(!regExpName.test(name)){
alert("이름은 한글만 입력해주세요"); //데이비드 베컴
form.name.select();
return;
}
if(!regExpPhone.test(phone)){
alert("연락처 형식에 맞춰주세요");
form.phone2.select();
return;
}
if(!regExpEmail.test(email)){
alert("이메일 형식에 맞춰주세요");
form.email.select();
return;
}
//모두 테스트 통과 시 submit 처리
form.submit();
</script>
</head>
<body>form 태그 안에 input type형식과 조건을 줌
<body>
<h3>회원 가입</h3>
<form name="Member" method="post" action="validation05_process.jsp">
<p>아이디 : <input type="text" name="id" /></p>
<p>비밀번호 : <input type="text" name="passwd" /></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>
<p>이메일 : <input type="text" name="email" /></p>
<p><input type="button" value="가입하기" onclick="checkMember()" /></p>
</form>
</body>
신입 개발자 입니다!!!