프로그래머들에게 가장 짜증나게 하는게 바로 폼체크가 아닌가 생각됩니다.

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

 

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

관련 자료를 찾아보니 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 신고

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

+ Recent posts

티스토리 툴바