웹마스터 팁

게시판에 글을 쓸 때 이름이나 제목, 내용 등이 공란일 때 다음과 같이 오류 메시지를 출력할 수 있는 입력 검사 기능을 추가해 봅시다.



입력 검사를 하기 위해 PHP 프로그래밍을 할 수도 있지만 일반적으로 자바스크립트를 이용해 간단한 입력 검사가 많이 사용됩니다.

앞서 실습한 write_test.php파일을 열어 다음과 같이 수정한 다음 write_test2.php파일로 저장해 두세요.

▶ 녹색으로 표시된 부분이 새롭게 추가된 부분이고
▶ 빨간색으로 표시된 부분이 기존 코드에서 수정된 부분입니다.

1 : <html>
2 : <head>
3 : <title>PHP 게시판 프로젝트 - 쓰기</title>
4 :
5 : <script language="javascript">
6 :
7 : function check_submit() {
8 :        
9 :         if (document.myForm.name.value == "") {
10 :                 alert('이름을 입력하세요');
11 :                 document.myForm.name.focus();
12 :                 return;
13 :                
14 :         } else if (document.myForm.password.value == "") {
15 :                 alert('비밀번호를 입력해야 글을 수정하거나 삭제할 수 있습니다.');
16 :                 document.myForm.password.focus();
17 :                 return;
18 :                
19 :         } else if (document.myForm.subject.value == "") {
20 :                 alert('제목을 입력하세요');
21 :                 document.myForm.subject.focus();
22 :                 return;
23 :                
24 :         } else if (document.myForm.memo.value == "") {
25 :                 alert('내용을 입력하세요');
26 :                 document.myForm.memo.focus();
27 :                 return;
28 :                
29 :         } else {
30 :                 document.myForm.action = "write_ok.php";
31 :                 document.myForm.submit();
32 :         }
33 :        
34 : }
35 :
36 :</script>
37 : </head>
38 :
39 : <form name='+ 'myForm' method='post'>
40 :
41 : 이름 : <input type='text' name='name' size=20  maxlength=20><br>
42 : 비밀번호 : <input type='password' name='password' size=20  maxlength=20><br>
43 : 전자우편 : <input type='text' name='email' size=50  maxlength=70><br>
44 : 홈페이지 : <input type='text' name='homepage' size=50  maxlength=70><br>
45 : 제목 : <input type='text' name='subject' size=50  maxlength=70><br>
46 : 내용 : <textarea name='memo' cols=50 rows=5  maxlength=500></textarea><br>
47 :
48 : <br>
49 : <input type='button' value='글쓰기' onclick='javascript:check_submit();'>
50 :
51 : </form>
52 :
53 :
54 : </html>


다 입력하셨으면 write_test2.php를 실행한 다음 아무 것도 입력하지 않은 상태에서 '글쓰기' 버튼을 눌러 보세요.

▶ 49행을 보면 '글쓰기' 버튼을 눌렀을 때 check_submit()라는 자바스크립트 함수를 실행하라는 것을 볼 수 있습니다.
여기서 지정한 check_submit() 함수는 5행 ∼ 36행에 걸쳐 정의하고 있습니다.
▶ 49행의 input type이 submit가 아니라 button인 까닭은,
만약 submit으로 할 경우 자바스크립트로 입력 오류 검사를 해서 오류가 있든 없든 무조건 현재의 데이터를 전송(submit)해 버리기 때문입니다.
▶ 따라서 그냥 button 타입으로 해 둔 다음,
29행∼32행에서와 같이 입력 검사에서 아무런 이상이 없을 경우 보내도록 했습니다.
▶ 30행에서 action 속성을 별도로 지정하고 있기 때문에
39행에서 action 속성을 따로 지정하지 않고 있습니다.

위에서 사용된 자바스크립트에 대해 조금 설명 드리자면,

▶ 9행의 if (document.myForm.name.value == "")
if (!document.myForm.name.value)와 같은 뜻입니다.
▶ 10행의 alert('이름을 입력하세요');는 대화 상자를 표시합니다.
▶ 11행의 document.myForm.name.focus();는 myForm의 name란에 커서를 위치하도록 하는 역할을 합니다.

앞으로 본 강좌에서 자바스크립트까지 일일이 설명드리긴 어려울 것 같습니다.
위 실습 예제의 자바스크립트를 직접 실행해 보면서, 위에서 사용된 정도만이라도 그 기능을 하나하나 이해하고 습득해 나가도록 합시다.

이상, 강좌를 올려야 한다는 의무감으로 작디작은 눈을 겨우 뜨고 있는
동주 아빠 손병목이었습니다.
제목 글쓴이 날짜
빠른 글 쓰기: 메인 페이지에서 글 쓰기 [1] file 윈컴이 2015.12.09
모바일 글쓰기 페이지 경고창 [2] file 자동차 2015.09.26
xe 폰갭 제작시 admob 광고 글쓰기 방해 하지 않으려면 한꼬마 2015.01.26
여러게시물을 작성시 쓰기버튼 노출의 여부로 고생할 때.. file BJ람보 2014.12.15
게시판 글쓰기 폼은 없이 확장변수만 표시할 수 있는 게시판 만들기 (for sketchbook5 최신버전 기준) [2] 큰성565 2014.05.02
글쓰기를 클릭하면 띄워지는 테두리 없는 예쁜 팝업 띄우기 core. 1.7.4 [4] file 마음의빈자리 2014.02.11
1.7.4 업데이트후 글쓰기 에러가 나신다면... [2] 맞장 2014.02.07
빠른 글 쓰기 - 메인 페이지에서 글 쓰기 [1] file 윈컴이 2013.09.23
글쓰기 안되고 관리자만 글쓰기가 될때 해결법 [2] 소푸 2013.06.12
글쓰기 폼에 미리 기본 내용 입력 [24] 송동우 2012.07.18
모바일 첨부,댓글,댓글쓰기 항상 열어놓기 [10] 키스미베이베 2012.05.31
코어 1.5.1에서 회원목록에 성별아이콘 쓰기(수정) 늘푸른이 2011.12.10
코어 1.5.1에서 회원정보에 성별아이콘 쓰기 file 늘푸른이 2011.12.10
게시판 글쓰기에서 자동링크의 target을 _blank로 일괄 적용 무얼까 2011.08.23
rsync의 write only 기능(쓰기만 가능한 설정) 좋은진호 2004.12.09
나만의 미니홈 만들기 ㅡ 글쓰기에 앞서... [1] 예뜨락 2004.11.17
체널을 응용해서 tmain.php?tdb=test&db=src 식으로 쓰기 [12] 9000㎒ 2003.08.01
[동주아빠] PHP 게시판 - 글쓰기 입력 write.php [5] file 손병목 2002.12.25
[동주아빠] PHP 게시판 - 글쓰기 입력폼(3) 입력값검사 [5] 손병목 2002.12.25
[동주아빠] PHP 게시판 - 글쓰기 입력폼(2) [1] 손병목 2002.12.25