[jQuery validation] alert으로 validation 체크하는거 지겨우신가요?

오늘 소개할 플러그인은 jQuery validation 체크하는 플러그인이다!

회원가입이나 글쓰기등일때 submit 날려주기전, 

if(test == ""){

    alert("입력하세요!");

    retrun;

}

이런 식으로 대부분 검증을 한다.

하지만 본인은 이번에 소개하는 플러그인으로 validation 체크를 하는 로직을 짜볼까 한다.

단순 alert을 text형식으로 보여주는 예제만 설명하도록 하겠음.

규칙은 엄청 다양하다. 비밀번호 검증, 이메일검증, 체크여부등등... 해당 

jquery validation 다운로드

http://jqueryvalidation.org/

jquery validation api document

http://jqueryvalidation.org/documentation/

다운받은 파일을 압축해제하여 

/dist/jquery.validate.js 와 /demo/css, /demo/images 를 프로젝트 경로에 

validation이라는 폴더를 생성하여 가져다 봍였다.

/dist/additional-methods.js라는 파일이 있는데 이놈은 사용자가 개별적으로 정의한 

validation기능을 추가로 적용시켜주게 도와주는놈이다.

validation플러그인을 사용시 기본적으로 적용되는 범위는

form태그내에 정의된 태그들을 검증하는거고, 일반 button이 아닌 submit버튼을 이용하는것이 기본적으로 제공되어있음.

평상시와 똑같이 js/css 파일들을 include해봅시다.

<link rel="stylesheet" href="/validation/css/screen.css" />
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.9.0/jquery.js"></script>
<script type="text/javascript" src="/validation/jquery.validate.js"></script>

그다음으로는 검증을 해보고자 하기위한 HTML 태그!!

        <form action="dddd.jsp" id="memberForm">
		<table style="width: 800px;">
			<tr>
				<td>
					아이디
				</td>
				<td>
					<input type="text" name="id" id="id"  />
				</td>
			</tr>
			<tr>
				<td>
					이름
				</td>
				<td>
					<input type="text" id="name" name="name"  />
				</td>
			</tr>
			<tr>
				<td colspan="2"><input class="submit" type="submit" value="Submit"/></td>
			</tr>
		</table>
	</form>

그럼 이제 위 태그에 대한 validation을 하기 위한 스크립트를 짜보자.

       $(function(){
		//memberForm form태그에 대한 validation 시작
		$("#memberForm").validate({
		    rules: {
		    	// id , name 은 폼태그내에 존재하는 name명이다.
		    	id : {
		    		//해당 옵션을 주면 필수체크!
		    		required : true
		    	},
		    	name : {
		    		required : true
		    	}
		    },
		    messages: {
		    	// id , name 은 폼태그내에 존재하는 name명이다.
		    	// alert에 들어가는 문자내용
		    	// 하지만 text로만 화면에 보여진다는 것!
		    	id: {
	                required: "아이디를 입력하세요"
	            },
	            name: {
	                required: "이름을 입력하세요"
	            }
		    },
		    //검증이 끝난후에 작업할 부분 (submit??)
		    submitHandler: function() {
		    	alert("전송!!");
		    }
		})
	})

ui적으로도 깔끔하고 사용자가 alert화면의 확인버튼을 클릭을 할 필요가 없다!!

응용을 해서 한번 프로젝트에 적용해보자!

추 . 천 !!!!

도움이 되셨다면 손가락↓ 클릭! 궁금하신점은 댓글!!