http://blog.naver.com/choiye84/130130406299
jquery validation check plugin 을 발견햇다!.
쓰기 편한것 같고 깔끔한것 같다.
validation말고도
Accordion, Autocomplete, Message, Password Validation 등등이 있다.
쓰기 편하게 되어져 있는것 같고, 한가지 아쉬운 점은 아이디 같은 경우는 ajax로 호출해서 사용유무를 가져왔으면 하는데.. 그 기능이 없는것 같다? 웅?
-,.-
사이트 url은 http://bassistance.de/jquery-plugins/ 이고,
여기 validation에 대해서 자세히? 소개한 어느 블러거님의 url도 같이 ! 투척! http://mytory.co.kr/archives/195
웅웅? jquery 진짜 짱인것 같다. 후후
다른 validation 좀 찾아봐야지~
==================================추가=================================
validation API
http://docs.jquery.com/Plugins/Validation
여기서 보면 remote option도 있어서 ajax로 할 수도 있다!
이번에 찾은 좋은 jquery validation을 찾아서 공유 합니다.ㅎ
먼저 http://bassistance.de/jquery-plugins/jquery-plugin-validation/ 요기서 다운 받으시면 되구요.
API 는 http://docs.jquery.com/Plugins/Validation 여기에 있습니다.
그럼 간단한 설명 하겠습니다.
jquery.validate 를 다운 받습니다.
그리고 자바스크립트 선언을 해줍니다.
<script type="text/javascript" src="/resource/js/validation/jquery.validate.min.js"></script> |
html 코딩
<tr> <th scope="row"><label for="id">아이디</label></th> <td> <div class="item"> <input type="text" name="id" title="" class="i_text" /> </div> </td> </tr> <tr> <th scope="row"><label for="nm">이름</label></th> <td> <div class="item"> <input type="text" id="nm" name="nm" title="" class="i_text" /> </div> </td> </tr> <tr> <th scope="row"><label for="pw">비밀번호</label></th> <td> <div class="item"> <input type="password" id="pw" name="pw" title="" class="i_text" maxlength="15" /> </div> </td> </tr> <tr> <th scope="row"><label for="pwchk">비밀번호 확인</label></th> <td> <div class="item"> <input type="password" id="pwchk" name="pwchk" title="" class="i_text" maxlength="15" /> </div> </td> </tr> |
여기서 주의 할 점은 꼭 <lable> 태그를 추가 해줘야 한다는 것입니다.
js코딩
$("#managerForm").validate({ rules:{ id:{ required:true ,remote:"/remote/getChkUserId.do" } ,nm:"required" ,pw:{ required:true ,minlength:6 ,maxlength:12 } ,pwchk:{ equalTo:"#pw" } ,email:{ required:true ,email:true } } ,messages:{ id:"입력해주세요." ,nm:"입력해주세요." ,pw:{ required:"입력해주세요." ,minlength:"6자 이상" ,maxlength:"12자 이하" } ,pwchk:{ equalTo:"일치하지 않습니다." } ,email:"입력해주세요." }
}); |
validate에는 2개의 오브젝트가 있는데요.
rules와 message 입니다.
rules가 validate 체크 해주는 오브젝트고, message는 유효하지 않을 시 표현하는 메세지입니다.
그리고 remote 옵션을 이용하면 ajax로 아이디값 실시간으로 가져 올 수 도 있습니다.
더 자세한 사항은 위에 나와있는 api url에 가시면 더 자세하고 정확하게?! 확인 하 실 수 있습니다.
css 코딩
input.error, textarea.error{ border:1px dashed red; } label.error{ margin-left:10px; color:red; } input.error, textarea.error{ border:1px dashed red; } label.error{ padding-left:5px; display:inline; color:red; } |
display:inline; 을 block; 으로 바꿔주면 input 태그 밑에 메세지가 표현됩니다^^
이렇게 코딩 해주고 submit 해주면 아래와 같이 나옵니다.
[출처] [jQuery] validation|작성자 빼빼로