jQuery Validation 플러그인을 이용한 회원 가입폼 체크
회원 가입 폼 체크에서 jQuery Validation 플러그인을 활용하면 폼 체크를 비교적 간단히 할 수 있다.
$(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>
근데.. 이렇게 코드를 짜놓고 있긴 하지만.. 이게 에러가 없이 제대로 작동되는지는 좀 더 많은 테스트가 필요하다.
일단 간단하게 테스트할 때는 이상없이 잘 되었는데.. 어떤 상황에서 어떤 일이 일어날지는 아무도 모르기 때문이다.