validate 플러그인 설치
validate란 무엇인가?
form 안에 입력된 값을 검증할 수 있도록 한 플러그인이다.
이 플러그인을 사용해서 검증에 통과하지 못 할 경우 통과 못한 값의 아래에 에러 문구가 출력되면서 submit 되는 것을 막아준다.
validate의 사용 전 설치
1. validate에 관한 파일을 설치하기 위해 https://jqueryvalidation.org/ 에 접속한다. 해당 사이트에 validate의 소개에 대한 영상을 보는 것을 추천한다. (영어로 소개하기 때문에 약간 울렁거릴 수 있음)
2. Download를 클릭하면 Github로 이동이 된다. jquery-validation-1.17.0.zip를 클릭해서 해당 zip 파일을 다운 받은 후 압축을 풀도록 한다.
3. 압축 푼 폴더에서 dist 폴더에 들어 간 후 additional-methods.js와 jquery-validate.js, 그리고 localization폴더 안에 있는 message_ko.js를 복사한다.
(*.min 파일 받아도 상관없음 *.min파일은 한 줄로 소스가 적혀있어 가독성은 떨어지지만 파일의 용량이 더 적기 때문에 소스확인 할 필요 없으면 *.min 파일들을 복사한다)
4. 아래와 같이 사용하고자하는 프로젝트의 src/main/webapp/resources/js/validate 안에 복사했던 파일을 붙여넣는다. (폴더가 없을 경우 생성)
5. 모든 view에서 사용하기 위해 include 폴더를 하나 만든 다음 그 안에서 head.jsp 파일을 만들고 아래 소스를 추가한다.
※여기서 순서가 중요한데 jquery.validate.js 파일은 jquery를 기반으로 만들어진 소스여서 jquery-3.3.1.min.js 파일보다 아래에 선언되어야 한다.
그리고 additional-methods.js와 messages_ko.js 파일은 jquery-3.3.1.min.js와 jquery.validate.js의 아래에 선언되어야 한다.
<script type="text/javascript" src="${_ctx}/res/js/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="${_ctx}/res/js/validate/jquery.validate.js"></script>
<script type="text/javascript" src="${_ctx}/res/js/validate/additional-methods.js"></script>
<script type="text/javascript" src="${_ctx}/res/js/validate/localization/messages_ko.min.js"></script>
6. 모든 view 파일에서 head.jsp를 가져다 쓰기 위해 태그 안에
<c:import url="/WEB-INF/views/inc/head.jsp" />
validate 사용법
Rules | 설명 |
required | 입력 필수 항목설정. text, password, select, radio, checkbox type에 사용된다. ex) required : true |
remote | 외부 URL을 이용한 validation이 필요한 경우 사용한다. |
equalTo | 다른 FORM 항목과 동일한 값인지 체크한다. |
minlength | 최소 길이 체크. ex) minlength : 3 |
maxlength | 최대 길이 체크. ex) maxlength : 10 |
rangelength | 길이 범위 체크. ex) rangelength : [2, 6] (2글자 이상 6글자 이하) |
min | 숫자의 최소값 체크. ex) min : 13 (13보다 작을 경우 false) |
max | 숫자의 최대값 체크. ex) max : 5 (5보다 클 경우 false) |
range | 숫자의 범위 체크. ex) range : [13, 24] (13보다 작거나 24보다 클 경우 false) |
이메일 형식의 값인지 체크. ex) email : true | |
url | 유효한 url 형식인지 체크. ex) url : true |
date | 유효한 날짜 형식의 값인지 체크 |
dateISO | 유효한 국제표준 날짜 형식인지 체크. ex) dateISO : true |
number | 유효한 숫자인지 체크. ex) number : true |
digits | 유효한 digit 값인지 체크. number와 다른점은 양의 정수만 허용한다. 즉, 소수와 음수일 경우 false |
creditcard | 유효한 카드번호 형식인지 체크. 공식페이지에서는 creditcard rule을 그대로 적용하지 말고 현지 사정에 맞게 수정하라고 권장한다. ex) creditcard : true |
참조 : https://m.blog.naver.com/PostView.nhn?blogId=islove8587&logNo=220695921701&proxyReferer=https%3A%2F%2Fwww.google.com%2F