CMS솔루션마켓, 이온디 - 워드프레스, 라이믹스, 카페24, 그누보드, 엑셀

홈페이지 제작팁

Home Study WEB 퍼블팁 jQuery

jquery Validation

2015년 08월 13일

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|작성자 빼빼로

 
댓글은 로그인 사용자만 작성 가능합니다. 로그인하기