회원가입 폼(form)으로 보는 Validator 구현하는 방법

전자정부 표준프레임워크에서는 공통컴포넌트로 회원가입도 제공하고 있습니다.

회원가입 form에서는 조금 독특한 Validator를 사용하고 있는데요.
아마도 스프링(Spring)에서 지원하는 Validator를 알맞게 수정해서 사용하고 있는 것 같습니다.

그래서, 회원가입을 통해서 Validator를 구현하는 방식을 살펴보겠습니다.

1. Validator 하위에 xml 파일 만들어서 rule 구현하기

validator 하위에 EgovMberManage.xml 파일을 생성합니다.
(파일명은 원하는 이름으로 하셔도 알아서 인식합니다.)

EgovMberManage.xml 파일에 아래처럼 체크할 필드들에 대해 속성을 넣어주세요.

필수값이면 required, 최대글자길이 제한이 있다면 maxLength 등 넣어주시면 됩니다.

validator 폴더 하위의 다른 xml 파일들을 참고해서 눈치껏 작성해 주시면 됩니다.

form name으로 사용한 mberManageVO는 다른 곳에서도 사용하니 기억해 두시구요.

2. 해당 VO 파일 만들기 (MberManageVO)

EgovMberManage.xml 파일에 아래처럼 체크할 필드들에 대해 속성을 넣어주세요.

xml 파일에서 form name을 mberManageVO로 했던 거 기억하시죠?

지금 만들 MberManageVO 때문입니다.

MberManageVO에서 정의한 변수값들이 중요한데요.

1번에서 만들었던 EgovMberManage.xml 소스의 property명과 MberManageVO 안의 변수명들이 같아야 에러가 나지 않습니다.

만일 VO에 없는 변수가 xml 파일에 정의되면 오류가 발생합니다.

그리고, 4번에서 jsp 파일에 폼을 만들텐데 그곳에서의 name도 이 VO 파일의 변수명과 같아야 에러가 발생하지 않습니다.

3. Controller(EgovMberManageController.java)의 해당 메소드에 ModelAttribute 파라미터로 추가하기

회원가입 양식을 실행시키는 메소드는 sbscrbMberView() 메소드의 파라미터에 아래 부분을 반드시 선언해 주셔야 합니다.

@ModelAttribute("mberManageVO") MberManageVO mberManageVO

4. JSP 파일에 폼양식 및 스크립트 추가하기(EgovMberSbscrb.jsp)

1. taglib 추가하기

<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<%@ taglib prefix="validator" uri="http://www.springmodules.org/tags/commons-validator" %>

2. script 추가하기

<script type="text/javascript" src="<c:url value="/sec/rnc/validator.do"/>"></script>
<validator:javascript formName="mberManageVO" staticJavascript="false" xhtml="true" cdata="false"/>

3. <form:form 태그로 폼 추가하기

<form:form commandName="mberManageVO" action="${pageContext.request.contextPath}/uss/umt/EgovMberSbscrb.do" name="mberManageVO"  method="post" >

4. <form:input, <form:select 등으로 폼에 개체 추가하기

<form:input path="mberId" size="20" cssClass="txaIpUmt" readonly="true" maxlength="20" /> 등등

굳이 체크할 필요가 없는 부분은 <input .. /> 등으로 구현해도 됩니다.

하지만, validate 체크를 해야 하는 부분은 반드시 <form:input path="mberId" ... /> 처럼 구현하셔야 하구요.
path에 들어가는 값은 MberManageVO에 있는 변수와 이름이 일치하여야 합니다.

5. 전송 버튼이 실행될 자바스크립트 함수에 if문 추가하기

if(validateMberManageVO(document.mberManageVO)){}

[가입신청] 버튼을을 클릭시 validate 체크를 해야하기 때문에 [가입신청] 클릭시 실행되는 함수에 추가할 사항이 있습니다.

[가입신청] 버튼을 클릭하면 fnSbscrb() 함수가 실행되는군요.

fnSbscrb() 함수에 if(validateMberManageVO(document.mberManageVO)){} 이 부분을 넣어줘야 validate 체크를 하게 됩니다.

validateMberManageVO(document.mberManageVO) 값이 true일 때만 전송하도록 구현돼 있습니다.

validateMberManageVO( document.mberManageVO) => mberManageVO 의 명이 사용된 점에 주의하셔야 합니다.

자, 이렇게 구현을 하고 테스트를 해보면 잘 되겠죠?

만일 구현을 다 했는데도 작동하지 않는다면 디버깅을 통해 해결해야 할 것 같습니다.