자바스크립트 - 정규식 활용 예제

안녕하세요

이번 시간에는 자바스크립트에서 정규식을 활용하는 간단한 예제를 올려봅니다.

정규식은 문자열에서 문자 조합에 일치 시키기 위하여 사용되는 패턴으로

대표적인 규칙은 아래와 같습니다.

- 정규식 -

============================================

/ 규칙 / : 정규식의 규칙을 쓸 때는 제일 문장 앞과 뒤에 '/'으로 감쌉니다.

^ : 시작을 의미

$ : 끝을 의미

[] : 범위

+ : 1개 이상 나타난다는 것을 의미

[^abc] : a,b,c를 제외한다는 의미

a-z: 알파벳 소문자

A-Z: 알파벳 대문자

0-9: 숫자

[!,_,@] 기호를 허용한다

? : 0이거나 1개

* : 0개 이상 반복된다는 의미

\b : 단어의 경계를 나타내며, 해당 패턴이 정확히 일치해야 함을 의미한다.

\d{4}: 숫자 4개가 와야 한단 의미

\d{1,2}: 숫자가 1개 또는 2개 올 수 있단 의미

[-\/]: -이 오거나 /가 올 수 있단 의미

정규식을 이용해서 제가 구현한 결과 화면은 아래와 같습니다.

사실 앞선 예제와 비슷하긴 하지만

이번 예제는 정규식을 이용한겁니다.

============================================

제가 쓴 규칙들은 위와 같고, 다른 규칙들이 사실 더 있습니다.

그런 규칙들은 정규식을 검색해서 보시면 됩니다.

자 어쨋든 그럼 시작하죠

// 아이디 체크
// RegExp객체를 사용하여 패턴 생성
var isUserid=function(){
	var pattern=new RegExp(/^[a-zA-Z0-9!@/]+$);
	var bool=pattern.test(obj.value);
	//val이 정규식 패턴에 맞으면 true를 반환하고 틀리면 false를 반환한다.
	return bool;
}
// 전화번호 체크
var isTel=function(obj){
	//0-9 뒤에 있는 -,+는 각각의 기호를 의미
	var pattern=new RegExp(/^[0-9-+]+$/);
	var val=obj.value;
	var bool=pattern.test(val);
	return bool;
}
// 이메일 체크
var isEmail=function(obj){
	var pattern=new RegExp(/^[\w-]+(\.[\w-]+)*@([\w-]+\.[a-zA-Z]+$/);
	/*^[\w-] : 알파벳문자, 숫자, 하이픈(-)이 처음에 올 수 있단 의미
			  (\.[\w-]+)* : 마침표(.)와 그 다음에 하나 이상의 알파벳 문자,숫자,- 이 0번 이상 나올 수 있단 의미(*)
			  @ : 해당 위치에 @가 와야한단 의미
			  ([\w-]+\.)+ : 알파벳, 숫자, -이 한번 이상 나오고 그 다음 마침표(.)가 나온다는 의미
			  그리고 이 조합이 한번 이상 나올 수 있단 의미
			  [a-zA-Z]+$ : 알파벳 대문자, 소문자 상관없이 문자로 끝나야 함을 의미 
			*/
	var bool=pattern.test(obj.value);
	return bool;
}
// 날짜체크
var isDate=function(obj){
	/*생년월일 날짜 유형 체크
		[2016-02-15] [2016/02/15]
		\b : 단어의 경계를 나타내며, 해당 패턴이 정확히 일치해야 함을 의미한다.
		\d{4}: 숫자 4개가 와야 한단 의미
		\d{1,2}: 숫자가 1개 또는 2개 올 수 있단 의미
		[-\/]: -이 오거나 /가 올 수 있단 의미
		*/
	var pattern=new RegExp(/\b\d{4}[-\/]d{1,2}[-\/]\d{1,2}\b/);
	var bool=pattern.test(obj.value);
	return bool;
}
var check=function(){
	if(!isUserid(frm.uid)){
		alert("아이디는 영문자,숫자,!,_,@여야 해요");
		frm.uid.select();
		return;
	}
	if(!isTel(frm.tel)){
		alert("연락처가 숫자가 아니에요");
		frm.tel.focus();
		return;
	}
	if(!isEmail(frm.email)){
		alert("이메일 형식이 맞지 않아요");
		frm.email.select();
		return;
	}
	if(!isDate(frm.birth)){
		alert("날짜형식이 맞지 않아요");
		frm.birth.select();
		return;
	}
	frm.submit();
}