폼 전송 일괄처리 : submit 전송 입력 폼 예제
Action 을 이용한 입력폼 소스 예제입니다. 아래의 소스를 직접 실행하고, 주석을 참조하세요.
Example Source
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="ko" xmlns="http://www.w3.org/1999/xhtml" xml:lang="ko">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta content="no" http-equiv="imagetoolbar"/>
<title>쓰기에서 사용법 : Action Form Checking : 액션 폼 체크</title>
<!-- Action 스크립트 호출 -->
<script type="text/javascript" language="javascript" src="./action.js"></script>
</head>
<body>
<script type="text/javascript">
//<![CDATA[
// 폼 체킹 선언
var check = new Array("user_id","user_name","user_pwd","user_pwd1","jumin_num","email","tel_num1","tel_num2","tel_num3","phone_num");
/* 필터 쿼리 문자열에 대한 설명입니다. */
/*
&filter=notnull : 입력값이 없으면 오류 발생
&min=4 : 글자최소수 4자 이하 인 경우 오류 발생
&max=10 : 글자 최대수 4자 이상인 경우 오류 발생
&filter=user_id : 필터 아이디 형식 패턴이 아닌 경우 오류발생
&title=아이디 : 모든 메세지 출력 앞에 아이디 단어를 붙입니다.
예) 아이디을(를) 입력하세요. 표시함.
*/
check["user_id"] = "&filter=notnull&min=4&max=10&filter=user_id&title=아이디";
check["user_name"] = "&filter=notnull&min=2&max=10&filter=user_name&title=이름";
check["user_pwd"] = "&filter=notnull&min=4&max=16&title=비밀번호";
/*
&$user_pwd1=$user_pwd : $ 해당 id 속성의 값을 비교함. 즉, user_pwd1.value 와 user_pwd.value 는 일치하지 않을 경우 오류 발생
$ 붙지지 않을 경우 그대로 값으로 인식합니다.
*/
check["user_pwd1"] = "&filter=notnull&$user_pwd1=$user_pwd&title=비밀번호확인";
check["jumin_num"] = "&filter=notnull&filter=hyphen_jumin&title=주민등록번호";
check["email"] = "&filter=notnull&filter=email&title=이메일";
check["tel_num1"] = "&min=2&max=4&filter=int&title=전화번호";
/*
&null=tel_num1 : id 속성 tel_num1 이 빈값인 경우 나머지 필터 쿼리 문자열을 무시합니다.
¬null=tel_num1 : id 속성 tel_num1 의 값이 존재할 경우 나머지 필터 쿼리 문자열을 무시합니다.
*/
check["tel_num2"] = "&null=tel_num1&filter=notnull&min=2&max=4&filter=int&title=전화번호";
check["tel_num3"] = "&null=tel_num1&filter=notnull&min=2&max=4&filter=int&title=전화번호";
check["phone_num"] = "&filter=hyphen_contact&title=휴대번호";
/*
위 비밀번호와 반대인 필터 쿼리 문자열입니다.
&$phone_num2=!$phone_num : phone_num2.value 와 phone_num.value 는 일치할 경우 오류 발생
*/
check["phone_num2"] = "&null=phone_num&$phone_num2=!$phone_num&filter=hyphen_contact&title=휴대번호2";
//]]>
</script>
<div>
<form id="insert_form" method="post" action="write_ok.html" onsubmit="return getAction(this,check);">
<input type="hidden" id="mode" name="mode" />
<!-- 서버에 전송되기전에 등록하시겠습니까? 라는 메세지 출력 -->
<input type="hidden" id="xask" value="insert" />
<table cellspacing="0" border="1">
<tr>
<th>아이디</td>
<td> <input type="text" id="user_id" name="user_id" /></td>
</tr>
<tr>
<th>이름</th>
<td><input type="text" id="user_name" name="user_name" /></td>
</tr>
<tr>
<th>비밀번호</th>
<td><input type="password" id="user_pwd" name="user_pwd" /></td>
</tr>
<tr>
<th>비밀번호 확인</th>
<td><input type="password" id="user_pwd1" name="user_pwd1" /></td>
</tr>
<tr>
<th>주민등록번호</td>
<td>
<input type="text" id="jumin_num" name="jumin_num" />
</td>
</tr>
<tr>
<th>메일 주소</th>
<td><input type="text" id="email" name="email" /></td>
</tr>
<tr>
<th>전화번호</th>
<td>
<input type="text" id="tel_num1" name="tel_num1" /> -
<input type="text" id="tel_num2" name="tel_num2" /> -
<input type="text" id="tel_num3" name="tel_num3" />
</td>
</tr>
<tr>
<th>휴대번호</th>
<td><input type="text" id="phone_num" name="phone_num" /></td>
</tr>
<tr>
<th>휴대번호2</th>
<td><input type="text" id="phone_num2" name="phone_num2" /></td>
</tr>
<tr>
<th scope="row" colspan="2">
<input type="submit" value="등록" />
</th>
</tr>
</table>
</form>
</div>
</body>
</html>
written by Seok Kyun. Choi. 최석균.
http://www.cyworld.com/syaku
http://syaku.tistory.com
'개발노트 > JavaScript' 카테고리의 다른 글
| XPath selectSingleNode : 자바스크립트 (0) | 2009.05.25 |
|---|---|
| XPath 표현식을 이용한 XML 노드 검색 : selectSienleNode (0) | 2009.05.25 |
| JSON : 자바스크립트 (0) | 2009.04.18 |
| Action Framework (0) | 2009.04.15 |