0
33
4
1
View
Articles
Name
손병목
(2002-04-14 01:07:49, Hit : 37937, Vote : 2164)
Homepage
http://www.itmembers.net
Subject
글 쓰기 입력 폼 만들기(3) 자바 스크립트를 이용한 입력 검사
게시판에 글을 쓸 때 이름이나 제목, 내용 등이 공란일 때 다음과 같이 오류 메시지를 출력할 수 있는 입력 검사 기능을 추가해 봅시다.
입력 검사를 하기 위해 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 : </body>
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란에 커서를 위치하도록 하는 역할을 합니다.
앞으로 본 강좌에서 자바스크립트까지 일일이 설명드리긴 어려울 것 같습니다.
위 실습 예제의 자바스크립트를 직접 실행해 보면서, 위에서 사용된 정도만이라도 그 기능을 하나하나 이해하고 습득해 나가도록 합시다.
이상, 강좌를 올려야 한다는 의무감으로 작디작은 눈을 겨우 뜨고 있는
동주 아빠 손병목이었습니다.
Prev
글 쓰기 입력 폼 만들기(4) write.php 최종 파일
손병목
Next
글 쓰기 입력 폼 만들기(2) FORM 태그의 이해(下)
손병목
Copyright 1999-2024
Zeroboard
/ skin by
Zetyx
다 입력하셨으면 write_test2.php를 실행한 다음 아무 것도 입력하지 않은 상태에서 '글쓰기' 버튼을 눌러 보세요. 
