▶ 뭉충닷컴
 
mungchung.com login
Site Search
My Space
주절주절...
공부방
쥔장소개
Board
자유게시판
유용한 정보
자료실
Programming
강좌 & Articles
Spring 3.0
프로그래밍 Tip
   -ASP
   -PHP
   -JavaScript
   -HTML
   -Java/JSP
   -Database
   -Crystal Report
   -Visual Basic
   -이클립스
   -리눅스
   -기타
Windows API (VB)
Spread Sheet 7.0
컴퓨터활용 Tip
Other things
StarCraft 전략
StarCraft 문서
김용(金庸)
Son Q & Dieda

폼(Form) 검증해주는 스크립트(Script)

조회 수 19524 추천 수 0 2005.06.07 20:53:29

웹 개발하면서 귀찮은것 중 하나는 스크립트로 사용자가 입력한값 체크하는 일일것이다. 특히나 이 작성된 스크립트를 보면 초보인지 고수인지 어느정도 가늠이 가능하다. 폼 체크 하는거야 항상 "이름을 입력해주세요" 등등의 일을 하는데 개발자마다 이 스크립트를 작성하는 방식이 천차만별이다.

이 자바 스크립트는 조금만 코딩 잘해도 코딩하는 양이 상당히 줄어든다. 특히나 폼 검증해줄땐 더욱 그렇다. 아래 여러가지 다양한 방법의 폼 검증 스크립트를 적어보겠다.

일반적인 폼 검증 스크립트

가장 무식한 방법

<script language="javascript">
function formCheck() {
    if (document.form1.subject.value == "") {
        alert("제목을 입력해 주세요");
        document.form1.subject.focus();
        return false;
    }
    if (document.form1.user.value == "") {
        alert("이름을 입력해 주세요");
        document.form1.user.focus();
        return false;
    }
    return true;
}
</script>
<form name="form1" onsubmit="return formCheck()">
<input type="text" name="subject">
<input type="text" name="user">
<input type="submit">
</form>

조금 무식한 방법

<script language="javascript">
function formCheck() {
    var frm = eval("document.form1");
    if (frm.subject.value == "") {
        alert("제목을 입력해 주세요");
        frm.subject.focus();
        return false;
    }
    if (frm.user.value == "") {
        alert("이름을 입력해 주세요");
        frm.user.focus();
        return false;
    }
    return true;
}
</script>
<form name="form1" onsubmit="return formCheck()">
<input type="text" name="subject">
<input type="text" name="user">
<input type="submit">
</form>

그나마 안무식한 방법

<script language="javascript">
function formCheck(frm) {
    if (frm.subject.value == "") {
        alert("제목을 입력해 주세요");
        frm.subject.focus();
        return false;
    }
    if (frm.user.value == "") {
        alert("이름을 입력해 주세요");
        frm.user.focus();
        return false;
    }
    return true;
}
</script>
<form name="form1" onsubmit="return formCheck(this)">
<input type="text" name="subject">
<input type="text" name="user">
<input type="submit">
</form>


자 위의 3가지 경우를 보자. 이 예제소스는 체크하는 것이 "제목", "이름" 밖에 없어서 그다지 코딩양에 많은 차이가 있나 싶을수 있지만 이 코드 3개를잘 들여다보면 꼭 코딩양 줄이는것이 문제가 아니라 나중에 페이지 수정할일이 생길때 얼마나 손쉽게 수정할수 있냐의 문제도 있다.

첫번째 [가장 무식한 방법]의 코드는 그야말로 무식하다 -_- 일단 쓸데 없이 document.form1 이라는 구문을 일일이 다 넣었다. 다른 코드보면 알것지만 다른 변수로 치환해서 사용하면 될것을 일일이 다 적었다.

두번째 [조금 무식한 방법]은 좀 많이 쓰인다. 근데 이것도 안좋은 점이 만약 폼이름이 form1에서 form2로 변경되었다면? 뭐...첫번째 방법때보다야 코드를 많이 바꿀필요는없지만 어쨌든 기존 소스의 formCheck함수에서 var frm = eval("document.form1"); 이 부분의 코드를 수정해야한다.

마지막 [그나마 안무식한 방법] 요건 그나마 안무식하다. 이건 form 이름까지 아예 함수로 인자로 넘겨버려서 폼 이름이 변경된다고해도 스크립트 부분에선 고칠것이 하나도 없다!

여기까진 가장 일반적인 폼 검증하는 방식이다. 사이트 크기가 작은경우야 상관 없지만 사이트 볼륨이 커지고 개발자가 한명이 아닌 몇십명이 될경우 각기 사용하는 스크립트 방식이 다 틀려진다. 경고창 하나 띄우는데도 개발자마다 "제목을 입력해주세요", "제목을 입력하셔야합니다","제목을 기입해주세요"..등등 천차만별이다. 큰 사이트는 처리해야할 폼 검증요소들도 많기 때문에 자칫 잘못하다간 document.form1 코드만 적다 하루 다가는 경우가 생긴다. -_-


존내 편한 폼 검증 스크립트
이런 여러가지 문제들 때문에 폼 검증 해주는 함수같은것을 하나로 묶어서 만들어 사용한다. 앞으로 사용하는 폼검증 함수는 실제로 국내 대기업의 EHR 모듈 만들때 실제로 사용했던 코드이다. 물론 강좌용으로 보안상 위험한것, 불필요한것은 없앴다 -_- 꽤나 검증이 된 함수이므로 왠만해선 버그가 별로 없을것다... -_-;;

잔말말고 일단 스크립트 부분을 살펴보자. 스크립트 잘 모르는 사람은 어렵다 생각할수 있겠지만 잘 보면 어려운것 별로 없다. -_- 그냥 오래 야리다보면 이해가 될것이다. 그래서 소스설명 없다! 주석으로 대신해라 -_-

// 폼 검증 함수
function checkForm(f) {
    var fLen = f.elements.length;
    var fObj;   // 폼 요소
    var fTyp;   // 폼 요소 Type
    var fVal;   // 폼 요소 Value
    var fMsg;   // 경고 메시지 속성
    var fNum;   // 숫자만 입력 속성
    var fMax;   // 최대 길이 지정
    var fMin;   // 최소 길이 지정
    var fMxN;   // 최대값 지정
    var fMnN;   // 최소값 지정
    var fMal;   // 메일 FORMAT

    for (i=0;i getLen(fVal)) {
        if (fMax != null && fMax < getLen(fVal)) {
            alert("입력된 글자수가 "+fMax+"자보다 커야합니다.");
            fObj.focus(); return false;
        }
        if (fMxN != null && parseInt(fMxN) < parseInt(fVal)) {
            alert("입력된 숫자는 "+fMxN+"보다 작아야합니다.");
            fObj.focus(); return false;
        }
        if (fMnN != null && parseInt(fMnN) > parseInt(fVal)) {
            alert("입력된 숫자는 "+fMnN+"보다 커야합니다.");
            fObj.focus(); return false;
        }
        if (fMal != null && checkEmail(fVal) == false && fVal != "") {
            alert("이메일 주소가 올바르지 않습니다");
            fObj.focus(); return false;
        }
    }
    return true;
}

// 폼에 해당하는 컨트롤들의 기본값 쉽게 셋팅해 주기
function initForm(f)    {
    var nLen;   // form 요소의 갯수
    var ival;   // 각 요소의 default value 값 즉! 초기화하고자 하는값
    var fTyp;   // form 요소의 타입(select, radio, checkbox...)
    for (var i = 0; i < f.elements.length; i++) {
        fTyp = toUpperCase(f.elements[i].type);
        ival = f.elements[i].ival;

        if (ival && fTyp == "SELECT-ONE") {
            nLen = f.elements[i].options.length;
            for (var j = 0; j < nLen; j++) {
                if (f.elements[i].options[j].value == ival)
                    f.elements[i].options[j].selected = true;
            }
        }
        if (fTyp == "SELECT-MULTIPLE") {
            nLen = f.elements[i].options.length;
            for (var j = 0; j < nLen; j++) {
                if (f.elements[i].options[j].value == f.elements[i].options[j].ival)
                    f.elements[i].options[j].selected = true;
            }
        }
        if (ival && (fTyp == "RADIO" || fTyp == "CHECKBOX")) {
            if (f.elements[i].value == ival)
                f.elements[i].checked = true;
        }
    }
    return true;
}

// 배열 요소일 경우 checked 된것이 있는지 확인
function checkChecked(obj) {
    var objnm = obj.name;
    var oElem = eval("document.all."+objnm);
    var oElem = eval(fname+"."+objnm);
    var ret = false;

    if (typeof(oElem.length) == "undefined") {
        if (oElem.checked) {
            ret = true;
        }
    } else {
        for (var i=0;i 4)
            tot_cnt += 2;
        else
            tot_cnt++;
    }
    return tot_cnt;
}

// 대문자 변환 ex) toUpperCase(문자)
function toUpperCase(str) {
    var ret;
    str != null ? ret = str.toUpperCase() : ret = "";
    return ret;
}   

위의 스크립트를 이용해서 실제로 HTML에 적용시킬때이다.

폼 검증 함수 사용

<script language="javascript" src="frmCheck.js"></script>
<script language="javascript">
    function goSubmitProc(f) {
        // 폼 검증 함수 실행
        if (checkForm(f)) {
            alert("Submit 한다");
            return true;
        }
        return false;
    }
</script>
<form name="frm" method="post" onsubmit="return goSubmitProc(this)">
<table>
    <tr>
        <td width="200">필수입력</td>
        <td><input type="text" name="txtName" msg="이름을"></td>
    </tr>
    <tr>
        <td>필수입력 + 숫자만</td>
        <td><input type="text" name="year" msg="년도를" chknum></td>
    </tr>
    <tr>
        <td>숫자만 + 최대값(12) + 최소값(3)</td>
        <td><input type="text" name="month" maxnum="12" minnum="3" chknum></td>
    </tr>
    <tr>
        <td>최대글자수(16) + 최소글자수(6)</td>
        <td><input type="text" name="id" maxlen="16" minlen="6"></td>
    </tr>
    <tr>
        <td>이메일체크</td>
        <td><input type="text" name="email" chkmail></td>
    </tr>
    <tr>
        <td>필수입력</td>
        <td>
            <select name="day" msg="일자를">
                <option value="">- 선택 -</option>
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
                <option value="4">4</option>
            </select>
        </td>
    </tr>
    <tr>
        <td>필수입력</td>
        <td>
            <input type="radio" name="sex" value="m" msg="성별을">M
            <input type="radio" name="sex" value="F" msg="성별을">F
        </td>
    </tr>
    <tr>
        <td>필수입력</td>
        <td>
            <textarea name="content" cols="60" rows="5" msg="내용을"></textarea>
        </td>
    </tr>
</table>
<input type="submit">
</form>

코드보면 알겠지만 폼 검증하는지 안하는지도 모를정도이다. 스크립트 부분에서 단지 checkForm 함수만 실행해서 return 값의 true/false만 받아올뿐이다.  단지 경고창을 띄우기 위해서 <input type="text" name="txtName" msg="이름을"> 이런식으로 msg란 속성에 값만 넣어주면 된다.숫자를 체크하기 위해선 <input type="text" name="year" msg="년도를" chknum> 와 같이 chknum 속성만 지정해 주면 된다.

위의 3개의 에제들과 비교하면 상당한양의 코딩이 줄었다. 그리고 경고창의 문구까지 "~를 입력해주세요" 일정하다. 얼마나 e편한 코드인가 -_-;

사실 이러한 폼 검증 스크립트 방식은 당연히 내가처음이 아니다 나는 단지 이것 저것 폼검증 관련 함수들 모아서 내 나름대로 편하도록 만든것이다. 이 것보다 더 강력하고 확장성 좋은 폼 검증 함수들도 잘 찾아보면 있다. 그런 부분들은 스스로 공부해나가면 될듯 -_-...


폼 요소 기본값 셋팅해주는 함수
지금까지는 폼검증해주는 스크립트만 다루었는데 마지막으로 DB에 입력된 값을 다시 HTML로 가져올때 상당히 유용한 함수하나를 소개한다. 조금 프로그래밍 해본 사람은 알겠지만 폼의 select 요소나 checkbox, radio 요소들을 DB에 입력된 값을 보여주려 할때 (예를 들자면 수정 액션에서) 상당히 괴롭고 프로그래밍 하기 귀찮음을 알것이다. 이런 부분을 스크립트로 그나마 위의 스크립트 코드에서의 initForm 함수이다. HTML에서의 사용법은 아래와 같다.

폼 기본값 셋팅

<form name="frm2">
<table>
    <tr>
        <td>Select</td>
        <td>
            <select name="day" ival="3">
                <option value="">- 선택 -</option>
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
                <option value="4">4</option>
            </select>
        </td>
    </tr>
    <tr>
        <td>Radio</td>
        <td>
            <input type="radio" name="sex" value="m" ival="f">M
            <input type="radio" name="sex" value="f" ival="f">F
        </td>
    </tr>
    <tr>
        <td>CheckBox</td>
        <td>
            <input type="checkbox" name="a" value="a" ival="a">
            <input type="checkbox" name="b" value="b">
        </td>
    </tr>
</table>
<script>initForm(frm2);</script>
</form>

select 요소를 보면  <select name="day" ival="3"> 이런식으로 ival속성에 값을 주었다.  다른 checkbox, radio 부분도 마찬가지로 ival 속성에 값을 주었다. 이 ival 약자는 initial value 란 내 나름대로의 의미의 약자이다 -_-.. 요렇게 지정한후에 폼 아래에서 <script>initForm(frm2);</script> 이렇게 스크립트 코드 한줄 추가하면 이 initForm 함수에서 이 ival에 있는 값으로 각 폼요소의 값들을 바꿔준다.

지금까지 폼 검증 방법과 함수 이용, 폼의 기본값 쉽게 셋팅해주는 방법에 대해서 알아봤다. 역시나 개발자는 귀차니즘에 있어야한다. 너무 부지런하면 일일이 손수 코딩해서 1000타로 가는 즐거움을 느낄수 있겠지만 그만큼 노는시간이 줄어들것이다.






2009-09-11 추가사항
제로보드XE로 갈아타면서 깨져보이던 내용 수정.

2007-08-06 추가사항
라디오버튼의 필수입력 체크 할 때 제대로 체크를 못하고 있었다. 이는 아마도 일전에 뭔가 수정해서 올렸을때 (뭘 수정했는지 오래되서 기억이 안남 -_-) 그 때 뭔가 실수한것 같다. 이번에 다시 수정한 후 몇번이고 확인 하고 올렸으니 이상한점은 아마(?) 없을 것이다.

그리고 주민등록번호, 사업자등록번호 체크 넣어달라는 분들이 간혹가다가 계신데 저 좀 살려주세요 -_ㅜ (무지무지 귀찮아함)


댓글 '15'

뭉충닷컴

2005.11.25 13:09:05
*.72.3.168

꼭 무식한 방법이 나쁘다고 말한것은 아닙니다.
단지 상황이 된다면 좀 더 편한방법을 이용하는것이 좋다고 적은것 뿐입니다.
저도 개발하다보면 무식한 방법 이용할때 많은데요 뭐;;

^^

2005.11.25 16:48:22
*.239.178.206

윗글, 저 아는분이 쓰신건데요, 제가 사이트 좋다고 막 구경시켜줬더니, 저.. 무식이란말에 좀 신경이 쓰이셨던 모양이예요^^
그분도 잘하시는 분인데, 제가 여기 좋은 방법 있다고 이렇게 코딩하고 있냐고 그러니깐 기분이 나쁘셨을지도 모르겠어요....
삭제 부탁드렸어요~
악의를 가지고 쓰신글은 아니니 넘 염려 하지 마시구요,
정말 좋은 사이트 저 매일 매일 들어와서 공부하고 갈께요^^

뭉충닷컴

2005.11.25 21:01:24
*.140.64.24

아..솔직히 저도 무식한 방법 쓰는 경우 있습니다. 그 분 말씀처럼 상황에 따라서 이것 저것 쓰는것 옳은 방법이니깐요..
(그래도 그 분 말씀이 좀 과격하셔서 -_ㅜ...)
어쨌든 그 분이 자삭하셨네요;;
(그나저나 이 홈피 들어오시는 분들이 계시구나.. -_-;; )
(술먹고 와서 헤롱대며 쓰네;;)

^^

2005.11.28 14:14:49
*.239.178.206

네~ 원래부터 아는 사이트는 아니였구요, 이번에 들어와봤는데, 정말 재밌게 잘 설명을 해놓으셨어요
제가 배울점이 너무나도 많네요~
자주자주 와서 공부 많이 하고 갈께요^^

뭉충닷컴

2005.11.28 16:48:03
*.140.64.24

고맙습니다 -_ㅜ (드디어 방문자가 생겼다)

임유진

2006.01.08 14:34:54
*.226.168.222

유용한 자료에 감사드립니다.
현재 홈페이지에 적용시켜 잘 쓰고 있습니다. 한가지 아쉬운 점은 주민등록번호의 유효성 체크가 되면 더욱 좋을 것 같네요. 그럼 좋은 하루 되세요..^^

뭉충닷컴

2006.01.08 14:37:59
*.140.64.24

움...그러게요 저도 그것..주민등록번호, 사업자등록증 체크 하는것 넣는다 넣는다 생각만 하면서.. -_-..
(하는일 없이 귀찮아 하고 있음 -_-.. )

김민수

2006.02.20 16:35:04
*.74.251.162

좋은 자료 감사합니다...
많은 도움 되고 있습니다.

i6020345

2007.02.21 11:57:15
*.93.126.84

음...열심히 퍼가서 연구하겠습니다~헉헉

i6020345

2007.12.20 11:26:24
*.137.13.17

크~ 아쉽..;; FF에서 휴ㅠㅠㅠ

뭉충닷컴

2007.12.20 12:16:50
*.251.83.46

네;; FF에선 테스트 못해봤습니다. 아마 안될겁니다. 예전에 만들어둔것이라서.. -_-;
버젼업 해야하는데... 귀찮아서 -_-

헤븡

2008.02.13 15:14:39
*.128.120.41

제일 마지막부분에
<script>initForm(frm2);
뒷부분에
</script>가 빠졌네요~~
예전엔 있었는데 수정하시면서 지워졌나봐요

서동환

2009.09.11 15:31:20
*.33.178.210

너무 감사히 쓰고 있습니다만, 적용할때 Submit 한다라는 alert만 뜨고, 실제 아무 검증을 하지 않네요..왜그런지;;
제가 초보라서, 혹시 어떤걸 미리 선언해야 하는지요?@_@

checkForm(f)이게 실행 하는거 같은데..아닌가??

뭉충닷컴

2009.09.11 15:34:04
*.130.16.141

실제로 submit 하시려면
alert("Submit 한다"); 대신에 return true로 바꾸면 submit 합니다.

거북

2014.02.05 13:31:52
*.180.229.50

"비밀글입니다."

:
문서 첨부 제한 : 0Byte/ 2.00MB
파일 크기 제한 : 2.00MB (허용 확장자 : *.*)
List of Articles
번호 제목 글쓴이 날짜 조회 수
27 keyfile을 이용한 ssh 접속 방법 뭉충닷컴 2010-10-28 13792
26 멀티 브라우저 지원하는 frame, iframe 접근 코딩 방법 [3] 뭉충닷컴 2010-07-21 26976
25 crontab을 이용한 Tomcat 서버 자동 재시작 shell 뭉충닷컴 2009-08-28 25279
24 자바스크립트로 각 form의 element(요소)에 접근 방법 file [2] 뭉충닷컴 2008-09-11 61673
23 ERwin 에서 Logical의 컬럼명을 코멘트(Comment)로 변경하기 file [2] 뭉충닷컴 2008-01-16 32135
22 Tabular Data Control 마지막 강좌! 뭉충닷컴 2007-06-14 15709
21 ASP로 웹 어플리케이션 주소 사용하기 file 뭉충닷컴 2006-12-10 17992
20 VB로 WebBrowser 컨트롤의 HTML 제어 file 뭉충닷컴 2006-12-01 21494
19 ASP 페이징 쉽게 처리하기 file [4] 뭉충닷컴 2006-08-29 24560
18 두개의 비슷한 DB를 비교해서 변경된 부분 찾아내기 file 뭉충닷컴 2006-05-03 15023
17 ASP에서 Class 를 이용해보자 file 뭉충닷컴 2006-02-26 25046
16 Hotmail의 DHTML EDITOR 편집기를 이용해보자. file [34] 뭉충닷컴 2006-02-04 30320
15 Tabular Data Control 응용 - 제목 Sort (정렬) 쉽게 하기 [3] 뭉충닷컴 2006-01-27 14147
14 스크립트(Script) 코드를 암호화 시켜보자(Encode/Decode) [2] 뭉충닷컴 2005-06-10 19143
13 dll을 이용한 로그인 file [1] 뭉충닷컴 2005-11-25 22075
12 Tabular Data Control 응용 - 페이징 처리하는 3가지 방법 file [1] 뭉충닷컴 2005-11-23 16297
11 Query를 잼있고, 유용하게 사용해보자 file [3] 뭉충닷컴 2005-10-01 14742
10 Tabular Data Control 응용 - 테이블의 행 배경색이 격으로 변하게하기 뭉충닷컴 2005-09-25 15817
» 폼(Form) 검증해주는 스크립트(Script) file [15] 뭉충닷컴 2005-06-07 19524
8 asp 로 서버에 zip 압축/압축해제(풀기) 예제 file [8] 뭉충닷컴 2005-08-12 20011
7 MS-SQL의 osql.exe 이용 하기 (도스상에서 sql 구문 이용) 뭉충닷컴 2005-09-25 19368
6 SQL Script 로 ERD와 테이블 생성 손쉽게하기 뭉충닷컴 2005-09-25 22168
5 Tabular Data Control 기초 다지기 4 - 마지막! file 뭉충닷컴 2005-09-25 14727
4 Tabular Data Control 기초 다지기 3 file 뭉충닷컴 2005-09-25 14491
3 Tabular Data Control 기초 다지기 2 file 뭉충닷컴 2005-09-25 14209
2 Tabular Data Control 기초 다지기 1 file [1] 뭉충닷컴 2005-09-25 15336
1 OWC를 이용한 웹에서 엑셀 그래프 그리기 file [4] 뭉충닷컴 2007-12-19 19391