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