Full Stack Web Developer.
Syaku (샤쿠)

Java, JS (ES6+), Spring, Spring security, jQuery, Reactjs, Bootstrap.

        

07-03 04:38


Spring Boot 2 보기 Front-end 보기 DevOps 보기 Spring 3 보기 Spring Security 3 보기

폼 전송 일괄처리 : 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

댓글 남기기
◀ PREV 1···34567891011···19 NEXT ▶