/*
★★기본적인 사용법★★
이 라이브러리는 매번 스크립트를 변경하지 않고 쉽게 폼 검사를 하고자 만들어졌습니다.
사용법은 한번 배워두면 간단한 html 코딩만으로 폼 검사를 마칠 수 있습니다.
이로써 준비 과정은 끝났습니다.
검사를 위한 속성 사용법
이제 저 폼에 있는 모든 엘리먼트는 submit이 일어나기 전에 검사기를 통과하게 됩니다.
이때 어떤 항목을 검사할찌, 어떤 방법으로 검사할찌를 html 태그의 속성값으로 정해주기만 하면 됩니다.
★★쓰이는 속성들★★
hname 항목의 한글이름(에러메시지를 보여줄때 등)
option 특수한 검사를 수행할 옵션
required 필수항목인지 여부를 나타내는 속성
maxbyte maxlength와 달리 한글 2글자는 4바이트로 인식
★★사용예제★★
이것은 userid 라는 항목을 "유저 아이디" 라고 부르며 필수 항목이므로 입력이 안되면 에러를 발생시킵니다.
이름은 역시 필수항목이며 "hangul" option이 추가되어서 이름에 한글이 한자이상 포함되어있지 않으면 에러를 발생시킵니다.
전화번호 항목은 필수 항목은 아니지만 입력되었을 경우 제대로 입력되었는지 검사하게 되며, 핸드폰일경우는 자동으로 하이픈을 붙여주게 됩니다.
이상 예를 보고 다른 검사 항목도 충분히 사용할수 있으리라 생각됩니다.
★★특수 패턴 검사 함수 목록★★
email, phone, userid, hangul, engonly, jumin, bizno
이름만 보아도 어떤 옵션인지 쉽게 알수 있을껍니다. 자바스크립트를 조금 할 줄 아시는 분이라면 자신만의 검사 함수를 충분히 추가해 넣으실 수 있을껍니다. 자신이 없으신 분이라면 굳이 수정하지 않으셔도 충분히 사용하는데는 문제 없습니다. 여기에 올려진 검사 함수들은 자주 쓰이는것을만 포함시켰고, 이 외에도 아이피주소가 올바른지 또는 홈페이지 주소가 올바른지 체크하는 함수들이 얼마든지 있지만 공통으로 쉽게 불러 쓸 수 있는 함수를 만드는것이 목적이었으므로 일단 가볍게 배포합니다.
에러메시지 포멧 정의
이번 버전에서 획기적으로 바뀐 부분이 에러메시지 사용자 정의 인터페이스 입니다. 기존 함수에서는 미리 정해진 에러만 출력 되었고, 항목 이름에 따라 조사가 자동으로 붙지 못해서 좀 어색한 에러 메시지를 출력할 수 밖에 없었지만 이번 라이브러리에서는 에러메시지를 사용자가 쉽게 바꾸어 사용할 수 있도록 정의 부분을 위쪽에 따로 빼내어두었고 자바스크립트 변수를 템플릿화 해서 사용할 수 있으며 변수 내용의 마지막 글자 종성 유무에 따라 조사를 자동으로 붙여주는 기능이 있습니다.
에러메시지 템플릿 사용법
ex)
NO_BLANK = "{name+은는} 필수 항목입니다";
위 변수에서 중괄호로 묶인 부분은 검사되는 엘리먼트의 hname 또는 name 으로 자동으로 대치됩니다. 또한 내용의 마지막 글자 종성유무에 따라 '은' 또는 '는' 조사가 자동으로 붙게 됩니다. userid 항목에 사용되었다면 "유저 아이디는 필수 항목입니다" 라는 에러를 발생시킬 것입니다. 이것은 다음과 같이 바꿀 수 있습니다.
NO_BLANK = "{name+이가} 비어있어서 전송하지 못했습니다";
또는
NO_BLANK = "{name+을를} 입력해주세요";
{변수+조사} 에서 +조사 부분은 없어도 동작합니다.
단순하게 아래와 같이 바꿀 수도 있습니다.
NO_BLANK = "{name}항목은 필수 항목입니다.";
★★2003년 10월 2일 추가된 기능★★
- 여러 필드로 나누어진 항목에 대한 검사 방법이 추가되었습니다.
ex) 3개 필드로 나누어진 전화번호 입력란 만들기
-
-
span 값이 있으면 해당 엘리먼트로부터 span값만큼의 엘리먼트의 값을 합친걸 기준으로 phone 형식 검사를 수행합니다. 이때 span 되는 엘리먼트에 대해서는 option을 따로 주지 않아도 됩니다.
ex2) 2개 항목으로 나누어진 이메일 입력란 만들기
@
여러개 항목으로 나눠져있지만 구분자는 입력에 들어가지 않을경우 glue 속성에 적어주시면 해당 문자로 합쳐집니다.
-> email1@email2 에대한 이메일 패턴 검사 결과를 출력합니다.
- 패스워드 확인등 두개의 항목값이 같아야 하는 상황에 대한 체크 방법이 추가되었습니다.
ex) 패스워드 confirm 구현하기
한번더
이때는 passwd 항목과 passwd2 항목이 같지 않을경우 경고창을 출력하게 됩니다.
*/
/// 에러메시지 포멧 정의 ///
var NO_BLANK = "{name+은는} 필수항목입니다";
var NOT_VALID = "{name+이가} 올바르지 않습니다";
// var TOO_LONG = "{name}의 길이가 초과되었습니다 (최대 {maxbyte}바이트)";
/// 스트링 객체에 메소드 추가 ///
String.prototype.trim = function(str) {
str = this != window ? this : str;
return str.replace(/^\s+/g,'').replace(/\s+$/g,'');
}
String.prototype.hasFinalConsonant = function(str) {
str = this != window ? this : str;
var strTemp = str.substr(str.length-1);
return ((strTemp.charCodeAt(0)-16)%28!=0);
}
String.prototype.bytes = function(str) {
str = this != window ? this : str;
for(j=0; j 128) ? 2 : 1
}
return len;
}
function validate(form, type) {
for (i = 0; i < form.elements.length; i++ ) {
var el = form.elements[i];
if (el.tagName == "FIELDSET") continue;
el.value = el.value.trim();
var minbyte = el.getAttribute("MINBYTE");
var maxbyte = el.getAttribute("MAXBYTE");
var option = el.getAttribute("OPTION");
var match = el.getAttribute("MATCH");
var glue = el.getAttribute('GLUE');
if (el.getAttribute("REQUIRED") != null) {
if (el.value == null || el.value == "") {
return doError(el,NO_BLANK);
}
}
if (minbyte != null) {
if (el.value.bytes() < parseInt(minbyte)) {
return doError(el,"{name+은는} 최소 "+minbyte+"바이트 이상 입력해야 합니다.");
}
}
if (maxbyte != null && el.value != "") {
var len = 0;
if (el.value.bytes() > parseInt(maxbyte)) {
return doError(el,"{name}의 길이가 초과되었습니다 (최대 "+maxbyte+"바이트)");
}
}
if (match && (el.value != form.elements[match].value)) return doError(el,"{name+이가} 일치하지 않습니다");
if (option != null && el.value != "") {
if (el.getAttribute('SPAN') != null) {
var _value = new Array();
for (span=0; span