폼 유효성 체크 플러그인

[황정식]

2012.03.28 현재

jquery.formValidate.js

==== description ====

: 폼 전송전 공백 체크 및 unchecked, unselected를 체크하는 폼 유효성 검사 플러그인으로서, 현재 계속 기능을 포함 시키고 있는중입니다.

==== option =====

notifyMode : "dialog" | "alert" 

--> 두개의 값을 선택적으로 사용가능하며, "dialog"를 지정하면 dialog modal 박스를 이용하여 에러메시지를 화면에 표시하며, "alert"를 지정하면 alert(‎) 함수를 이용하여 에러메시지를 표시합니다. 디폴트 값은 "alert"입니다.

passwordLength :  [int minValue, int maxValue]

--> 최소값과 최대값을 지정하면 해당 길이 범위내의 패스워드 길이를 검사해줍니다. 

--> 패스워드 문자열은 기본 영문/숫자 혼합입니다.

예)

==== testForm.jsp ====

<%@ page language="java" contentType="text/html; charset=UTF-8"

    pageEncoding="UTF-8"%>

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

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

<%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>

<c:import url="/include/header.jsp"/>

<form:form name="gameRegForm"  action="/onnuri/game/gameReg" commandName="gameDto" method="POST">

이메일: <form:input path="userEmail" title="이메일" cssClass="required"/><br/><br/>

비밀번호: <form:password path="passNo" title="비밀번호" cssClass="required"/><br/><br/>

게임유형: <form:radiobuttons items="${gameTypeList}" path="gameType" title="게임유형" cssClass="required"/><br/><br/>

게임제목: <form:input path="gameTitle" title="게임제목" cssClass="required"/><br/><br/>

게임설명: <form:textarea path="gameDesc" cols="50" rows="3" title="게임설명" cssClass="required"/><br/><br/>

기본정보: <form:textarea path="basicInfo" cols="50" rows="3" title="기본정보" cssClass="required"/><br/><br/>

<input type="button" id="btnReg" value="등록"/>

</form:form>

        <script type="text/xxxxjavascript" src="/jquery/jquery-1.7.1.js"></script>

<script type="text/xxxxjavascript" src="/jquery/ui/jquery-ui-1.8.17.custom.js"></script>

<script type="text/xxxxjavascript" src="/js/plugin/jquery.formValidate.js"></script>

<script type="text/xxxxjavascript" src="/js/common_jquery.js"></script>

        <script type="text/xxxxjavascript" src="/js/game/game.js"></script>

--> 스프링에서의 사용 예이지만 다른 프레임워크에서도 방법은 똑같다. 유효성 검사를 필수로 실시할 경우 title 속성에 검사 대상의 텍스트를 입력하고 css 클래스를 "required"로 지정한다.

==== gaem.js ====

(function($){

/**

* 게임등록 폼 유효성 검사 및 폼 전송

*/ 

$("#btnReg").click(function(){

var resultBoolean = $("form[name='gameRegForm']").formValidate({

notifyMode : "dialog",

passwordLength : [6,12]

});

if(resultBoolean)

{

$("form[name='gameRegForm']").submit();

}

});

})(jQuery);

--> 폼전송전 유효성 검사 플러그인 메서드를 호출하는 부분.