<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jQuery폼유효성</title>
<SCRIPT src="/FBZ/js/jQuery1-4-4.js" language="javascript"></SCRIPT>
<SCRIPT src="/FBZ/js/jquery.form.js" language="javascript"></SCRIPT>
<SCRIPT language="javascript">
$(document).ready(function() {
$('#test').click(function(){ TEST(); });
});
function TEST(){
/*
* 유효값체크구문
* 검사할개체아이디:실행함수1,실행함수2,..실행함수n #인수1 #인수2..
*/
var chk_rule = "name:isEmpty"
+"@id:isEmpty"
+"@pwd:isEmpty,isNumber"
+"@re_pwd:isEmpty,isNumber,eqVal#pwd#re_pwd" //인수pwd ,re_pwd
+"@tel:isEmpty,isNumber"
+"@email:isEmail"
+"@ssn1:isEmpty,isNumber"
+"@ssn2:isEmpty,isNumber,isSSN#ssn1#ssn2"
;
if(validateForm(chk_rule)){
console.log("validate success!!");
}
}
//폼 유효성 검사하는 함수들
//값이 없는경우 체크하는 함수
function isEmpty(obj){
return obj.val().trim() != "";
}
//두 값이 같은지 체크하는 함수
function eqVal(obj1 , obj2){
return obj1.val() == obj2.val();
}
//값이 숫자만 인지 체크
function isNumber(obj){
var reg = /^\d+$/;
return reg.test(obj.val());
}
//유효한 이메일인지 체크
function isEmail(obj){
var reg = /^((\w|[\-\.])+)@((\w|[\-\.])+)\.([A-Za-z]+)$/;
return reg.test(obj.val());
}
//유효한 주민번호인지 체크
function isSSN(obj1 , obj2){
var jumin = obj1.val()+obj2.val();
if (jumin.length != 13) return false;
var tval = jumin.charAt(0)*2 + jumin.charAt(1)*3 + jumin.charAt(2)*4
+ jumin.charAt(3)*5 + jumin.charAt(4)*6 + jumin.charAt(5)*7
+ jumin.charAt(6)*8+ jumin.charAt(7)*9 + jumin.charAt(8)*2
+ jumin.charAt(9)*3 + jumin.charAt(10)*4 + jumin.charAt(11)*5;
var tval2 = 11- (tval % 11);
var tval2 = tval2 % 10;
return (jumin.charAt(12) == tval2 && (jumin.charAt(6) == "1" || jumin.charAt(6) == "2"));
}
//통합 폼 유효성 검사
function validateForm(chk_rule){
var chk_line = chk_rule.split("@"); //@로 분리해서 배열로 만든다.
var validate = true; // 이 값이 false 가되면 전체 경고창을 띠우고 루프문을 빠져나간다.
//@분리한것들 루프돌리기
$.each(chk_line , function(index , line){
if(!validate) return false;
var element = line.split(":");
var obj = $('#'+element[0]); //:로 분리해서 첫번쨰 문자는 속성을 검사할 객체다.
var fn_list = element[1].split(","); //:로 분리시 두번쨰부터는 함수리스트다 ,로 다시 쪼갠다.
//함수들 루프돌리자!
$.each(fn_list , function(index , fns){
var args = fns.split("#"); //#으로 쪼개서 두번째거부턴 인수다.
var fn = args[0]; // 실행함수 문자열
//유효성 체크시작 문자열로 비교해 해당하는 함수 실행
if(fn == "isEmpty"){
validate = isEmpty(obj);
}else if(fn == "isNumber"){
validate = isNumber(obj);
}else if(fn == "eqVal"){
validate = eqVal($('#'+args[1]) , $('#'+args[2]));
}else if(fn == "isEmail"){
validate = isEmail(obj);
}else if(fn == "isSSN"){
validate = isSSN($('#'+args[1]) , $('#'+args[2]));
}
//함수실행후 false 가 나오면 적당한 alert 띠우고 해당객체에 포거스 주고 빠져나간다.
if(!validate){
alert(message[fn]);
obj.focus();
return false;
}
});
});
return validate;
}
//alert 창 띄울떄 쓰는 메시지들 함수명이랑 맞춘다.
var message = {
"isEmpty":"값이 비었습니다."
,"isNumber":"숫자만 입력할수 있습니다."
,"eqVal":"두 값이 동일"
,"isEmail":"유효하지 않은 이메일"
,"isSSN":"유효하지 않은 주민번호"
};
</SCRIPT>
</head>
<body>
<DIV style="border:dotted;border-color:blue">
<FORM name="form01" id="form01">
name:<INPUT type="text" name="name" id="name"><br/>
id:<INPUT type="text" name="id" id="id"><br/>
pwd:<INPUT type="password" name="pwd" id="pwd"><br/>
re_pwd:<INPUT type="password" name="re_pwd" id="re_pwd"><br/>
tel:<INPUT type="tel" name="tel" id="tel"><br/>
email:<INPUT type="text" name="email" id="email"><br/>
ssn:<INPUT type="text" name="ssn1" id="ssn1"> <INPUT type="text" name="ssn2" id="ssn2"><br/>
<INPUT type="button" value="TEST" id="test">
</FORM>
</DIV>
</body>
</html>
[출처] jQuery 폼유효성 간단히 (JSP+WEB) |작성자 포지티브
728x90
'Carpe Programming > javascript' 카테고리의 다른 글
| 숫자만 입력 및 세자리 콤마 찍기 (0) | 2012.07.26 |
|---|---|
| [javascript] 엔터 입력 시 자동 submit 방지 (0) | 2012.04.13 |
| [javascript] Event.KeyCode (0) | 2012.03.28 |
| Jquery SELECT 태그 관련 내용 (0) | 2012.03.22 |
| 오라클의 add_months, months_between 함수를 자바스크립트로(날짜) (0) | 2012.03.20 |