자바스크립트 폼 검사

운영자 | 기사입력 2012/12/02 [13:28]
>
필자의 다른기사 보기 인쇄하기 메일로 보내기 글자 크게 글자 작게
자바스크립트 폼 검사
 
운영자   기사입력  2012/12/02 [13:28]
http://kldp.net/projects/tle/download/note/1515
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ko" lang="ko">
<head>
 <meta http-equiv="content-type" content="text/html; charset=euc-kr" />
 <title>폼검증 테스터</title>
 <script type="text/javascript" src="../TLE.js"></script>
 <style>
 .required {
  color: red;
 }
 </style>
</head>
<body>
<form name="f">
 아이디 <span class="required">(*)</span>: <input type="input" name="id"><br/>
 이름 <span class="required">(*)</span>: <input type="input" name="name"><br/>
 이메일 <span class="required">(*)</span>: <input type="input" name="email"><br/>
 나이: <input type="input" name="age"><br/>
 숫자: <input type="input" name="decimal"><br/>
 성별: <input type="radio" name="sex" value="m">남 / <input type="radio" name="sex" value="f">여<br/>
 직업: <select name="job">
  <option>직업을 선택하세요</option>
  <option>직업1</option>
  <option>직업2</option>
  <option>직업3</option>
 </select><br/>
 약관동의: <input type="checkbox" name="contract" value="true"> <br/>
 <input type="button" value="체크" onClick="checkForm()">
</form>
<script language="JavaScript">
var checker = new FormChecker(document.f);
checker.checkRequired('id', '아이디를 입력하세요', true);
checker.checkAlphaNum('id', '아이디는 알파벳과 숫자만 입력하세요', true);
checker.checkMinLength('id', 2, '아이디는 최소 두글자 입력하세요', true);
checker.checkRequired('name', '이름을 입력하세요', true);
checker.checkMaxLength('name', 5, '이름은 최대 5글자까지 입력하세요', true);
checker.checkMaxLengthByte('name', 8, '이름은 최대 8바이트까지 입력하세요', true);
checker.checkRequired('email', '이메일 주소를 입력하세요', true);
checker.checkEmail('email', '올바른 이메일 주소를 입력하세요', true);
checker.checkOnlyNumber('age', '나이는 숫자만 입력하세요', true);
checker.checkDecimal('decimal', '올바른 숫자를 입력하세요', true);
checker.checkAtLeastOneChecked('sex', '성별을 선택하세요', true);
checker.checkSelected('job', 1, '직업을 선택하세요', true);
checker.checkAtLeastOneChecked('contract', '약관에 동의하세요', true);
function checkForm() {
 if (checker.validate()) {
  alert("값 검증 통과");
 }
}
</script>
</body>
</html>
트위터 트위터 페이스북 페이스북 카카오톡 카카오톡
기사입력: 2012/12/02 [13:28]  최종편집: ⓒ iwav