1. 정의

문자열에서 문자 조합에 일치시키기 위해 사용되는 패턴

정규식 또한 객체이다

특정 규칙을 가진 문자열의 집합을 표현하는데 사용되는 형식의 언어

(단점 : 가독성이 떨어져서 표현식을 숙지하지 않으면 이해가 힘들다)

 

* 정규 표현식은 정규 표현식의 메소드를 바로 사용하는 것보다 문자열 객체의 메소드와 함께 사용하는 것이 일반적임

 

주로 js 파일에 넣어서 form이 submit 되기 전 유효성을 검사하는 데에 사용된다

 

 

2. 메소드 종류

메소드 

 의미

 test()

 일치하는 문자열이 있을 시 true, 없을 시 false

 exec()

 일치하는 문자열을 리턴

 match()

 일치하는 부분을 리턴

 search()

 일치하는 부분의 위치를 리턴

 (index : 0부터 시작, 숫자로 리턴함)

 split()

 정규 표현식을 기준으로 문자열을 잘라 배열을 리턴

 (정규 표현식과 일치하는 부분만 뺌)

 replace()

 일치하는 부분을 새로운 문자열로 바꿈

 대체 문자 사용 가능

 (default : defined)

 

ㄱ. replace() 메소드 대체 문자

- $& : 일치

- '$ : 일치하는 앞 부분

- $' : 일치하는 뒷부분

- $1, $2 : 그룹

 

* replace 메소드 대체 문자 부분에서 callback 함수 호출 가능

 

 

3. 플래그 문자

문자

 의미

 g

 전역 비교 수행

 i

 대소문자 안 가리고 비교

 m

 여러 줄 검사 수행

 

 

4. 앵커 문자

 문자

  의미

 ^ABC

 맨 앞 문자가 ABC인 경우

 ABC&

 맨 뒤 문자가 ABC인 경우

 

 

5. 메타 문자

 문자

 의미

 .

 아무거나

 [a]

 괄호 안의 글자만

 [a^]

 괄호 안의 글자를 제외한

 [a-z]

 a에서 z까지

 [A-Z]

 A에서 Z까지

 [0-9]

 0에서 9까지

 \d

 숫자만

 \w

 아무 단어

 \s

 공백 문자

 \D

 숫자를 제외한

 \W

 아무 단어가 아닌

 \S

 공백이 아닌

 

 

6. 수량문자

문자 

 의미

 a+

 1개 이상

 a*

 0개 or 여러개(1개 제외)

 a?

 0개 or 1개(여러개 제외)

 a{5}

 a가 5개

 a{2, 5}

 a가 2~5개

 a{2,  }

 a가 2개 이상

 a{  , 2}

 a가 2개 이하

 

 

7. 선택문자

 문자

의미 

 {abc | def}

 abc or def 

 

 

8. 정규식 응용

정규식

의미

var regExp = /\s/g;

모든 공백 체크

var regExp = /^[0-9]+$/;

숫자만 체크

var regExp = /^[0-9a-zA-Z]([-_\.]?[0-9a-zA-Z])*@[0-9a-zA-Z]([-_\.]?[0-9a-zA-Z])*\.[a-zA-Z]{2,3}$/i; 

이메일 유효성 검사

var regExp = /^01([0|1|6|7|8|9]?)-?([0-9]{3,4})-?([0-9]{4})$/;

휴대폰번호 유효성 검사

var regExp = /^\d{2,3}-\d{3,4}-\d{4}$/;

전화번호 유효성 검사

var regExp = /^[a-z0-9_]{4,20}$/; 

아이디, 비밀번호 유효성 검사

 

 

9. 예제

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
function updateMemberSave() {
//    alert('####');
    
    var form = document.update_member_form;
    
//    alert('member_update_form : ' + member_update_form);
    
    if (!form.memberEmail.value) {
        alert("이메일을 입력하세요.");
        
        form.memberEmail.focus();
        
        return false;
    }
 
//    function validateSmartEmail 함수를 불러와서 유효성 검사를     
    if (validateSmartEmail(form.memberEmail.value) == false) {
        alert("이메일 형식이 맞지 않습니다. \n ex) abcde@gmail.com");
        
        form.memberEmail.focus();
        
        return false;
    }
    
    if (!form.memberTel.value) {
        alert("전화번호를 입력하세요.");
        
        form.memberTel.focus();
        
        return false;
    }
 
//    function validateSmartPhone 함수를 불러와서 유효성 검사를 함    
    if (validateSmartPhone(form.memberTel.value) == false) {
        alert("전화번호 형식이 맞지 않습니다. \n ex) 010-1234-5678");
        
        form.memberTel.focus();
        
        return false;
    }
}
 
//휴대폰번호 체크 정규식
function validateSmartPhone(phone) {
    
    var regExp = /^01([0|1|6|7|8|9]?)-?([0-9]{3,4})-?([0-9]{4})$/;
    
//    test() : 비교해서 문자열 있으면 true, 없으면 false
//             유효하면 true, 아니면 false
    return regExp.test(phone);
}
 
//이메일 체크 정규식
function validateSmartEmail(email) {
    
    var regExp =  /^([\w-]+(?:\.[\w-]+)*)@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$/i;
 
//    test() : 비교해서 문자열 있으면 true, 없으면 false
//             유효하면 true, 아니면 false
    return regExp.test(email);
}
 cs

 

회원을 추가할 때, form에서 휴대폰 번호와 이메일의 유효성을 검사하는 함수로 응용해봤다.

저작자표시 비영리 변경금지

'FrontEnd > JavaScript & jQuery' 카테고리의 다른 글

Jquery :: text() vs html() 차이  (0) 2016.10.03
JavaScript :: 배열 정렬하기(문자열 배열, 숫자 배열)  (0) 2016.10.03
JavaScript :: return vs return true vs return false 차이  (0) 2016.07.14
JavaScript :: 부모창 > 자식창(팝업창) > 부모창  (2) 2016.05.10
JavaScript :: text type 내 숫자만 입력 가능하게 하는 예제  (0) 2016.05.10
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>book_insert_form_ajax_button</title>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript" src="./js/bookmanage.js"></script>
<body>
<center>
 
<form method="post" name="insert_book_form" action="BookInsertPro" onsubmit="return insertBookSave()">
</form>
 
</center>
</body>
</html>
 cs

 

./js/bookmanage.js 경로의 파일을 받는 insert_book_form이 있다고 가정한다.

onsubmit 이벤트로 insertBookSave 함수를 호출했을 때를 비교한다.

 

 

1. return

1
2
3
4
5
6
7
8
9
10
11
12
13
function insertBookSave() {
    var insert_book_form = document.insert_book_form;
    
//    alert('bookCode value : ' + insert_book_form_bookCode.value);
 
    if (! insert_book_form_bookCode.value) {
        alert('도서 코드를 입력하세요.');
        
        insert_book_form.bookCode.focus();
        
        return;
    }
}
 cs

 

return 뒤에 어떠한 값으로 return하는지 정해주지 않았기 때문에 insert_book_form_value값이 들어가 있지 않을 경우 null로 return한다.

따라서 insert_book_form은 submit을 하지 못하고 null을 반환한다.

해당 return 아래를 전부 실행하지 않고 return 줄에서 클래스를 끝내버린다.

 

 

2. return true

1
2
3
4
5
6
7
8
9
10
11
function insertBookSave() {
    var insert_book_form = document.insert_book_form;
    
    if (! insert_book_form.bookCode.value) {
        alert('도서 코드를 입력하세요.');
        
        insert_book_form.bookCode.focus();
        
        return true;
    }
}
 cs

 

return값을 true로 정해줬다.

insert_book_form이 submit 하기 전에 insertBookSave 함수에서 유효성 검사를 하고 통과가 되면 true (=submit true)로 리턴한다는 뜻이다.

즉 bookCode.value 값이 들어가 있지 않아도 submit 한다.

 

 

3. return false

1
2
3
4
5
6
7
8
9
10
11
function insertBookSave() {
    var insert_book_form = document.insert_book_form;
    
    if (! insert_book_form.bookCode.value) {
        alert('도서 코드를 입력하세요.');
        
        insert_book_form.bookCode.focus();
        
        return false;
    }
}
 cs

 

return값을 false로 정해준다.

bookCode.value 값이 들어가 있지 않으면 submit을 fasle로 리턴한다는 뜻이다.

 

자바스크립트 함수를 쓰면서 return 값을 true나 false로 명확하게 주지 않고 return으로만 적었었는데,

input 값 관련 오류가 나서 어떤 이유인지 한참 찾아봤었다.

 

앞으로는 return 값을 true or false로 명확하게 해야겠다.

저작자표시 비영리 변경금지

'FrontEnd > JavaScript & jQuery' 카테고리의 다른 글

JavaScript :: 배열 정렬하기(문자열 배열, 숫자 배열)  (0) 2016.10.03
JavaScript :: 정규 표현식  (0) 2016.08.21
JavaScript :: 부모창 > 자식창(팝업창) > 부모창  (2) 2016.05.10
JavaScript :: text type 내 숫자만 입력 가능하게 하는 예제  (0) 2016.05.10
JavaScript :: getElementById() vs querySelector() 차이  (0) 2016.05.05

회원 가입을 받는 경우, 페이지 전체를 차지하는 큰 창이 아닌 조그마한 팝업 창을 띄워 받는 경우가 있다.

 

부모창(리스트)과 자식창(팝업창) 페이지 둘 다 자바스크립트를 걸어줘야 한다.

 

 

1. 부모창 페이지 소스

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<html>
    <head>
    <script type="text/javascript">
        function insertPopup() {
            // window.name = "부모창 이름";            
            window.name = "MemberServlet.do";
            
            // window.open("자식창 이름", "불러올 자식 창의 닉네임", "팝업창 옵션");
            window.open("memberInsert_form.html", "insert",
                    "width = 450, height = 320, resizable = no, scrollbars = no, status = no");
        }
    </script>
    </head>
    <body>
        // 회원가입에 링크를 걸어 팝업창을 띄운다.
        <a href="javascript:insertPopup();">[회원가입]</a><br>
    </body>
</html>
 cs

 

 

 

 

 부모창에서 회원가입 링크를 누르면 이렇게 회원가입 페이지가 팝업 창으로 뜬다.

 

 

2. 자식창 페이지 소스

 

회원가입 항목을 전부 입력한 뒤 확인 버튼을 누르면 창이 닫히면서 리스트에 회원 명단이 자동으로 추가되어야 한다.

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<html>
    <head>
    <script type="text/javascript">
        // 자동으로 팝업 창이 닫히게 하는 함수
        function popupClose(form) {
            // form의 target을 부모 창으로 설정함            
            form.target = opener.name;
            
            form.submit();
            
            if (opener != null) {
                opener.insert = null;
                
                self.close();
            }
        }
    </script>
    </head>
    <body>
    <form method="post" name="writeform" action="memberInsert_pro.jsp" target="MemberServlet.do">
        <input type="submit" value="확인" onclick="window.close()" >
        <input type="button" value="창 닫기" onclick="window.close()">
    </form>
    </body>
</html>
 cs

 

 

자바스크립트 함수에서 target을 부모 창으로 설정한 뒤 form에도 target으로 부모 창을 적어줘야 한다.

 

원래는 submit에 onclick을 설정하지 않아도 self.close();만으로 닫혀야 하는데,

 

창이 닫히지 않아서 onclick에 window.close();로 이벤트를 줬다.

저작자표시 비영리 변경금지

'FrontEnd > JavaScript & jQuery' 카테고리의 다른 글

JavaScript :: 정규 표현식  (0) 2016.08.21
JavaScript :: return vs return true vs return false 차이  (0) 2016.07.14
JavaScript :: text type 내 숫자만 입력 가능하게 하는 예제  (0) 2016.05.10
JavaScript :: getElementById() vs querySelector() 차이  (0) 2016.05.05
JavaScript :: onkeydown 이벤트 예제  (0) 2016.05.05

회원가입 창에서 주민등록번호를 입력하는 text type 부분에 문자가 아닌 숫자만 가능하게 하도록 하는 소스이다.

 

onkeyup과 onchange 이벤트를 이용하여 text 창에 숫자가 아닌 문자나 특수문자를 입력하면 그 즉시 자동으로 삭제된다.

 

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>주민등록번호 입력 예제</title>
<script type="text/javascript">
    function getTypeCheck(s, spc) {
        var i;
        
        for (i = 0; i < s.length; i++) {
            if (spc.indexOf(s.substring(i, i + 1)) < 0) {
                return false;
            }
        }
        
        return true;
    }
    
    function onlyNum(obj,n) {
        var re = /[^0-9]/gi;
        var NUM = "0123456789";
        var str_space = /\s/;
     
        if(n == undefined || n == null) {
            var n = "";
            var n2 = "";
        } 
        else {
            if(n == "") {
                var n = "";
                var n2 = "";
            } 
            else {
                var n = eval(n);
                var n2 = n;
            }
        }
     
        if(!getTypeCheck(obj.value, NUM)) {
            alert("숫자를 입력해주세요.");
            
            obj.value = obj.value.replace(re,"");
            obj.value = n2;
            
            obj.focus();
            
            return false;
        }
    }
</script>
</head>
<body>
    <h2>주민등록번호 입력 예제</h2>
    <input type="text" name="juminA" id="juminA" onkeyup="onlyNum(this, '');" onchange="onlyNum(this, '');" /> -
    <input type="text" name="juminB" id="juminB" onkeyup="onlyNum(this, '');" onchange="onlyNum(this, '');" />
</body>
</html>
 cs

 

 

 

alert 창이 뜨면서 onkeyup 이벤트를 걸어놓았기 때문에 공백으로 문자가 지워진다.

저작자표시 비영리 변경금지

'FrontEnd > JavaScript & jQuery' 카테고리의 다른 글

JavaScript :: return vs return true vs return false 차이  (0) 2016.07.14
JavaScript :: 부모창 > 자식창(팝업창) > 부모창  (2) 2016.05.10
JavaScript :: getElementById() vs querySelector() 차이  (0) 2016.05.05
JavaScript :: onkeydown 이벤트 예제  (0) 2016.05.05
jQuery :: datepicker  (0) 2016.04.28

-

저작자표시 비영리 변경금지

'FrontEnd > JavaScript & jQuery' 카테고리의 다른 글

JavaScript :: 부모창 > 자식창(팝업창) > 부모창  (2) 2016.05.10
JavaScript :: text type 내 숫자만 입력 가능하게 하는 예제  (0) 2016.05.10
JavaScript :: onkeydown 이벤트 예제  (0) 2016.05.05
jQuery :: datepicker  (0) 2016.04.28
JavaScript :: typeof  (0) 2016.03.15

검색 버튼을 누르면 키워드 검색을 하는 부분이다.

onkeydown을 이용하여 Enter키를 누름과 동시에 이벤트가 발생되도록 작성했다.

 

* onkeydown : 키를 누르는 즉시 발생하는 이벤트를 설계하는 용도이다.

 

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<html>
<head>
<script type="text/javascript">
    // 검색 기능
    function searchCheck(form) {
            
        if (form.keyword.value == "") {
            alert("검색할 단어를 입력하세요.");
 
            form.keyword.focus();
            
            return;
        }
 
        // form.action으로 url 주소를 추가하는 방식으로 더함
        form.action += "personServlet.do";
        form.action += "?keyfield=" + form.keyfield.value;
        form.action += "&compare=" + document.querySelector("input[name = 'compare']:checked").value;
        form.action += "&keyword=" + form.keyword.value;
 
        form.submit();
    }        
</script>
</head>
<body>
<table>
    <tr>
        <td>
            <form method="post" name="search">
            <!-- onkeydown 이벤트 : 키보드 키를 누르는 즉시 발생하는 이벤트. -->
            <!-- event.keyCode == 13 : Enter 키의 코드가 13번임. 즉 Enter키를 누르면 발생하는 이벤트 함수. -->
            <input type="text" name="keyword" value="${cri.keyword}" 
                onkeydown = "if (event.keyCode == 13)
                                document.getElementById('btnSearch').click()" />
            <!-- 검색 기능을 하는 searchCheck function으로 이동-->
            <input type="button" id="btnSearch" value="검색" onclick="searchCheck(form)" />
            </form>
        </td>
    </tr>
</table>
</body>
</html>
 cs
저작자표시 비영리 변경금지

'FrontEnd > JavaScript & jQuery' 카테고리의 다른 글

JavaScript :: text type 내 숫자만 입력 가능하게 하는 예제  (0) 2016.05.10
JavaScript :: getElementById() vs querySelector() 차이  (0) 2016.05.05
jQuery :: datepicker  (0) 2016.04.28
JavaScript :: typeof  (0) 2016.03.15
JavaScript :: 함수  (0) 2016.03.15

1. 정의

jQuery에서 제공하는 달력 형식의 UI 위젯 중 하나.

날짜를 다룰 때 UI 형식으로 쉽게 날짜를 선택하도록 도와줌.

 

 

2. 형식 소스

1) CDN 호스트를 사용하는 경우

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
        <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
        <script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
        <script type="text/javascript">
            $(function () {
                $("#datepicker").datepicker();
            });
        </script>
    </head>
    <body>
    <p>Date : <input type="text" id="datepicker"></p>
    </body>
</html>
 cs

 

링크 형식을 stylesheet로 설정하고, script 사이트 링크를 거는 CDN 호스트를 사용했다.

 

 

2) 직접 내려받아 사용하는 경우

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <link rel="stylesheet" href="./js/jquery-ui.css">
        <script src="./js/jquery-1.8.3.js"></script>
        <script src="./js/jquery-ui.js"></script>        
        <script type="text/javascript">
            $(function () {
                $("#datepicker").datepicker();
            });
        </script>
    </head>
    <body>
    <p>Date : <input type="text" id="datepicker"></p>
    </body>
</html>
 cs

 

프로젝트 내 js 폴더에 직접 다운받아 import 해줬다.

 

 기본 테마 디자인이다.

기호에 따라 테마를 다운받아 변경할 수도 있고, 달력의 속성을 변경할 수도 있다.

 

 

3. 테마 변경

http://jqueryui.com/themeroller/ 사이트 접속 > Gallery > 원하는 테마 Download 하여 경로 안에 -ui.js, -ui.css 파일을 덮어쓰기 한다.

 

 

적용된 테마 디자인 화면이다.

 

 

4. datepicker 속성 변경

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<html>
<head>
<script type="text/javascript" src="./js/script.js"></script>
<link rel="stylesheet" href="./js/jquery-ui.css">
<script src="./js/jquery-1.8.3.js"></script>
<script src="./js/jquery-ui.js"></script>
<script type="text/javascript">
    $(function() {
        $("#datepicker").datepicker({
            dateFormat : "yy-mm-dd",
            monthNamesShort : ['1월', '2월', '3월', '4월', '5월', '6월', '7월', '8월', '9월', '10월', '11월', '12월'],
            dayNamesMin : ['일', '월', '화', '수', '목', '금', '토'],
            changeMonth : true,
            changeYear : true,
            yearRange : "c-70:c+70",
            showMonthAfterYear : true
        });
    });
</script>
</head>
<body>
 cs

 

함수 안에 여러 옵션을 설정해주면 datepicker의 속성이 변경된다.

 

 

5. datepicker가 요청되는 순서

ㄱ. datepicker를 요청

ㄴ. id가 datepicker인 요소를 받음

ㄷ. return 후

ㄹ. 화면으로 출력

저작자표시 비영리 변경금지

'FrontEnd > JavaScript & jQuery' 카테고리의 다른 글

JavaScript :: getElementById() vs querySelector() 차이  (0) 2016.05.05
JavaScript :: onkeydown 이벤트 예제  (0) 2016.05.05
JavaScript :: typeof  (0) 2016.03.15
JavaScript :: 함수  (0) 2016.03.15
JavaScript :: window.location  (0) 2016.03.14

1. 정의

형식의 정보를 자료형로 반환

자료형 검사를 할 때나 자료형을 확인할 때 주로 사용

Number, String, Boolean, Object, Function, Undefined의 6가지 형식 중 하나로 반환한다

 

 

 

저작자표시 비영리 변경금지

'FrontEnd > JavaScript & jQuery' 카테고리의 다른 글

JavaScript :: onkeydown 이벤트 예제  (0) 2016.05.05
jQuery :: datepicker  (0) 2016.04.28
JavaScript :: 함수  (0) 2016.03.15
JavaScript :: window.location  (0) 2016.03.14
JavaScript :: getParameterName() - get 방식 파라미터 value 리턴  (0) 2016.03.14

1. 생성

 

 

 

다음과 같은 세 가지 방법으로 함수를 선언할 수 있다.

 

 

 function aaa(str) {
   document.write(str);
  }

 var bbb = function(str) {
   document.write(str);
  }

 var ccc = new Function('str', 'document.write(str)');

 

 

 

 

 

추천하지는 않지만,

다음과 같은 방법으로 함수를 선언해도 무리 없이 출력된다.

 

저작자표시 비영리 변경금지

'FrontEnd > JavaScript & jQuery' 카테고리의 다른 글

jQuery :: datepicker  (0) 2016.04.28
JavaScript :: typeof  (0) 2016.03.15
JavaScript :: window.location  (0) 2016.03.14
JavaScript :: getParameterName() - get 방식 파라미터 value 리턴  (0) 2016.03.14
JavaScript :: select option text, value 출력  (2) 2016.03.11

 

 

다음과 같은 html 페이지의 window.location 정보를 조회해보려 한다.

 

 

 

 

출력을 담당하는 jsp 페이지에는 다음과 같이 적었다.

 

 

 

 

위와 같은 값들이 리턴되는 것을 알 수 있다.

저작자표시 비영리 변경금지

'FrontEnd > JavaScript & jQuery' 카테고리의 다른 글

JavaScript :: typeof  (0) 2016.03.15
JavaScript :: 함수  (0) 2016.03.15
JavaScript :: getParameterName() - get 방식 파라미터 value 리턴  (0) 2016.03.14
JavaScript :: select option text, value 출력  (2) 2016.03.11
JavaScript :: hidden field  (0) 2016.02.25

+ Recent posts

티스토리툴바