요즘 소셜커머스에보면 잔여시간 하면서 막 나오잔아요... ^^;
 간단하게 구현해본 타이머 기능입니다.

간단한 소스니까 응용해서 사용하시면 좋을것 같습니다...


 $(document).ready(function() {

  // 총 남은시간 갱신
  var timeLeft = 500; // 초 단위
  
  var num = function(str)
  {
   if(str<10)
    return '0'+str;
   else
    return str;
  }

  var updateLeftTime = function() {
   timeLeft = (timeLeft <= 0) ? 0 : -- timeLeft;
   
   var hours = num(Math.floor(timeLeft / 3600));
   var minutes = num(Math.floor((timeLeft - 3600 * hours) / 60));
   var seconds = num(timeLeft % 60);
    
   $('#t_left_time').html(hours+':'+minutes+':'+seconds);
  }  

  updateLeftTime();
  setInterval(updateLeftTime, 1000);

 });

<span id="t_left_time">00:00:00</span>

 jQuery 동영상 강의 입니다...

 

 외쿡 사람이라 외쿡 말로 진행됩니다만,

 한편한편이 짧아서 지루하지가 않고...

 쉽게 잘 설명하네요... ( 영어는 잘 모르지만... ^^ )

 

해당 강좌의 소스까지 있으니 많은 도움이 되리라 생각됩니다...

 

  • Day 1
  • Day 2
  • Day 3
  • Day 4
  • Day 5
  • Day 6
  • Day 7
  • Day 8
  • Day 9
  • Day 10
  • Day 11
  • Day 12
  • Day 13
  • Day 14
  • Day 15
  • 프로그래머들에게 가장 짜증나게 하는게 바로 폼체크가 아닌가 생각됩니다.

    사실 간단한듯 하면서도 짜증나서 예전에 만들어놓은거 대충 가져다 쓰는중이었습니다.

     

    새로이 프로젝트를 진행하면서 기존 '아이디 중복체크' 버튼등을 빼고싶다는 생각이 들었습니다.

    관련 자료를 찾아보니 J-Query Plugin 중에 Validation라는 것이 있더군요.

    ( 관련자료 : http://docs.jquery.com/Plugins/Validation )

     

    그러나 한국에서는 약간 맞지 않은게 보였습니다.

    맞지 않다기보다 지원하지 않는 것이랄까요?

    그래서 필요한 기능을 플러그인에 추가해 넣기로 했습니다.

     

    제가 필요한것은

     

    1. 한글만 입력가능
    2. 영문만 입력가능
    3. 한글 및 영문만 입력가능
    4. 주민번호 유효성 체크
    5. 사업자번호 유효성 체크


     

    위 5가지 정도였습니다.

     

    일단 구현 예제부터 확인해보시길 바랍니다..

     

    http://test.love2u.be/20100408/

     

    소스를 보시면 아시겠지만 굉장히 간단하게 구현이 되어있습니다.

    한번의 작업으로 편하게 할수 있게 되었군요...

     

    J-Query는 따로 받으시면 되구요.

    수정된 플러그인은 이걸 받으시면 됩니다.

     

    일단 사용하시려면 해당페이지에

    J-Query와 Validation 플러그인을 넣으셔야 합니다.

     

    이런식으로 넣으면 되요.. ^^;

    <script type="text/javascript" src="/js/jquery-1.4.2.min.js"></script>
    <script type="text/javascript" src="/js/jquery.validate.js"></script>


     

    사용하실때는 기본적인 J-Query 문법을 따릅니다.

     

      $(document).ready(function() {

       $("#form").validate({
        rules: {
         id:{required: true,minlength: 4,remote: {type:"post", url:"/20100408/check_id.php"}}    },

        messages: {
         id: {required: "아이디를 입력하시오",minlength: jQuery.format("{0}자 이상"),remote: "이미 등록된 아이디"}
        }

       });
      });


     

    rules에 기본적인 규칙들을 넣으시면 되요..

    required: true 란 필수항목이란 것이구요.

    minlength: 4 란건 최소길이 4자 라는 겁니다.

     

    룰은 이것말고도 많이 있는데요.

    여기선 다 다루지 않겠구요.

    http://docs.jquery.com/Plugins/Validation

    여기 가시면 자세하게 나와있습니다.

    영문이긴 하지만 자세히보면 너무 쉬운 영어들이예요.

    영어에 문외한인 저도 알아보니까요... ^^;

     

    위 소스에서 유의해서 보실 부분은 remote 란 부분인데요.

    remote 뒷부분인 url에 /20100408/check_id.php이곳으로 데이터를 post 방식으로 보내게 됩니다.

     

    그리고 messages 은 해당 조건에 만족하지 못할때 뿌려지는 메세지 입니다..

    쉽죠??

     

    check_id.php 에서는 true 와 false 로 응답을 해주시면 되는데요...

     

    <?
     if($_POST['id']=="dexter" or $_POST['id']=="love2u" or $_POST['id']=="guest") echo 'false';
     else echo 'true';
    ?>


     

    일단 저는 이렇게 적용하였습니다.

    Sql과 연동하셔서 처리하시면 실시간 중복 체크가 완성이 되겠지요??

    POST로 보냈기 때문에 $_POST로 받았습니다...

     

    음.... 역시 전 누구를 가르킬 체질이 안되나 봅니다... --;

    어떻게 설명해야할지 감이 잘 안서네요.. ^^;;;

     

    머 이런식으로 사용하심 되구요... ( 너무 대충 넘어가나요?? ^^; )

    그냥 예제 소스를 올리겠습니다...

     

     

     

    음...jquery.validate.js 파일의 수정 부분을 간단하게 설명해 볼께요...

    사실 그냥 사용하시려면 아래는 안보셔도 되요....

    우선 추가한 부분은 제가올린 소스 기준으로 245번째 줄을 보면

     

      kor: "한글만 입력가능합니다.",
      eng: "영문만 입력가능합니다.",
      kor_eng: "한글과 영문만 입력가능합니다.",
      ssn: "주민번호가 바르지 않습니다.",
      bssn: "사업자번호가 바르지 않습니다.",
      number: "번호만 입력 가능합니다.",


     

    messages안의 부분이있습니다.

    저 위의 rules에서 볼때  messages 에서 설정이 안되어있으면 나올 메세지 입니다.

     

    724~728줄에 classRuleSettings 을 지정 하였구요...

     

    1000번째 줄에 보면

    kor: function(value, element) {
       return this.optional(element) || /^[가-힣]+$/.test(value);
      },

     

    는 한글만 체크하기 위해 정규식을 썻구요...

    그 아래 eng,kor_eng 도 마찬가지구요...

     

    그리고 이건 주민번호 체크와 사업자번호를 체크하기위해 넣었습니다.


      ssn: function(value, element) {

       value = value.replace("-", "");
       
       if (/[^0-9-]+/.test(value))
        return false;

       var ssnCheck = 0;
       for (var i = 0; i < 12; i++) {
        ssnCheck += (i % 8 + 2) * value.charAt(i);
       }
       ssnCheck = (11 - ssnCheck % 11) % 10;

       if(ssnCheck != value.charAt(12)) {    
        return false;
       }

       return true;
      },      

      bssn: function(value, element) {

       value = value.replace("-", "");
       value = value.replace("-", "");
       
       var sum = 0;
       var getlist =new Array(10);
       var chkvalue =new Array("1","3","7","1","3","7","1","3","5");
       for(var i=0; i<10; i++) { getlist[i] = value.substring(i, i+1); }
       for(var i=0; i<9; i++) { sum += getlist[i]*chkvalue[i]; }
       sum = sum + parseInt((getlist[8]*5)/10);
       sidliy = sum % 10;
       sidchk = 0;
       if(sidliy != 0) { sidchk = 10 - sidliy; }
       else { sidchk = 0; }
       if(sidchk != getlist[9]) {
        return false;
       }
       return true;
      },

     

    지금까지 설명드린 나중에 rules에 추가해서 사용하실 수 있도록 한것입니다.

     

    일단 소스를 찬찬히 보시면 답이 튀어 나올듯 합니다...

    제 글을 읽어주실 분들이 어떤분들인지 모르니 어떻게 설명을 드려야 할지 모르겠네요...

    너무 깊숙히 접근하면 내용이 너무 길어질것같고 대충 적으면 성의 없어보이고...

     

    그냥 사용하시다가 궁굼하거나 막히는게 있으시면 아래 댓글을 달아주세요...

    그럼 답변 드리도록 하겠습니다.. 그게 좋겠져?? ^^;

     

    대단한것도 아니고 어려운것도 아닙니다...

    당장 모르신다고해도 천천히 보시면 다 이해 가시리라 믿습니다...

     

    별것도 아닌걸 포스팅했는지도 모르겠네요...

    어째든 어느분에겐 도움이 되었으면 합니다... ^^;

    끝으로 포스팅을 해야겠다는 자극을 주신 일현님께도 감사를... ^^;

     

    퍼가실땐 출처를 남겨주세요~~ ^^;

     

     

    1. defle 2010.05.04 22:23 신고

      꼭 필요한 건 다 말씀하신거 같네요. ^^

      좋은 내용 감사합니다.

    2. 드렁크수달 2010.05.10 04:51 신고

      좋은글 감사합니다. 정규식 내용만 퍼갑니다. ^^ 혹시 일현님이 그누보드에 일현님은 아시겠지요? ㅎㅎ;;

    3. 오호 2010.07.12 18:05 신고

      오호 감사합니다. ^^

    4. 질문자 2010.08.11 16:17 신고

      먼저 좋은글 감사드립니다
      validate 의 정규식에서 한글/한글_영문에 오류가 있어 문의를 드릴려고 합니다
      charset=euc-kr 에서 올려주신 파일을 적용하니
      "잘못된 범주의 문자집합입니다" 라고 뜨는데 혹시 해결 방법이 있는가 싶어
      글을 올립니다..;;
      글을 보시면 답변 부탁드립니다...

      • Dexter.Park 2010.08.17 21:25 신고

        euckr은 송수신시 문제가 생기는걸로 알고있습니다.
        euckr에서 사용하시려면 utf8로 변경하신후 보내셔야 합니다.

    5. 나이유미 2010.11.30 21:09 신고

      정말 감사합니다. 꾸벅 (__);

    6. 나그네 2011.03.09 17:33 신고

      그런데 jquery 1.5 에서는 잘 안되는군요..

      • Dexter Park 박용섭 2011.11.21 15:18 신고

        버젼 1.4.2때 만들었구요.
        1.6.2 에서 테스트 해보았으나 정상적으로 작동하고 있습니다.

    7. 누시 2011.12.08 20:36 신고

      감사합니다. 몇일을 고생 고생하다가 제가 원하는것을 찾았습니다. 꾸뻑
      이리도 자세히 적어주셔서 정말로 감사합니다.
      다름이 아니라 지금 아이디에 조건을 더 넣을려고 합니다.
      예를 들어 영문과 숫자만 그리고 중간에 공백 불허 등등을 더 넣을려고 하는데요 조건을 더 넣을려면 어떻게 해야 할까요?
      그리고 처음부터 조건을 명시하는 문구가 나와 있었음 하는데요.....
      마지막으로 성공을 했을때 오케이 아이콘 다음에 문구를 넣고 싶습니다.
      너무나 초보적인 질문 드려서 죄송합니다.
      다시금 좋은 소스 주셔서 정말로 감사히 잘 쓰겠습니다.

    작년 구입했던 제이쿼리(jquery) 책을 열어보기 시작했다.

     

    "그냥 자바스크립트 편하게 해주겠지머... 그래봐야 머 하려면 어차피 수정해서 써야하는것 아니겠어!"

    라는 마음에 별 대수롭지않게 넘겼던 제이쿼리... 하지만... 오호~ 물건인데~~ 로 생각이 바뀌었다...

     

    이제부터 본격적으로 공부하기로 마음 먹고 다름사람과 공유하기위해 글을 시작한다.

    예전 어디선가 받았던 파일을 공유한다.. 셀렉터라던가 필요한 것을 모아놓은것으로 책상머리앞에 붙여놓으니 좋은것 같다... 출처는 기억이 나질 않네... --;;

    모두 제이쿼리 매력에 빠져보았으면 한다...

     

    '개발 > 옛날꺼' 카테고리의 다른 글

    PEAR로 메일을 보내는 3가지 방법  (0) 2010.02.01
    PEAR로 PHP 프로그램 캐싱하기  (0) 2010.02.01
    [펌] jQuery 유용한 플러그인 모음.  (0) 2010.02.01
    PHP 내장 함수 2  (0) 2010.01.15
    J-Query 플러그인  (0) 2009.11.17
    jQuery를 시작하며...  (0) 2009.11.06

    + Recent posts

    티스토리 툴바