struts로 검색한 결과 :: 시소커뮤니티[SSISO Community]
 
SSISO 카페 SSISO Source SSISO 구직 SSISO 쇼핑몰 SSISO 맛집
추천검색어 : JUnit   Log4j   ajax   spring   struts   struts-config.xml   Synchronized   책정보   Ajax 마스터하기   우측부분

회원가입 I 비밀번호 찾기


SSISO Community검색
SSISO Community메뉴
[카페목록보기]
[블로그등록하기]  
[블로그리스트]  
SSISO Community카페
블로그 카테고리
정치 경제
문화 칼럼
비디오게임 스포츠
핫이슈 TV
포토 온라인게임
PC게임 에뮬게임
라이프 사람들
유머 만화애니
방송 1
1 1
1 1
1 1
1 1
1

struts로 검색한 결과
등록일:2008-03-16 11:49:32
작성자:
제목:Struts 2 Tutorial - 15.스트럿츠2에서의 클라이언트측 검증


본 튜토리얼은 제가 struts 2를 공부할 목적으로 아래의 원문에 링크된 문서를 번역하여 정리한 것입니다.
원문: http://www.roseindia.net/struts/struts2/struts-2-client-side-validation-example.shtml


이번 섹션에서, 우리는 클라이언트 측의 검증을 위한 자바 스크립트 코드를 생성하는 코드를 작성하는 방법을 알 수 있을 것입니다. 이전의 섹션에서 우리는 서버측 검증을 위한 Login-validator.xml 서렁 파일을 개발했습니다. 이번 섹션에서 우리는 클라이언트측 자바 스크립트를 생성하기 위해 똑같은 Login-validator.xml 파일을 사용할 것입니다.

JSP 페이지 개발
아래는 login jsp (loginClientSideValidation.jsp) 페이지 코드입니다.
<%@ taglib prefix="s" uri="/struts-tags" %>
<html>
<head>
<title>struts 2 Login Application!</title>

<link href="<s:url value="/css/main.css"/>" rel="stylesheet"
type="text/css"/>

</head>
<body>


<s:form action="doLoginClientSideValidation" method="POST" validate="true">

<tr>
<td colspan="2">
Login
</td>

</tr>

<s:actionerror />
<s:fielderror />

<s:textfield name="username" label="Login name"/>
<s:password name="password" label="Password"/>
<s:submit value="Login" align="center"/>

</s:form>

</body>

</html>

<s:form tag...> 안에 validate="true" 를 추가한 것을 주목하라. 이것이 우리가 해야할 유일한 작업이고 나머지작업은 스트럿츠 검증 프레임워크가 할 일이다. 검증 프레임워크는 클라이언트 측에서 폼을 검증하기 위한 자바스크립트를 생성한다.

struts.xml 변경
struts.xml 파일에 아래의 코드를 추가하라.
<action name="showLoginClientSideValidation">
<result>/pages/loginClientSideValidation.jsp</result>
</action>

<action name="doLoginClientSideValidation" class="net.roseindia.Login">
<result name="input">/pages/loginClientSideValidation.jsp</result>
<result name="error">/pages/loginClientSideValidation.jsp</result>
<result>/pages/loginsuccess.jsp</result>
</action>

doLoginClientSideValidation 가 검증 요청을 다루는 반면에 showLoginClientSideValidation 액션은 로그인 폼을 표시한다.

index.html 에 링크 추가
마지막으로 우리는 index.html에 클라이언트측 검증을 테스트하기 위한 로그인 폼으로 접근하기 위한 링크를 추가한다.
<ul>
<li><a href="roseindia/showLoginClientSideValidation.action">Login Application (Client Side Validation)</a></li>
</ul>

클라이언트 측 검증 테스트
톰캣을 실행시키고 http://localhost:8080/struts2tutorial/ 를 입력하라. 브라우저에 아래와 같이 표시될 것이다.
http://localhost:8080/<font style='background-color: rgb(51, 51, 51);' color='#ffff00' size='4'>struts</font>2tutorial/

http://localhost:8080/struts2tutorial/


이제 "Login Application (Client Side Validation)" 링크를 클릭하자. 그러면 아래와 같은 화면이 표시될 것이다.
사용자 삽입 이미지

아무것도 하지 않은 상태에서 "Login" 버튼을 클릭해보자. 아래와 같이 자바스크립트가 에러메시지를 보여줄 것이다.
사용자 삽입 이미지

이제 "Login Name"을 입력하고 "Login" 버튼을 클릭하자. 어플리케이션이 아래와 같은 에러를 보여줄 것이다.
사용자 삽입 이미지

자바스크립트 코드 생성 실험

프레임워크에 의해 아래와 같은 html 코드가 생성된다.
<html>

<head>

<title>struts 2 Login Application!</title>

<link href="/struts2tutorial/css/main.css" rel="stylesheet"

type="text/css"/>
</head>

<body>
<script src="/struts2tutorial/struts/xhtml/validation.js"></script>
<form namespace="/roseindia" id="doLoginClientSideValidation" name="doLoginClientSideValidation" onsubmit="return validateForm_doLoginClientSideValidation();" action="/struts2tutorial/roseindia/doLoginClientSideValidation.action" method="POST">

<table class="wwFormTable">

<tr>

<td colspan="2">

Login

</td>

</tr>

<tr>

<td class="tdLabel"><label for="doLoginClientSideValidation_username" class="label">Login name:</label></td>

<td

><input type="text" name="username" value="" id="doLoginClientSideValidation_username"/>

</td>

</tr>

<tr>

<td class="tdLabel"><label for="doLoginClientSideValidation_password" class="label">Password:</label></td>

<td

><input type="password" name="password" id="doLoginClientSideValidation_password"/>

</td>

</tr>

<tr>

<td colspan="2"><div align="center"><input type="submit" id="doLoginClientSideValidation_0" value="Login"/>

</div></td>

</tr>

 

</table></form>

 

 

<script type="text/javascript">

function validateForm_doLoginClientSideValidation() {

form = document.getElementById("doLoginClientSideValidation");

clearErrorMessages(form);

clearErrorLabels(form);

var errors = false;

// field name: username

// validator name: requiredstring

if (form.elements['username']) {

field = form.elements['username'];

var error = "Login name is required";

if (field.value != null && (field.value == "" || field.value.replace(/^\s+|\s+$/g,"").length == 0)) {

addError(field, error);

errors = true;

}

}

// field name: password

// validator name: requiredstring

if (form.elements['password']) {

field = form.elements['password'];

var error = "Password is required";

if (field.value != null && (field.value == "" || field.value.replace(/^\s+|\s+$/g,"").length == 0)) {

addError(field, error);

errors = true;

}

}

return !errors;

}

</script>

</body>

</html>
위의 코드에서, 당신은 클라이언트측 검증을 위해 생성된 자바스크립트 코드와 validateForm_doLoginClientSideValidation() 함수를 볼 수 있다.