jQuery의 validation(검증) 플러그인 예제 및 사용법
jQuery의 validation(검증) 플러그인이다. 일단 데모 페이지부터 보면 어떤 건지 알 수 있을 것이다.
사용법은 사실 데모 페이지 긁어와서 이름만 고치는 정도로도 알 수 있을 텐데, 몇 가지 써 보자.
두 가지 방법으로 사용할 수 있다. 첫 번째는 심플한 방법이다.
첫 번째 방법
이 방법은 위 데모 페이지에서 위쪽에 있는 예시에 사용된 방법이다.
△이 첫 번째 방법은 javascript 코드가 간단하다는 장점이 있는 반면, 메시지가 영어로 나오고, html 코드에 들어갈 게 많아진다는 단점이 있다. 비표준 어트리뷰트가 사용된다는 점도 단점이다.
1.$(function(){2. // submit 시켰을 때 #form을 검증합니다.3. $("#form").validate();4.});javascript 코드에는 위와 같이 쓰고(물론 jquery.js를 위 코드 전에 호출해야 하는 건 당연하다.) html에는 이렇게 적는 것이다.
01.<form
id="form" method="get" action=""> 02. <fieldset> 03. <legend>잘 적어 주세요</legend> 04. <p> 05. <label for="cname">이름 (필수, 최소
2글자)</label>
06. <input id="cname" name="name" class="required" minlength="2" /> 07. <p> 08. <label for="cemail">E-Mail (필수)</label> 09. <input id="cemail" name="email" class="required email" /> 10. </p> 11. <p> 12. <label for="curl">URL (선택)</label> 13. <input id="curl" name="url" class="url" value="" /> 14. </p> 15. <p> 16. <label for="ccomment">남기실 말씀 (필수)</label> 17. <textarea id="ccomment" name="comment" class="required"></textarea> 18. </p> 19. <p> 20. <input class="submit" type="submit" value="Submit"/> 21. </p> 22. </fieldset> 23.</form>위 코드에서 볼 수 있는 것처럼, html코드에 적어 주면 된다. 정리하면 다음과 같다.
- 필수요소인 경우 class="required" 라고 쓴다.
- email 검증을 해야 하는 경우 class="email"이라고 쓴다.
- 필 수이면서 이메일 검증을 해야 하는 경우에는 복수 클래스 병기하는 방법을 따라 class="required email" 이라고 적으면 되고 나머지도 마찬가지다.
- 최소 글자수가 있는 경우 minlength="숫자" 형태로 적는다.
위와 같은 방법으로 했을 때의 최대 단점은 메시지가 영어로 나온다는 점이다. 필수 요소인데 안 적은 경우 'This field is required.'라는 메세지가 뜬다. 메세지를 한국어로 하고 싶다면 두 번째 방법을 사용하라.
다른 단점도 있다. minlength 라는 어트리뷰트는 웹표준 검증기를 통과하지 못한다. 표준 점수를 깎아먹을 수 있다는 것이다. 그게 사용성보다 중요한 요소는 아니지만, 웹을 잘 모르는 상관들에게는 중요할지 모른다.
두 번째 방법
이 방법은 모든 요소를 javascript 단에서 처리하기 때문에 가장 깔끔한 코드를 생산할 수 있다.
일단 코드를 보자.
01.$(function(){02. // validate signup form on keyup and submit03. $("#signupForm").validate({04. rules: {05. name: "required",06. password: {07. required: true,08. minlength: 809. },10. confirm_password: {11. required: true,12. minlength: 8,13. equalTo: "#password"14. },15. email: {16. required: true,17. email: true18. },19. topic: {20. required: "#newsletter:checked",21. minlength: 222. },23. agree: "required"24. },25. messages: {26. name: "
이름을 입력해 주세요",27. password: {28. required: "암호를 입력해 주세요",29. minlength: "암호는 8자 이상이어야 합니다."30. },31. confirm_password: {32. required: "암호를 한 번 더 입력해 주세요",33. minlength: "암호는 8자 이상이어야 합니다.",34. equalTo: "암호가 일치하지 않습니다."35. },36. email: "형식에 맞는 이메일을 입력해 주세요.",37. agree: "정책 동의에 체크해 주세요"38. }39. });40.});위 에서 눈여겨 볼 점은 validate 안에 들어있는 {} 안쪽 부분이다. 여기 옵션이 들어간다.
이 옵션 중 핵심적으로 사용된 것인 rules 옵션이다.
1.rules: {옵션오브젝트}이 런 형식으로 사용된다. 옵션 오브젝트는 어떻게 구성되는지 보자.
1.{name: "required"}이렇게 씌인 게 있다. 이것은 name이 "name"인 놈은 필수라는 뜻이다. 다른 방식으로 적용할 수도 있는데 한 input(혹은 textarea)에 여러 개의 옵션을 걸 때다.
1.email: {required: true, email: true}이 런 식으로 들어가는데, 이 때 email: true 항목은 당연히 이메일형식 검증을 하겠다는 뜻이다.
rules 옵션 아래쪽에 있는 message 옵션은 rules에 대응되는 메시지들을 적어주면 된다. 위 형식을 참고하면 될 것이므로 굳이 일일이 설명하지 않겠다.
다음 html 코드를 보자.
01.<form
id="signupForm" method="get" action=""> 02. <fieldset> 03. <legend>정보를 입력해 주세요</legend> 04. <p> 05. <label for="name">Lastname</label> 06. <input
id="name" name="name" /> 07. </p> 08. <p> 09. <label for="password">암호</label> 10. <input
id="password" name="password" type="password" /> 11. </p> 12. <p> 13. <label for="confirm_password">암호확
인</label> 14. <input
id="confirm_password" name="confirm_password" type="password" /> 15. </p> 16. <p> 17. <label for="email">Email</label> 18. <input
id="email" name="email" /> 19. </p> 20. <p> 21. <label for="agree">개인정보 보호정책 동의</label> 22. <input
type="checkbox" class="checkbox" id="agree"
name="agree" /> 23. </p> 24. <p> 25. <input class="submit" type="submit" value="제출"/> 26. </p> 27. </fieldset> 28.</form>위 코드는 html 검증을 통과할 수 있는 깔끔한 코드다. label 에 있는 for 어트리뷰트는 웹표준에 맞는 어트리뷰트다. 이 라벨이 어떤 인풋에 대한 것인지, 해당 인풋의 id를 써 주는 부분이다.
그러나 jQuery 검증 플러그인의 자바스크립트 코드에서 위 폼을 인식할 때는 name 어트리뷰트를 기준으로 하는 것이므로, name을 신경쓰면 된다. 즉, label은 선택이니 너무 눈 돌아가지 않아도 된다는 말이다.
name 을 바탕으로 하므로 checkbox나 radio 같은 것도 검증이 가능하게 된다.
필수다! 하는 메시지의 스타일
자, 그럼 required 라고 써준 input에 입력을 안 하고 submit 버튼을 눌렀을 때(이 경우를 '에러가 났을 때'라고 표현하자.) 나올 스타일은 어디서 결정할까?
그건 따로 써줘야 한다. 미리 준비된 css는 제공하고 있지 않은 듯하다.
사용되는 페이지의 head 부분에 아래처럼 써 주면 된다.
두 경우를 제공하겠다. 첫 번째 것은 메시지가 input의 오른쪽에 나오는 디자인이다. 두 번째 것은 메시지가 input의 하단에 나오는 디자인이다. 둘 다 input의 테두리가 빨간 점선으로 변하고, 메시지도 빨간 색으로 뜬다. css 지식이 조금만 있다면 수정해서 자신이 원하는대로 사용할 수 있을 것이다.
01.<style type="text/css">02.input.error,
textarea.error{03. border:1px dashed red;04.}05.label.error{06. margin-left:10px;07. color:red;08.}09.</style>위 스타일이 에러메시지를 input 오른쪽 공간에 띄워 주는 스타일이다.
01.<style type="text/css">02.input.error,
textarea.error{03. border:1px dashed red;04.}05.label.error{06. display:block;07. color:red;08.}09.</style>이 스타일은 에러메시지를 input 하단에 띄워 주는 스타일이다.
jQuery Validation Plugin API 문서
API 문서를 보는 건 항상 귀찮은 일이지만, 유용한 일이기도 하다.
내가 보기에 API 문서 중 핵심은 rules다.
다양한 옵션의 API가 나와있는 주소를 곧장 링크할 테니 참고해서 보기 바란다.
TiCumulus.zip
tag.txt