SSISO Community
STRUTS2 의 한글 처리문제 Stream Result 유형에 대한 설정 Action의 Result를 다른 Result로 연계하기 global result 설정 Struts 2 + SiteMesh 2.3 에서의 web.xml Struts 2 Tutorial - 15.스트럿츠2에서의 클라이언트측 검증 Struts 2 Tutorial - 14.실행 및 테스트 Struts 2 Tutorial - 13.로그인 어플리케이션에 Validation 추가 Struts 2 Tutorial - 12.Login 어플리케이션 개발 Struts 2 Tutorial - 11.Struts 2 Redirect Action

시소당

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/struts2tutorial/

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() 함수를 볼 수 있다.

1711 view

4.0 stars

SSISO Community

STRUTS2 의 한글 처리문제 Stream Result 유형에 대한 설정 Action의 Result를 다른 Result로 연계하기 global result 설정 Struts 2 + SiteMesh 2.3 에서의 web.xml Struts 2 Tutorial - 15.스트럿츠2에서의 클라이언트측 검증 Struts 2 Tutorial - 14.실행 및 테스트 Struts 2 Tutorial - 13.로그인 어플리케이션에 Validation 추가 Struts 2 Tutorial - 12.Login 어플리케이션 개발 Struts 2 Tutorial - 11.Struts 2 Redirect Action