입력값 검사에 유용한 validate JQuery

validate JQuery

입력값 검사에 유용한 validate JQuery에 대해 소개해볼까 합니다 ㅎㅎ

보통 회원가입이나, 메일보내기 등의 폼에서 입력값을 받아 넘기기 전에 입력값 검사를 하는 방법은

onsubmit 함수를 호출하여 입력값을 자바스크립트로 하나하나 검증하고 alert 창을 띄워주곤 했죠..

그러나 이것도 어느 정도껏이지 양이 많아지면 굉장히 번거로워 집니다.

하지만 validate 라는 JQuery를 이용하면 훨씬 간단하게 작성할 수 있습니다.

거두절미하고 바로 작성해보도록 하죠.

validate jQuery 파일을 다운받기 위해 http://jqueryvalidation.org/ 로 이동합니다.

중간쯤 보시면 위의 부분이 보이는데, Download 를 클릭하면 zip 파일이 다운로드 됩니다.

압축을 풀고 해당 폴더 내 dist 폴더에 가면 validate js 파일이 있습니다. (원본파일이나 min 버전 중 아무거나 사용하셔도 됩니다.)

해당 파일을 복사하여 웹 프로젝트의 적당한 경로에 복사합니다.

이제, 회원가입 Form을 하나 만들도록 하겠습니다.

joinForm.html

<script type="text/javascript" src="js/jquery-1.11.1.js"></script>
<script type="text/javascript" src="js/jquery.validate.js"></script>
<form id="joinForm" method="post" action="joinProc.jsp">
	<table border="1" cellspacing="0" cellpadding="5" style="width:550px;">
		<tr><th colspan="2" >Join Form</th></tr>
		<tr><td>ID</td><td><input type="text" id="id" name="id"/></td></tr>
		<tr><td>Password</td><td><input type="password" id="pwd" name="pwd"/></td></tr>
		<tr><td>Confirm Password</td><td><input type="password" id="pwdConfirm" name="pwdConfirm"/></td></tr>
		<tr><td>Name</td><td><input type="text" id="name" name="name"/></td></tr>
		<tr><td>Personal Number</td><td><input type="text" id="personalNo1" name="personalNo1" maxlength="6"/> 
		- <input type="password" id="personalNo2" name="personalNo2" maxlength="7"></td></tr>
		<tr><td>E-mail</td><td><input type="text" id="email" name="email"/></td></tr>
		<tr><td>Blog</td><td><input type="text" id="blog" name="blog"/></td></tr>
		<tr><td colspan="2" style="text-align:right;"><input type="submit" value="JOIN!"/></td></tr>
	</table>
</form>

간단한 회원가입 폼입니다.

jQuery와 validate js 파일을 임포트 합니다.

그리고 form 태그 아래(위에 있으면 안먹히기도 하더군요 -_-) <script type="text/javascript"> 구문을 추가하고 아래와 같이 입력합니다.

$("#joinForm").validate({ // joinForm에 validate를 적용
	rules:{
		id:{required:true, rangelength:[5,10]}, 
		// required는 필수, rangelength는 글자 개수(5~10개 사이)
		pwd:{required:true, rangelength:[5,15]},
		pwdConfirm:{required:true, equalTo:"#pwd"}, 
		// equalTo : id가 pwd인 값과 같아야함
		name:"required", // 검증값이 하나일 경우 이와 같이도 가능
		personalNo1:{required:true, minlength:6, digits:true},
		// minlength : 최소 입력 개수, digits: 정수만 입력 가능
		personalNo2:{required:true, minlength:7, digits:true},
		email:{required:true, email:true},
		// email 형식 검증
		blog:{required:true, url:true}
		// url 형식 검증
	}
});

보다시피 rules 속성안에 지정해주시면 됩니다.

rules 내 속성이름인 id,pwd,pwdConfirm 등은 input 태그의 name 속성 값 입니다.

여러개의 값을 지정할 경우 배열의 형태로 {} 를 통해 넣어주시면 됩니다.

각 속성이나 속성내 값들은 ,로 구분합니다.

직관적이라 보시면 코드만 보셔도 이해될 것이라고 생각합니다.ㅎㅎ

(equalTo의 값은 id 속성이 와야 합니다.)

적당히 입력하고.. submit을 땋! 누르면 ( onkeyup,onblur 이벤트로 적용되는 것도 있습니다.)

적당히 이런식으로 나오는 군요 ㅎㅎ 상당히 편합니다.

지원하는 규칙

1	required:true	필수 입력
2	remote:"check.php"	ajax로 check.php를 호출하여 입력값 검증 (id 중복체크에 활
3	email:true	전자우편 형식
4	url:true	URL 형식
5	date:true	날짜 형식
6	dateISO:true	날짜 형식 (ISO) 예: 2009-06-231998/01/22
7	number:true	숫자 (음수,소수 가능).
8	digits:true	정수
9	creditcard:true	카드 번호
10	equalTo:"#field"	#filed 의 입력값과 같아야 함
11	maxlength:5	최대 5글자
12	minlength:10	최소 10글자
13	rangelength:[5,10]	5 ~ 10글자 사이
14	max:5	50 초과 값 입력 불가
15	min:10	10 미만 값 입력 불가

뭐 이정도만 해도 좋지만, 입력값 검증이 잘못되었을 경우 나오는 메시지를 직접 정의할 수 있습니다.

messages 속성을 사용하면 됩니다.

아까의 스크립트 구문을 수정해보겠습니다.

$("#joinForm").validate({ // joinForm에 validate를 적용
	rules:{
		id:{required:true, rangelength:[5,10]}, 
		// required는 필수, rangelength는 글자 개수(5~10개 사이)
		pwd:{required:true, rangelength:[5,15]},
		pwdConfirm:{required:true, equalTo:"#pwd"}, 
		// equalTo : id가 pwd인 값과 같아야함
		name:"required", // 검증값이 하나일 경우 이와 같이도 가능
		personalNo1:{required:true, minlength:6, digits:true},
		// minlength : 최소 입력 개수, digits: 정수만 입력 가능
		personalNo2:{required:true, minlength:7, digits:true},
		email:{required:true, email:true},
		// email 형식 검증
		blog:{required:true, url:true}
		// url 형식 검증
	},
	messages:{ // rules에 해당하는 메시지를 지정하는 속성
		id:{
			required:"ID를 입력하세요", // 이와 같이 규칙이름과 메시지를 작성
			rangelength:"5글자 이상, 10글자 이하여야 합니다."
		},
		pwd:{
			required:"패스워드를 입력하세요",
			rangelength:"5글자 이상, 15글자 이하여야 합니다"
		},
		pwdConfirm:{
			required:"패스워드를 다시 입력하세요",
			equalTo:"패스워드가 다릅니다"
		},
		name:{
			required:"이름을 입력하세요"
		},
		personalNo1:{
			required:"주민번호 앞자리를 입력하세요",
			minlength:"최소 6자리를 입력해야 합니다",
			digits:"정수만 입력 가능합니다"
		},
		personalNo2:{
			required:"주민번호 뒷자리를 입력하세요",
			minlength:"최소 7자리를 입력해야 합니다",
			digits:"정수만 입력 가능합니다"
		},
		email:{
			required:"Email을 입력하세요",
			email:"Email 형식이 아닙니다"
		},
		blog:{
			required:"블로그 주소를 입력하세요",
			url:"URL 형식이 아닙니다(http:// 필수)"
		}
	}
});

쉼표 입력하시고 messages 속성에 위와 같이 작성하면 됩니다.

메시지들은 위에 작성한 rule에 위배될 경우 나오는 메시지들을 정의한 것입니다.

작성한 규칙에 맞게 messages 들을 작성해주시면 됩니다.

보다시피 잘 적용되네요 ㅎㅎ

참고로 입력값 오류시 나타나는 텍스트들은 label 태그들이며 class 이름은 error 입니다.

적절히 css를 추가하여 꾸며보시면 되겠습니다.

원래 에러메시지는 input 태그의 오른쪽에 나타나지만, 저는

#joinForm input +.error{display:block; color:red;}

와 같이 줌으로써 아래로 내려가게 해뒀네요. 색상은 붉은색으로요.

messages 를 alert로 나타내기

위와 같이 input 타입 근처에 텍스트로 메시지가 나타나는 것이 마음에 안드시는 분들도 계실겁니다.

굳이 텍스트가 아닌 alert로도 메시지를 표현할 수 있습니다.

$.validator.setDefaults({
    onkeyup:false,
    onclick:false,
    onfocusout:false,
    showErrors:function(errorMap, errorList){
        if(this.numberOfInvalids()) { // 에러가 있을 때만..
            alert(errorList[0].message);
            $(errorList[0].element).focus();
        }
    }
});

$("#joinForm").validate({
	// validate 설정 ...

스크립트에 위의 구문을 추가하시면 메시지가 alert 창으로 나타납니다.

message와 해당 메시지 input 태그에 포커스를 맞춰주는 스크립트입니다.

여기까지입니다.

유용하게 활용합시다 ~!!