Skip to content

CHICPRO

  • Life Log
  • Cycling Log
  • Photo Log
    • Portrait
    • Landscape
    • Flower
    • Etc
  • Coding Log
  • Information

jQuery Validation 플러그인을 이용한 회원 가입폼 체크

2012-01-06 by 편리

회원 가입 폼 체크에서 jQuery Validation 플러그인을 활용하면 폼 체크를 비교적 간단히 할 수 있다.

<script type=”text/javascript”>
$(function() {
    $.validator.setDefaults({
        onkeyup:false,
        onclick:false,
        onfocusout:false,
        showErrors:function(errorMap, errorList){
            if(this.numberOfInvalids()) {
                alert(errorList[0].message);
            }
        }
    });

    $(‘form[name=fmember]’).validate({
        rules: {
            mb_id: { required: true, minlength: 4 },
            mb_password: { required: true, minlength: 6 },
            mb_password_re: { equalTo: “#mb_password” },
            mb_name: “required”,
            mb_birth: “required”,
            mb_zip1: “required”,
            mb_addr2: “required”,
            tel1: “required”,
            tel2: “required”,
            hp1: “required”,
            hp2: “required”,
            hp3: “required”,
            mb_email: { required: true, email: true }
        },
        messages: {
            mb_id: {
                required: “아이디를 입력해 주십시오.”,
                minlength: “아이디를 4글자 이상 입력해 주십시오.”
            },
            mb_password: {
                required: “비밀번호를 입력해 주십시오.”,
                minlength: “비밀번호를 6글자 이상 입력해 주십시오.”
            },
            mb_password_re: {
                equalTo: “비밀번호가 일치하지 않습니다.”
            },
            mb_name: {
                required: “성명을 입력해 주십시오.”
            },
            mb_zip1: {
                required: “주소를 입력해 주십시오.”
            },
            mb_addr2: {
                required: “상세주소를 입력해 주십시오.”
            },
            tel1: {
                required: “전화번호를 입력해 주십시오.”
            },
            tel2: {
                required: “전화번호를 입력해 주십시오.”
            },
            hp1: {
                required: “휴대전화번호를 입력해 주십시오.”
            },
            hp2: {
                required: “휴대전화번호를 입력해 주십시오.”
            },
            hp3: {
                required: “휴대전화번호를 입력해 주십시오.”
            },
            mb_email: {
                required: “이메일 주소를 입력해 주십시오.”,
                email: “올바른 형식의 이메일 주소를 입력해 주십시오.”
            },
            mb_birth: {
                required: “생년월일을 입력해 주십시오.”
            }
        },
        submitHandler: function(form) {
           var pattern1 = /(^[a-zA-Z])/;
            var pattern2 = /([^a-zA-Z0-9-_])/;
            var mb_id = $.trim($(‘input[name=mb_id]’).val());

            if(!pattern1.test(mb_id)){
                alert(“아이디의 첫글자는 영문이어야 합니다.”);
                return false;
            }

            if(pattern2.test(mb_id)){
                alert(“아이디는 영문, 숫자, -, _ 만 사용할 수 있습니다.”);
                return false;
            }

            form.submit();
        }
    });
});
</script>

근데.. 이렇게 코드를 짜놓고 있긴 하지만.. 이게 에러가 없이 제대로 작동되는지는 좀 더 많은 테스트가 필요하다.
일단 간단하게 테스트할 때는 이상없이 잘 되었는데.. 어떤 상황에서 어떤 일이 일어날지는 아무도 모르기 때문이다.

Post navigation

Previous Post:

회원 가입시 정규식을 이용한 아이디 체크

Next Post:

갤럭시 넥서스와 ipTime 공유기의 WiFi 끊김과 속도 저하 문제 해결

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Recent Posts

  • SK 세븐모바일 유심 셀프교체
  • php 배열 연산에서 + 와 array_merge 의 차이
  • pcntl_fork 를 이용한 다중 프로세스 실행
  • 아이폰 단축어를 이용하여 주중 공휴일엔 알람 울리지 않게 하기
  • 구글 캘린더 전체일정 재동기화
  • OpenLiteSpeed 웹서버에 HTTP 인증 적용
  • OpenLiteSpeed 웹어드민 도메인 연결
  • WireGuard를 이용한 VPN 환경 구축
  • Ubuntu 22.04 서버에 OpenLiteSpeed 웹서버 세팅
  • 맥 vim 세팅

Recent Comments

  • 편리 on 업무관리용 그누보드 게시판 스킨
  • 임종섭 on 업무관리용 그누보드 게시판 스킨
  • 캐논 5D 펌웨어 | Dslr 펌웨어 업그레이드 방법 82 개의 베스트 답변 on 캐논 EOS 30D 펌웨어 Ver 1.0.6 , EOS 5D 펌웨어 Ver 1.1.1
  • Top 5 캐논 5D 펌웨어 Top 89 Best Answers on 캐논 EOS 30D 펌웨어 Ver 1.0.6 , EOS 5D 펌웨어 Ver 1.1.1
  • 편리 on 워드프레스 애니메이션 gif 파일을 mp4로 변환하여 출력하기
  • 임팀장 on 워드프레스 애니메이션 gif 파일을 mp4로 변환하여 출력하기
  • 편리 on Notepad++ NppFTP 플러그인 수동 설치
  • paul-j on Notepad++ NppFTP 플러그인 수동 설치
  • YS on Windows 10 iCloud 사진 저장 폴더 변경
  • 편리 on Docker를 이용한 Centos7 + httpd + php 5.4 개발환경 구축

Meta

  • Log in
  • Entries feed
  • Comments feed
  • WordPress.org
© 2025 CHICPRO | Built using WordPress and SuperbThemes