lib.validate.js ver 0.7.0
설명서 | 다운로드 | 사용예제 | 이전버전
설명서 (Documentation)
<![CDATA[-1. CHANGES
2004.11.06
- minselect, maxselect 인자 추가
<samp explain="멀티 셀렉트박스에서 3가지 이상 5가지 이하의 항목만 입력받는 예">
<select multiple minselect="3" maxselect="5">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</samp>
- imageonly 인자 추가
<samp explain="첨부파일에서 이미지 확장자의 파일만 입력받는 예">
<input type="file" imageonly="imageonly">
</samp>
- option 추가 (foreignerno, residentno), 수정(phone, homephone)
foreignerno - 재외국인번호
residentno - 주민번호와 재외국인번호 전부 적용
phone - 070, 080 등의 국번이나 1544등 국번이 없는 전화번호도 체크가능하도록 수정
homephone - phone과 동일
0. 원개발자
이 라이브러리는 거친마루(comfuture@debugs.co.kr)님의 아이디어에서 출발하였으며,
해당 초기버전에 뿌리를 두고 있다.
1. 개요
Validate 라이브러리는 웹개발시 빈번하게 발생하는 폼 값 체크에서 소요되는 시간을 단축하기 위해 개발되었다.
2. 폼 검사 방법
1. 빠른 검사
사용자는 Validate 라이브러리를 include한 후 제어할 폼태그(<form>)의 onsubmit 인자에
"return validate(this)" 와 같은 구문을 삽입함으로써 Validate 라이브러리를 사용할 모든 준비를 마친다.
이후 체크할 폼 element에 간단한 인자를 부여함으로써 다양한 방식의 입력조건을 빠르게 검사할 수 있다.
2. 사용자 정의 검사
기본적으로 Validate 라이브러리는 FormChecker라는 클래스로 구성되어 있고,
validate라는 함수는 FormChecker 클래스의 인스턴스를 간단히 생성하고 에러를 체크하는 방식으로 구성되어 있다.
이 작업을 좀 더 특수한 상황에 맞게 하고 싶다면.. 다음과 같은 스크립트를 쓸 수 있다.
ex)
<script language="javascript">
// 기본적으로 제공되는 validate 함수의 코드이다.
function validate(form, fields) {
var lah = new FormChecker(form);
if (fields) lah.setCheckFields(fields);
var wmf = lah.go();
if (wmf == false) alert(lah.getErrorMessage());
return wmf;
}
function checkForm(form)
{
var FC = new FormChecker(form);
// 체크할 폼을 개별적으로 정의할 수 있다.
// FC.setForm(document.forms["CustomForm"]);
// 다른 필드들은 모두 무시하고 name, password, email 필드만 체크하는 방법
// FC.setCheckFields(['name', 'password', 'email']); // 인자값은 하나의 배열(Array)이다.
// 다른 필드들은 모두 체크하고 jumin 필드만 체크하지 않는 방법
// FC.setUnCheckFields(['jumin']); // 인자값은 하나의 배열(Array)이다.
// 필드 하나하나에 개별적으로 옵션을 더하고 빼고 고칠 수 있다. :)?
// FC.setParam(form.elements["name"], "required", "required"); // name 항목을 필수항목으로 만든다.
// FC.delParam(form.elements["name"], "trim"); // name 항목에서 공백제거를 하지 않는다.
var result = FC.go(); // 폼 체크 동작을 지시!
if (result == false) alert(FC.getErrorMessage()); // 폼 체크시 에러가 발생했을 경우 메시지를 alert창으로 띄움
return result; // 성공시 true, 실패시 false를 리턴하게 됨.
}
</script>
<form ... onsubmit="return checkForm(this)">
...
</form>
3. 폼 element별 사용가능 인자
1. <input type="text">, <input type="password">, <textarea>
a. hname (string)
해당 element의 name에 대한 alias이다.
hname 항목을 지정하여 사용자에게 어떤 항목을 제대로 기입하지 않았는지에 대한 안내를 쉽게한다.
해당 element에서 제대로 되지 않은 값을 입력하여 에러메시지를 띄우는 경우,
hname이 이 element의 이름으로 우선 쓰여지며 hname이 삭제된 경우는 name 항목이 표시된다.
ex)
<input type="text" name="email" hname="이메일">
b. trim (string)
해당 element의 값의 공백을 제거한다.
공백 제거은 trim인자의 값에 따라 다음의 형식으로 이루어진다.
1) trim : 문자열 앞, 뒤 공백을 제거
2) ltrim : 문자열 앞 공백을 제거
3) trim : 문자열 뒷 공백을 제거
4) compress : 문자열의 모든 공백을 제거
ex)
<input type="text" name="test1">
<input type="text" name="test1" trim="trim">
<input type="text" name="test2" trim="ltrim">
<input type="text" name="test3" trim="rtrim">
<input type="text" name="test4" trim="compress">
c. required (string)
필수항목임을 지정하는 옵션이다.
해당 element에 required라는 인자를 지정하여 필수항목임을 지정한다.
값이 required가 아닐 경우에는 그룹으로 인식하여 같은 값을 가진 element들을 함께 묶어 체크한다.
requirenum 참조
ex)
<input type="text" name="test" required="required">
d. requirenum (integer)
required과 함께 element들을 group으로 지정하여 필수항목의 갯수를 지정한다.
required에 같은 value를 줌으로써 한 group임을 선언한다.
requirenum은 같은 required값으로 선언된 element 중 맨 첫 element에 선언되어야 한다.
required의 값이 required일 경우에는 그룹이 지정되지 않은 것으로 인식되어 requirenum이
2 이상일 경우 참인 조건을 달성할 수 없음.
ex)
<input type="text" name="test1" required="test" requirenum="2">
<input type="text" name="test2" required="test">
<input type="text" name="test3" required="test">
e. minbyte (integer)
element value의 최소 길이(byte)를 지정한다.
지정된 minbyte가 1 이상이 되면 required 속성과 상관없이 value의 최소 길이가 1 이상이 되어야한다.
또, maxbyte와 함께 value의 범위를 지정할 수 있다.
ex)
<input type="text" name="test1" minbyte="4">
<input type="text" name="test1" minbyte="3" maxbyte="5">
f. maxbyte (integer)
element value의 최대 길이(byte)를 지정한다.
또, minbyte와 함께 value의 범위를 지정할 수 있다.
ex)
<input type="text" name="test1" maxbyte="4">
<input type="text" name="test1" minbyte="3" maxbyte="5">
g. option (string)
특별한 형식의 value를 입력받을 때에 쓰인다.
Validate library는 다음의 몇가지 기본 형식 체크를 지원한다.
- email : 이메일 형식 체크
- hangul : 한글이 포함되어 있는지 체크
- engonly : 영문만으로 이루어져 있는지 체크
- number : 숫자로만 이루어져 있는지 체크
- residentno : 주민등록번호, 재외국인번호 형식 체크
- jumin : 주민등록번호 형식 체크
- foreignerno : 재외국인번호 형식 체크
- bizno : 사업자등록번호 형식 체크
- phone : 전화번호(집전화, 핸드폰) 형식 체크
- homephone : 집전화 형식 체크
- handphone : 핸드폰 형식 체크
이 다음은, 사용자가 원하는 형식의 체크를 추가하는 기능을 설명한다.
1) 한 페이지에서만 사용할 형식
- 먼저 원하는 체크 함수를 작성한다.
이 때, 인자는 첫번째는 element를 받게 되고, 두번째는 체크할 값을 받게 된다.
두번째의 경우에는 span을 이용한 항목이 아니라면 무시된다.
여기서 체크할 값은 span이 적용된 column이라면, value가 되고.. 그렇지 않다면 el.value가 된다.
ex)
var value = value ? value : el.value;
리턴값은 형식에 맞는다면 true를..
형식에 맞지 않는다면.. 별도의 에러메시지 혹은 "invalid" 라는 스트링을 리턴해주면 된다.
함수를 다 작성했다면.. 생성한 FormChecker 인스턴스에서 다음과 같은 방법으로 함수를 mapping해준다.
ex) 사용자아이디를 체크하는 예제 (option명: userid, 함수명: checkUserId)
var lah = new FormChecker(폼이름);
lah.setFunc("userid", "checkUserId");
var result = lah.go();
...
2) 전체적으로 추가할 형식
- lib.validate.js 파일을 열고 맨 아랫줄에 원하는 함수를 추가한다.
함수의 이름은 맨 아래 작성되어 있는 기존 함수를 참조하면 된다.
ex) FormCheck.prototype.func_userid = function(el,value) {
..
}
나머지는 1)번의 설명과 같은 방식으로 작성하면 되고,
함수 mapping은 lib.validate.js 파일 10 line 부근에 this.FUNC_MAP 배열 선언에 추가해주면 된다.
ex)
this.FUNC_MAP = {
homephone: "this.func_homephone",
handphone: "this.func_handphone"
}
// 변경 후
this.FUNC_MAP = {
homephone: "this.func_homephone",
handphone: "this.func_handphone",
userid : "this.func_userid",
}
이렇게 정의한 함수의 값을 option의 인자로 넣으면 특별한 형식을 검사할 준비가 완료된다.
ex)
<input type="text" name="count" option="number">
h. match (string)
비밀번호와 같이 두번 같은 값을 입력받는 경우
같은 값을 입력받을 element의 name을 match 인자에 넣음으로써 같은 값을 입력받았는지를 검사한다.
같은 값을 입력받을 두 element 중의 한 곳에만 match 인자를 넣어주면 된다.
ex)
<input type="password" name="pw1" match="pw2">
<input type="password" name="pw2">
i. span (integer)
option 인자로 입력받은 value의 특별한 형식을 검사하는 경우,
나누어 입력받은 값을 합쳐 검사할 수 있게 해주는 옵션이다.
검사하고자 하는 element에서 span에 지정된 숫자만큼의 옵션의 (검사하고자 하는 element 포함)
value를 합쳐 option 인자로 검사를 진행하게 된다.
합쳐서 검사할 element의 맨 처음 element에 선언하여주면 된다.
ex)
<input type="text" name="tel1" option="tel" span="3">
<input type="text" name="tel2">
<input type="text" name="tel3">
한 element에 여러개의 option을 검사할 수 있는 기능이 추가되었다.
검사하고 싶은 option들을 spacebar로 구분하여 선언하여주면 된다.
검사 순서는 입력된 순서대로 진행된다.
j. glue (string)
span에 종속된 옵션으로서 span 인자를 통해 option으로 검사할 element의 value를 합칠 때,
glue에 지정된 값을 각 element의 사이마다 붙여서 검사를 할 수 있게 해준다.
ex) 02-333-4444 식의 전화번호를 검사할 때
<input type="text" name="tel1" option="tel" span="3" glue="-">
<input type="text" name="tel2">
<input type="text" name="tel3">
k. pattern (regular expression)
정규표현식(Regular Expression)을 통한 value의 특별한 형식의 검사에 쓰이는 옵션이다.
pattern의 인자에 원하는 정규식을 넣음으로써 해당 value의 검사의 준비가 완료된다.
고정된 표현식이나(전화번호, 이메일 등),
정규식만으로 끝나지 않고 복잡한 검사과정이 필요한 내용은 (주민번호, 사업자번호 등)
option 인자를 사용하는 것이 좋다.
ex) 1, 2, 3 중에 한 값만 입력받을 때
<input type="text" name="test" pattern="^[123]$">
l. errdo (string)
해당 element에서 에러가 발생했을 시 에러메시지를 보여준 후의 동작을 지시한다.
종류는 delete, select, focus가 있다. option처럼 여러가지 동작을 원하는 경우에는
spacebar로 구분하여 선언하여 주면 된다.
delete : 기존의 element에 입력된 문자를 삭제
select : 기존의 element에 입력된 값을 선택
focus : 에러가 발생한 element에 포커스를 맞춤.
ex) 기존에 입력된 문자를 삭제하고 포커스를 맞춤
<input type="text" name="email" option="email" errdo="delete focus">
m. errmsg (string)
해당 element에서 에러가 발생했을 시 errmsg에서 지정한 내용을 에러메시지로 리턴한다.
ex)
<input type="text" name="email" option="email" errmsg="이메일 형식이 틀리잖아!!!!!!!!">
2. <input type="radio">
a. hname
b. required
c. requirenum
d. option
e. match
f. span
g. glue
h. pattern
i. errdo
j. errmsg
3. <input type="checkbox">
a. hname
b. required
c. requirenum
d. option
e. match
f. span
g. glue
h. pattern
i. errdo
j. errmsg
k. mincheck (integer) ver 0.1.1 >
체크박스의 갯수를 체크하기 위한 옵션으로, mincheck인자에 지정된 값이상 체크되어
있지 않으면 에러를 발생시킨다.
ex) 3가지 이상을 입력받을 때
<input type="checkbox" name="hobby[]" value="1" mincheck="3"> 잠
<input type="checkbox" name="hobby[]" value="2"> 밥
<input type="checkbox" name="hobby[]" value="3"> 담배
<input type="checkbox" name="hobby[]" value="4"> 술
l. maxcheck (integer) ver 0.1.1 >
체크박스의 갯수를 체크하기 위한 옵션으로, maxcheck인자에 지정된 값이하로 체크되어
있지 않으면 에러를 발생시킨다.
ex) 3가지 이하를 입력받을 때
<input type="checkbox" name="hobby[]" value="1" maxcheck="3"> 잠
<input type="checkbox" name="hobby[]" value="2"> 밥
<input type="checkbox" name="hobby[]" value="3"> 담배
<input type="checkbox" name="hobby[]" value="4"> 술
ex) mincheck와 maxcheck를 동시에 사용한 예 - 2가지 이상 3가지 이하를 입력받을 때
<input type="checkbox" name="hobby[]" value="1" mincheck="2" maxcheck="3"> 잠
<input type="checkbox" name="hobby[]" value="2"> 밥
<input type="checkbox" name="hobby[]" value="3"> 담배
<input type="checkbox" name="hobby[]" value="4"> 술
4. <select>
a. hname
b. required
c. requirenum
d. option
e. match
f. span
g. glue
h. pattern
i. errdo
j. errmsg
5. <select multiple>
a. hname
b. required
c. requirenum
d. option
e. match
f. span
g. glue
h. pattern
i. errdo
j. errmsg
k. minselect (integer) ver 0.7.0 >
mincheck와 사용방식이나 가능이 동일합니다.
l. maxselect (integer) ver 0.7.0 >
maxselect와 사용방식이나 가능이 동일합니다.
6. <input type="file">
a. hname
b. required
c. requirenum
d. errdo
e. errmsg
f. imageonly (string)
첨부파일에서 이미지만 받을 수 있게 하는 옵션으로,
파일 형식까지 체크하는 것은 아니고, 확장자로 (jpg, jpeg, gif, png)만 허용한다.
필수(required)가 정의되어 있지 않으면.. 파일이 입력되지 않았을 때는 에러를 내지 않는다.
ex)
<input type="file" imageonly="imageonly">
4. 기본 option과 errdo 설정
자주 사용하는 errdo는 기본적으로 설정할 수 있다.
validate 라이브러리에서 구분되는 type별로 폼 element에 선언하듯이 원하는 동작을 선언하면 된다.
단, element에서 errordo가 따로 정의되는 경우에는 기본 설정은 무시된다.
1. errordo example
var DEFAULT_ERRDO = {
text: "delete focus",
select: "focus",
check: "focus",
radio: "focus",
file: "focus",
hidden: ""
}
]]>
△ Top
다운로드 (Download)
lib.validate.js 0.7.0 -
Download (2004-11-06)
△ Top
사용예제 (Example)
이전버전 (Older Version)
△ Top