HTML 폼에 원하는 값을 입력하지 않을 경우 입력 오류를 경고창(alert)으로 알려주는 것은 이제 기본이 되었다. 예를 들어, 아래와 같은 HTML 폼 코드가 있다고 하자.
<form name="f" ...>
아이디: <input type="text" name="id">
암호: <input type="password" name="password">
<input type="submit" value="로그인">
</form>
위 코드는 "id"와 "passowrd" 입력 요소를 갖는데, 이 둘이 모두 필수 입력요소라고 할 경우 이 폼을 검사하는 자바 스크립트 코드는 아래와 비슷한 형태를 취하게 될 것이다.
<script type="text/JavaScript">
function checkForm() {
form = document.f;
if (form.id.value == '') {
alert("아이디를 입력하세요");
form.id.focus();
return;
}
if (form.password.value == '') {
alert("암호를 입력하세요");
form.password.focus();
return;
}
form.submit();
}
</script>
검사해야 할 요소가 두개인 경우에는 위와 같이 비교적 간단(?)하게 폼 검증 자바 스크립트 코드를 작성할 수 있다. 하지만, 아이디에 영문자와 숫자만 입력할 수 있고, 암호의 길이는 3~15 바이트 이내여야 한다면 위 코드는 좀더 복잡해질 것이다. 입력해야 하는 요소가 상대적으로 더 늘어난다면 위 코드는 더욱 복잡해질 것이다.
이러한 폼 검증 코드의 복잡함을 없애기 위해서 필자는 틀 자바스크립트(TLEJavaScript)를 만들게 되었으며, 쉽고 빠르게 폼 검증 코드를 작성할 수 있도록 하는 것이 틀 자바스크립트의 목적이다.
틀 자바스크립트를 사용하기 위한 준비
틀 자바스크립트 라이브러리는 틀 프로젝트 사이트에서 다운로드 받을 수 있으며, 이 글을 쓰는 시점에서 1.0.0 버전을 출시한 상태이다. TLEJavaScript-1.0.0.zip 파일을 다운로드 받은 뒤 압축을 풀면 아래와 같이 두 파일이 존재하는 것을 확인할 수 있다.
- TLE.js - 틀 자바스크립트 라이브러리. 폼 검증을 위한 자바스크립트 코드가 저장
- test/test.html - 틀 자바스크립트 라이브러리의 사용 예제 코드
test.html을 실행하면 다음과 같은 화면을 볼 수 있다.
그림1 - test.html 실행 화면
위 화면에서 [체크] 버튼을 눌러보면 값이 검증되는 결과를 확인할 수 있을 것이다. test.html은 TLE.js를 사용해서 폼을 검증한다. test.html코드를 보면 기존의 자바 스크립트 코드와 많이 다른 것을 확인할 수 있을 것이다. test.html에서 폼 검증과 관련된 코드 중 일부는 아래와 같다.
<script language="JavaScript">
var checker = new FormChecker(document.f);
checker.checkRequired('id', '아이디를 입력하세요', true);
checker.checkAlphaNum('id', '아이디는 알파벳과 숫자만 입력하세요', true);
checker.checkMinLength('id', 2, '아이디는 최소 두글자 입력하세요', true);
...
</script>
function checkForm() {
if (checker.validate()) {
alert("값 검증 통과");
}
}
위 코드를 보면 이 글의 서두에서 살펴봤던 if-else가 사용된 자바스크립트 코드에 비해 훨씬 알아보기 쉬운 것을 알 수 있다. 폼 검증의 핵심은 틀 자바스크립트가 제공하는 FormChecker 객체인데, 이 객체의 사용방법에 대해서 살펴보도록 하자.
틀 자바스크립트의 FormChecker 객체를 사용한 폼 검증
틀 자바스크립트는 폼 검증을 위한 FormChecker 객체를 제공하는데, 이 객체를 사용하는 방법을 실제 코드를 통해서 살펴보도록 하자.
<form name="f" onSubmit="return checkForm()">
아이디: <input type="text" name="id">
암호: <input type="password" name="password">
<input type="sumit" value="로그인">
</form>
<script type="language/JavaScript">
// 1. FormChecker 객체를 생성할 때 검증할 폼 객체(document.f)를 전달한다.
var checker = new FormChecker(document.f);
// 2. 검사 조건을 추가한다.
checker.checkRequired('id', '아이디 입력하세요', true);
checker.checkMinLength('id', 3, '아이디는 3글자 이상 입력하세요', true);
checker.checkRequired('password', '암호를 입력하세요', true);
function checkForm() {
// 3. 폼 값을 전송하기 전에 폼을 검증한다.
return checker.validate();
}
</script>
FormChecker는 검사 조건을 추가할 수 있는 함수를 제공하는데, 이들 함수는 checkRequired 와 같이 check로 시작한다. checkRequired() 함수의 경우는 입력 요소에 값을 입력했는지의 여부를 검사한다. 예를 들어, 위 코드에서는 'id' 요소에 값을 입력했는 지 검사하고, id 요소에 값을 입력하지 않았을 경우 alert() 함수를 사용해서 '아이디 입력하세요'라는 경고 메시지를 출력한다.
폼 값의 검사는 FormChecker의 validate() 함수를 실행할 때 수행된다. checkRequired 등의 함수를 사용해서 설정한 모든 검증 조건을 통과할 validate() 함수는 true를 리턴하고, 그렇지 않을 경우 false를 리턴한다. validate() 함수는 false를 리턴하기 전에 검증을 통과하지 못한 조건과 관련된 에러 메시지를 출력한다. 예를 들어, 위 검증 코드에서는 id를 최소 3글자 이상 입력하도록 검증조건을 추가했는데, 만약 id의 값을 두 글자만 입력했다면 '아이디는 3글자 이상 입력하세요'라는 오류 메시지를 경고창으로 보여주게 된다.
검증 조건을 추가할 때 사용되는 FormChecker의 함수는 다음과 같다. 아래에서 fieldName은 값을 검증할 입력 요소의 이름을 의미한다. errorMesage는 값 검증을 통과 못했을 때 alert()으로 보여줄 에러 메시지이며, focus가 true이면 값 검증에 실패한 요소에 포커스가 맞춰진다.
- checkRequired(fieldName, errorMessage, focus)
값을 입력했는지의 여부를 검사한다. - checkMaxLength(fieldName, maxLength, errorMessage, focus)
값의 길이가 maxLength보다 작거나 같은지 검사한다. - checkMaxLengthByte(fieldName, maxLength, errorMessage, focus)
값의 바이트 길이가 maxLength보다 작거나 같은지 검사한다. - checkMinLength(fieldName, minLength, errorMessage, focus)
값의 길이가 minLength보다 크거나 같은지 검사한다. - checkMinLengthByte(fieldName, minLength, errorMessage, focus)
값의 바이트 길이가 minLength보다 크거나 같은지 검사한다. - checkAlphaNum(fieldName, errorMessage, focus)
값이 알파벳과 0~9사이의 숫자만 포함하는 지 검사한다. - checkOnlyNumber(fieldName, errorMessage, focus)
값이 0~9 사이의 문자만 포함하는 지 검사한다. - checkDecimal(fieldName, errorMessage, focus)
값이 숫자인지 검사한다. - checkEmail(fieldName, errorMessage, focus)
값이 올바른 이메일 주소인지 검사한다. - checkSelected(fieldName, firstIdx, errorMessage, focus)
<select>에서 선택한 옵션의 인덱스가 firstIdx보다 크거나 같은 지 검사한다. - checkAtLeastOneChecked(fieldName, errorMessage, focus)
checkbox나 radio 입력 요소가 최소한 1개 이상 선택됐는지 검사한다. - checkRegex(fieldName, regex, errorMessage, focus)
값이 정규표현식에 해당하는 지 검사한다.
위 함수에서 주의할 점은 checkRequire를 제외한 나머지 함수들은 값이 ''인 경우 검증에 통과한다는 것이다. 이렇게 만든 이유는 필수 요소가 아닌 경우에는 값을 입력하지 않아도 검증에 통과되어야 하기 때문이다. 필수요소라면 먼저 checkRequired() 함수를 사용해서 검증 조건을 추가해주어야 한다. 예를 들어, email 입력 요소가 필수이고 이메일 주소를 입력해야 한다면 다음과 같이 검증 코드를 작성해야 한다.
var FormChecker checker = new FormChecker(document.memberForm);
checker.checkRequired('email', '이메일 주소를 입력하세요', true);
checker.checkEmail('email', '올바른 이메일 주소를 입력하세요', true);
결론
본 글에서는 틀 자바스크립트가 제공하는 FormChecker 를 사용해서 폼 값을 검증하는 방법에 대해서 살펴보았다. FormChecker를 통해서 쉽고 간단하게 그리고 더불어 가독성이 높은 폼 검증 코드를 작성할 수 있는 것을 알게 되었다. 앞으로 틀 자바스크립트는 좀더 편리한 기능이 추가될 예정인데, 만약 틀 자바스크립트의 개발에 참여하고 싶다면 틀 프로젝트 사이트(http://kldp.net/projects/tle)나 madvirus@madvirus.net을 통해서 알려주기 바란다.
틀 프레임워크, 틀 서치유틸을 개발하였으며, JSP 2.0 프로그래밍, JSP 실전 Know-how, Jakarta Project 등의 책을 집필하였다. 자바캔의 운영자이며, 현재 CVNet e-biz 팀에서 근무하고 있다.
'javascript' 카테고리의 다른 글
| 익스플로워 브라우저에서 자바스크립트 메모리 누수 (0) | 2009.09.01 |
|---|---|
| 자바 스크립트 동적 로딩 JavaScript,Ajax (0) | 2009.07.28 |
| navigator object 사용 (0) | 2008.12.01 |
| encodeURI, encodeURIComponent, escape 함수 차이점; 자바스크립트 (0) | 2008.11.17 |
| 자바스크립트 '오류: 사용 권한이 없습니다.' (0) | 2008.10.15 |