Documentations

Miya Validator는 server-side validation이 이루어진 가운데 부가적으로 사용자의 편의 향상을 위해 사용할 수 있는 도구(client-side validator)입니다. server-side validation 없이 Miya Validator를 사용하는 것은 사용자에 의한 폼 전송 값의 악의적인 변형이 우려되므로 좋은 생각이 아닙니다. Miya Validator는 사용자의 편의 향상을 위한 보조도구로서 만들어졌음을 알립니다.


Documentation

Miya Validator의 문서를 제공합니다. 문서 중에 오류가 있거나 혹은 Miya Validator의 개선요구사항이 있으시면 mctenshi-at-gmail-dot-com으로 연락 바랍니다.

Contents


MiyaValidator

Miya Validator의 핵심, MiyaValidator Class입니다.

상수

FORMAT_MAP

MiyaConditionoption 속성의 값에 따라 검사에 사용할 함수를 가리킵니다. 아래와 같이 선언되어 있으며 기존의 속성값에 대한 변경이나 새로운 항목의 추가가 가능합니다.

MiyaValidator.FORMAT_MAP = {
    // ...
    handphone  : "MiyaFormat.handphone",
    isdate     : "MiyaFormat.isdate",
    zip        : "MiyaFormat.zip"
};

다음은 시간 형식을 검사하는 `time` 속성을 추가하는 예제입니다.

MiyaValidator.FORMAT_MAP = {
    // ...
    handphone  : "MiyaFormat.handphone",
    isdate     : "MiyaFormat.isdate",
    zip        : "MiyaFormat.zip",
    time       : "checkTime"
};

// ...

function checkTime(element, value) {
    var value = value ? value : element.value;
    var pattern = /^([01][0-9]|2[0123]):[0-5][0-9]$/;
    return pattern.test(value) ? true : "시간의 형식이 맞지 않습니다.";
};

검사 함수는 폼 컨트롤을 가리키는 element와 폼 컨트롤의 값(여러 필드로 분리된 검사 항목의 경우 값이 할당됨)을 인자로 가지는 함수로 만들고, 함수 내에서 검사할 코드를 작성 후 유효한 경우 true, 그렇지 않은 경우 에러 메시지 문자열 혹은 ERROR_MESSAGE에 정의된 속성값을 리턴하도록 작성하면 됩니다.

ERROR_MESSAGE

오류 시에 사용되는 일반적인 에러 메시지들이 정의된 상수입니다. 속성값의 추가, 변경을 통해 정의된 에러 메시지를 수정할 수 있습니다. 아래는 ERROR_MESSAGE의 일부입니다.

MiyaValidator.ERROR_MESSAGE = {
    // ...
    required   : "반드시 입력하셔야 하는 사항입니다.",
    requiredstring : "반드시 {required}(으)로 입력하셔야 하는 사항입니다.",
    requirenum : "{requirenum}개 이상의 항목이 입력되어야 합니다.",
    // ...
};

에러 메시지에는 {required} 와 같은 패턴을 사용할 수 있습니다. 여기서 `required`는 MiyaConditionoption 속성의 값입니다. getErrorMessage를 통해 에러 메시지를 얻어올 때 사용자가 지정한 option 속성의 값을 치환해줍니다. 사용자가 required 값을 `hello`라고 주었다면 {required}는 hello로 치환되게 됩니다.

ERROR_MESSAGE_PATTERN

이 상수는 …

TEXT, SELECT, MULTI_SELECT, CHECK, RADIO, FILE, HIDDEN

폼 컨트롤의 종류를 구분하기 위해 Miya Validator 내부적으로 사용하는 상수입니다. 일반 사용자들은 이 값들을 수정하시면 Miya Validator가 제대로 동작하지 않을 수 있습니다.

TEXT
<input type="text">, <input type="password">, <textarea>
SELECT
<select>
MULTI_SELECT
<select multiple="multiple">
CHECK
<input type="checkbox">
RADIO
<input type="radio">
FILE
<input type="file">
HIDDEN
<input type="hidden">

생성자

Miya Validator를 사용하기 위한 Instance를 생성합니다.

Arguments
form {mixed} – 검사를 수행할 폼의 name, id 속성 혹은 폼을 가리키는 DOM Element
Returns
올바른 form이 전달되지 않았을 경우 false를 리턴합니다.
Example
// aform을 검사하기 위한 MiyaValidator Instance를 생성합니다.
var mv = new MiyaValidator("aform");

안타깝게도 form에 포함되지 않은 폼 컨트롤들은 Miya Validator로는 검사를 수행할 수 없습니다.

add 함수

간편하게 검사 조건(MiyaCondition)을 추가하는 함수입니다.

Arguments
targetElement {mixed} – 대상 폼 컨트롤의 name, id 속성 혹은 폼 컨트롤을 가리키는 DOM Element
targetOptions {Object} – 검사 조건 항목들
targetLabel {String} – 폼 컨트롤의 label. 미지정 시 MiyaCondition의 getHTMLLabel 함수를 통해 자동으로 label 지정.
Returns
MiyaCondition의 Instance (0.1 버전) Number – conditions 배열 변수의 index값 (0.2 버전 이상)
Example
// 4 byte 이상의 필수 항목인 아이디(login-id)의 검사 조건 추가
mv.add("login-id", {
    required: true,
    minbyte: 4
}, "아이디");

addCondition 함수

검사 조건(MiyaCondition) Instance를 직접 추가하는 함수.

Arguments
condition {MiyaCondition} – MiyaCondition의 Instance
Returns
Nothing.
Example
// mc라는 MiyaCondition Instance 추가
var mc = new MiyaCondition(
             "login-id", {
             required: true,
             minbyte: 4
         }, "아이디");
mv.addCondition(mc);

addGroup 함수

여러 항목에 대하여 그 중 몇가지가 유효한지에 대한 조건을 추가하는 함수.

Arguments
targetConditions {Array} – 대상 검사 조건(MiyaCondition)들
targetOptions {Object} – 그룹 검사 조건 항목들
targetLabel {String} – 그룹 조건의 label. 미지정 시 각 검사 조건의 label이 합쳐진 값으로 지정됨.
Returns
MiyaGroupCondition의 Instance (0.1 버전) Number – groupConditions 배열 변수의 index값 (0.2 버전 이상)
Example
// 전화번호(phone)와 핸드폰번호(cell) 중 한가지 이상 입력받는 검사 조건 추가
var phoneCondition = new MiyaCondition("phone", {
    required: true,
    option: "homephone"
}, "전화번호", mv.form);
var cellCondition = new MiyaCondition("cell", {
    required: true,
    option: "handphone"
}, "핸드폰번호", mv.form);
mv.addGroup([phoneCondition, cellCondition], {
    requiremin: 1
});

addGroupCondition 함수

그룹 검사 조건(MiyaGroupCondition) Instance를 직접 추가하는 함수.

Arguments
groupCondition {MiyaGroupCondition} – MiyaGroupCondition의 Instance
Returns
Nothing.
Example
// mg라는 MiyaGroupCondition Instance 추가
// 전화번호(phone)와 핸드폰번호(cell) 중 한가지 이상 입력받는 검사 조건
var phoneCondition = new MiyaCondition("phone", {
    required: true,
    option: "homephone"
}, "전화번호", mv.form);
var cellCondition = new MiyaCondition("cell", {
    required: true,
    option: "handphone"
}, "핸드폰번호", mv.form);
var mg = new MiyaGroupCondition([phoneCondition, cellCondition], {
    requiremin: 1
});
mv.addGroupCondition(mg);

validate 함수

추가된 검사 조건, 그룹 검사 조건에 따라 유효성 검사 실행

Arguments
Nothing.
Returns
유효 시 true, 유효하지 않을 시 false. 유효하지 않을 경우 유효하지 않은 것이 그룹 검사 조건(MiyaGroupCondition)이면 해당 조건에 따라 MiyaValidator의 errorCondition(그룹 검사 조건의 첫 검사 조건), errorGroupCondition, errorType 값이 지정된다. 유효하지 않은 것이 검사 조건(MiyaGroupCondition)이면 해당 조건에 따라 MiyaValidator의 errorCondition, errorType 값이 지정된다.
Example
// mv라는 MiyaValidator의 Instance의 유효성 검사 실행.
var result = mv.validate();

validateGroup 함수

지정한 그룹 검사 조건(MiyaGroupCondition)의 유효성 검사 실행

Arguments
groupCondition {MiyaGroupCondition} – MiyaGroupCondition의 Instance
Returns
유효 시 true, 유효하지 않을 시 false. 유효하지 않을 경우 유효하지 않은 그룹 검사 조건에 따라 errorCondition(그룹 검사 조건의 첫 검사 조건), errorGroupCondition, errorType 값이 지정된다.
Example
// mv라는 MiyaValidator의 Instance에 mg라는 그룹 검사 조건의 유효성 검사 실행
var result = mv.validateGroup(mg);

validateCondition 함수

지정한 검사 조건(MiyaCondition)의 유효성 검사 실행

Arguments
condition {MiyaCondition} – MiyaCondition의 Instance
Returns
유효 시 true, 유효하지 않을 시 false. 유효하지 않을 경우 유효하지 않은 검사 조건에 따라 errorCondition, errorType 값이 지정된다.
Example
// mv라는 MiyaValidator의 Instance에 mc라는 검사 조건의 유효성 검사 실행
var result = mv.validateCondition(mc);

raiseError 함수

검사 조건(MiyaCondition) 유효성 검사 실행 시 에러가 발생하면 호출하여 errorCondition과 errorType값을 지정하는 함수. validateCondition 함수에서 에러가 나면 이 함수를 호출하며 false를 반환한다.

Arguments
condition {MiyaCondition} – MiyaCondition의 Instance (에러가 발생한 검사 조건)
errorType {String} – 에러가 발생한 검사 조건의 속성 (required, maxbyte 등)
Returns
false. validateCondition 함수는 이 값을 바로 반환하게 된다.

raiseGroupError 함수

그룹 검사 조건(MiyaGroupCondition) 유효성 검사 실행 시 에러가 발생하면 호출하여 errorGroupCondition과 errorCondition, errorType값을 지정하는 함수. validateGroupCondition 함수에서 에러가 나면 이 함수를 호출하며 false를 반환한다.

Arguments
groupCondition {MiyaGroupCondition} – MiyaGroupCondition의 Instance (에러가 발생한 검사 조건)
firstInvalidCondition {MiyaCondition} – 그룹 검사 조건 내에서 처음으로 에러가 발생한 검사 조건 errorType {String} – 에러가 발생한 검사 조건의 속성 (requiremin, requiremax 등)
Returns
false. validateGroupCondition 함수는 이 값을 바로 반환하게 된다.

getErrorElement 함수

에러가 발생한 폼 컨트롤을 반환한다.

Arguments
Nothing.
Returns
DOM Element or null – 에러가 발생하지 않았다면 null을 반환한다.
Example
// mv라는 MiyaValidator의 Instance에서 유효성 검사 실패 시
// 에러가 발생한 폼 컨트롤을 가져온다.
var result = mv.validate();
if (!result) var errorElement = mv.getErrorElement(mv);

getErrorMessage 함수

에러 메시지를 반환한다. 에러 메시지 패턴 지정 시 {label}은 폼 컨트롤의 이름으로, {message}는 MiyaValidator가 만든 에러 메시지로 변환되어 반환된다.

Arguments
errorMessagePattern {String} – 사용자 지정 에러 메시지 패턴
Returns
String or null – 에러가 없는 경우 null이 반환된다.
Example
// mv라는 MiyaValidator의 Instance에서 유효성 검사 실패 시
// 에러메시지를 경고창에 출력한다.
var result = mv.validate();
if (!result) alert(mv.getErrorMessage());

isActiveFormControl 함수 (static)

MiyaValidator가 검사할 수 있는 폼 컨트롤인지 여부를 반환한다. 폼 컨트롤이 아니거나 비활성화(disabled) 되어있는 폼 컨트롤의 경우 false를 반환한다.

Arguments
element {DOM Element}
Returns
true or false
Example
// a라는 ID를 가진 element를 검사
var isAValidControl = MiyaValidator.isActiveformControl(
    document.getElementById("a"));

isEmptyElement 함수 (static)

폼 컨트롤이 비어있는지를 검사

Arguments
element {DOM Element}
Returns
true or false – 폼 컨트롤이 비어있는 경우 true, 아닌 경우 false를 반환
Example
// a라는 ID를 가진 element가 비어있는지 검사
if (MiyaValidator.isEmptyElement(document.getElementById("a")))
    alert("a가 비어있습니다!");

getFormElement 함수 (static)

폼의 name, ID를 통해 DOM element를 얻는다.

Arguments
mixed {DOM Element or String} – 폼의 name or 폼의 ID or 폼을 가리키는 DOM Element
Returns
DOM Element or false – 폼이 존재하지 않는 경우 false
Example
// a라는 ID를 가진 폼을 얻는다.
var formEl = MiyaValidator.getFormElement("a");

getElement 함수 (static)

폼 컨트롤의 name, ID를 통해 DOM element를 얻는다.

Arguments
mixed {DOM Element or String} – 폼 컨트롤의 name or 폼 컨트롤의 ID or 폼 컨트롤을 가리키는 DOM Element
Object {DOM Element} – 폼 컨트롤이 속한 폼의 DOM Element
Returns
DOM Element or false – 폼 컨트롤이 존재하지 않는 경우 false
Example
// a라는 name을 가진 폼 컨트롤을 얻는다.
var el = MiyaValidator.getElement("a", formEl);

getElementType 함수 (static)

폼 컨트롤의 타입을 얻는다.

Arguments
Object {DOM Element} – 폼 컨트롤을 가리키는 DOM Element
Returns
Integer or false – 타입 상수 or false(올바르지 않은 폼 컨트롤)
Example
// el라는 폼 컨트롤의 타입을 얻는다.
var elType = MiyaValidator.getElementType(el);

getValue 함수 (static)

폼 컨트롤의 값을 얻는다.

Arguments
Object {DOM Element} – 폼 컨트롤을 가리키는 DOM Element
Returns
mixed – 올바르지 않은 폼 컨트롤의 경우 null
Example
// el라는 폼 컨트롤의 값을 얻는다.
var elValue = MiyaValidator.getValue(el);

getNextElement 함수 (static)

폼 컨트롤의 다음 폼 컨트롤을 얻는다.

Arguments
Object {DOM Element} – 폼 컨트롤을 가리키는 DOM Element
Returns
DOM Element – 존재하지 않을 경우 null
Example
// el라는 폼 컨트롤의 다음 폼 컨트롤을 얻는다.
var nextEl = MiyaValidator.getNextElement(el);

MiyaCondition

Miya Validator에서 각 폼 컨트롤에 대한 유효성 검사 조건을 만드는 MiyaCondition Class입니다. MiyaValidator의 add 함수를 이용하여 MiyaCondition의 인스턴스를 생성하지 않고 간편하게 조건을 추가할 수 있습니다. (add 함수 내부에서 MiyaCondition의 인스턴스의 생성이 자동으로 이루어집니다.)

사용할 수 있는 속성

MiyaCondition에서 사용 가능한 속성들입니다.

trim (0.2 버전 이상)

입력값의 공백을 제거 후 검사할 수 있는 속성입니다. 공백 제거 방법에 따라 다음과 같은 값을 입력할 수 있습니다. 입력값은 trim 속성에 따라 공백이 제거된 후 검사되지만 실제 사용자의 입력값은 그대로 유지되며 전송시에도 공백이 사용자가 입력한 상태대로 전송됩니다.

"trim" 또는 true
입력값의 시작부분과 끝부분의 공백을 제거합니다.
"ltrim"
입력값의 시작부분의 공백을 제거합니다.
"rtrim"
입력값의 끝부분의 공백을 제거합니다.
"compress"
입력값의 모든 공백을 제거합니다.
required

속성이 true로 설정되면 값의 존재 여부를 검사합니다. false일 경우 무시됩니다. 속성이 true 이외의 값(String, Number)인 경우 입력된 값과 설정된 값이 일치하는지 검사합니다.

match

속성이 폼 내의 다른 폼 컨트롤을 가리킬 경우 지정된 폼 컨트롤의 값과 가리킨 폼 컨트롤의 값이 일치하는지 검사합니다. 속성이 가리키는 폼 컨트롤이 불명확할 경우 무시됩니다. 또, 폼 컨트롤이 FILE 타입인 경우 무시됩니다.

option

값이 특정 형식인지 검사합니다. 속성에 지정된 값에 따라 FORMAT_MAP에 정의된 함수를 값의 형식 검사에 사용하게 됩니다. 지정된 값이 FORMAT_MAP에 정의되어 있지 않은 경우 무시됩니다. 또, 폼 컨트롤이 FILE 타입인 경우 무시됩니다.

span, glue

span 속성은 option 속성이 선언되어 있는 경우에만 유효하며, glue 속성은 span 속성이 선언되어 있는 경우에만 유효하다. 이메일 주소를 아이디와 도메인을 분리해서 입력받는 경우처럼 인접한 여러개의 폼 컨트롤을 취합해서 검사하는 경우에 쓰인다. span 속성은 취합할 폼 컨트롤의 수(지정된 폼 컨트롤 포함)를 나타내고 glue의 경우 span 속성으로 합쳐질 폼 컨트롤의 값들 사이에 들어갈 문자를 나타낸다.

span 속성의 값이 3 이상이고 폼 컨트롤의 값을 합칠 때 각 사이에 넣을 문자가 다르다면 glue 속성을 span 속성의 값보다 1 작은 크기의 배열로 선언할 수 있다.

var mv = new MiyaValidator(someForm);

// 아이디와 도메인으로 분리하여 입력받는 이메일 주소 검사.
mv.add("email", {
    option: "email",
    span: 2,
    glue: "@"
});

// ...

<input type="text" name="email" title="이메일 주소 중 아이디"
    />@<input type="text" name="email2" title="이메일 주소 중 도메인" />
minlength (0.2 버전 이상)

HTML4의 maxlength의 반대개념으로 최소 글자수를 설정합니다. 폼 컨트롤이 TEXT 타입, HIDDEN 타입일 경우에만 적용되고, 나머지의 경우에는 무시됩니다.

min, max (0.2 버전 이상)

입력된 값의 최소/최대값을 정의합니다. 값은 반드시 숫자로 입력되어야 합니다. min과 max를 같이 사용하여 입력값의 범위를 지정할 수 있습니다. 폼 컨트롤이 TEXT 타입, HIDDEN 타입일 경우에만 적용되고, 나머지의 경우에는 무시됩니다.

minbyte, maxbyte

값이 byte 길이를 검사합니다. minbyte는 입력 가능한 최소 byte를 가리키며, maxbyte는 입력 가능한 최대 byte를 가리킵니다. minbyte와 maxbyte를 같이 사용하여 입력 byte 범위를 지정할 수 있습니다. 폼 컨트롤이 TEXT 타입, HIDDEN 타입일 경우에만 적용되고, 나머지의 경우에는 무시됩니다.

mincheck, maxcheck

CHECKBOX 타입 폼 컨트롤의 선택 갯수를 검사합니다. mincheck는 최소 선택 가능 항목수를 나타내며, maxcheck는 최대 선택 가능 항목수를 나타냅니다. mincheck와 maxcheck를 같이 사용하여 입력 byte 범위를 지정할 수 있습니다. 폼 컨트롤이 CHECKBOX 타입일 경우에만 적용되고, 나머지의 경우에는 무시됩니다.

minselect, maxselect

MULTI_SELECT 타입 폼 컨트롤의 선택 갯수를 검사합니다. minselect는 최소 선택 가능 항목수를 나타내며, maxselect는 최대 선택 가능 항목수를 나타냅니다. minselect와 maxselect를 같이 사용하여 입력 byte 범위를 지정할 수 있습니다. 폼 컨트롤이 MULTI_SELECT 타입일 경우에만 적용되고, 나머지의 경우에는 무시됩니다.

pattern

검사할 정규식 패턴을 직접 입력하여 검사합니다. 지정된 속성 값으로 RegExp Instance를 생성하게 됩니다. 정규식 패턴의 작성법은 Core JavaScript 1.5 Reference:Global Objects:RegExp를 참조 바랍니다. 올바르지 않은 정규식 패턴의 경우 자바스크립트 에러가 예상됩니다. 폼 컨트롤이 FILE 타입인 경우 무시됩니다.

imageonly

FILE 타입 폼 컨트롤의 파일명을 통해 이미지에 해당하는 확장자의 파일인지를 검사합니다. GIF(.gif), JPEG(.jpg, .jpeg), PNG(.png) 형식의 파일인 경우에만 유효합니다. 폼 컨트롤이 FILE 타입이 아닌 경우 무시됩니다.

fileonly (0.2 버전 이상)

FILE 타입 폼 컨트롤의 파일명을 통해 첨부파일의 확장자를 제한합니다. 이미지파일의 확장자를 검사하는 imageonly 속성과는 별도로 업로드 가능한 첨부파일의 확장자를 직접 선언할 수 있는 속성입니다. 다음과 같은 방식으로 사용하실 수 있도록 구현됩니다. 폼 컨트롤이 FILE 타입이 아닌 경우 무시됩니다.

var v = new MiyaValidator(form);

v.add("somefile", {
fileonly: ["hwp", "doc", "xls", "ppt"],
message: "아래아 한글 또는 MS 오피스의 문서 파일만 업로드 하실 수 있습니다."
});

생성자

Miya Validator의 새로운 검사 조건을 생성합니다.

Arguments
targetElement {mixed} – 대상 폼 컨트롤의 name, id 속성 혹은 폼 컨트롤을 가리키는 DOM Element
targetOptions {Object} – 검사 조건 항목들
targetLabel {String} – 폼 컨트롤의 label. 미지정 시 MiyaCondition의 getHTMLLabel 함수를 통해 자동으로 label 지정.
targetForm {mixed} – targetElement가 name일 경우에만 해당. form element의 name, id 속성 또는 폼을 가리키는 DOM Element
Returns
MiyaCondition의 Instance
Example
// 4 byte 이상의 필수 항목인 아이디(form이라는 폼의 login-id이라는
// name을 가진 텍스트 입력 상자)의 검사 조건 추가
var mc = new MiyaCondition("login-id", {
    required: true,
    minbyte: 4
}, "아이디", document.forms["form"]);

addOption 함수

존재하는 MiyaCondition Instance에 특정 option을 추가합니다.

Arguments
key {String} – option 속성 (예. required, minbyte …)
val {mixed} – option 속성에 적용할 값
Returns
Nothing.
Example
// 정의된 mc라는 MiyaCondition Instance에 maxbyte를 5로 설정
mc.addOption("maxbyte", 5);

removeOption 함수

존재하는 MiyaCondition Instance에서 특정 option을 제거합니다.

Arguments
key {String} – option 속성 (예. required, minbyte …)
Returns
Nothing.
Example
// 정의된 mc라는 MiyaCondition Instance에서 required 속성을 제거
mc.removeOption("required");

getOption 함수

존재하는 MiyaCondition Instance에서 특정 option의 값을 가져옵니다.

Arguments
key {String} – option 속성 (예. required, minbyte …)
Returns
mixed. – 해당 option 속성에 정의된 값.
Example
// 정의된 mc라는 MiyaCondition Instance에서 match 속성을 가져옵니다.
var optMatch = mc.getOption("match");

getHTMLLabel 함수 (static)

HTML 문서 상에 정의된 해당 폼 컨트롤의 label을 찾습니다.

Arguments
element {DOM Element} – 폼 컨트롤을 가리키는 DOM Element
Returns
String – label을 찾을 수 없는 경우 `noname`이라는 String 반환.
Example
// test 라는 ID를 갖는 폼 컨트롤의 label을 찾습니다.
var testLabel = MiyaCondition.getHTMLLabel(document.getElementById("test"));

MiyaGroupCondition

Miya Validator에서 각 폼 컨트롤에 대한 유효성 검사 조건을 그룹화하여 검사를 수행할 수 있도록 해주는 MiyaGroupCondition Class입니다. MiyaValidator의 addGroup 함수를 이용하여 MiyaGroupCondition의 인스턴스를 생성하지 않고 간편하게 조건을 추가할 수 있습니다. (addGroup 함수 내부에서 MiyaGroupCondition의 인스턴스의 생성이 자동으로 이루어집니다.)

사용할 수 있는 속성

MiyaGroupCondition에서 사용 가능한 속성들입니다.

requiremin

속성이 정수로 설정되면 그룹에 묶여 있는 유효성 검사 조건 중 설정된 값 이상의 조건이 만족하는지 검사합니다. 만족하는 조건의 수가 설정된 값 미만이면 오류를 냅니다. 묶여 있는 유효성 검사 조건이 무시되는 경우 만족하는 것으로 처리되므로 주의 바랍니다.

requiremax

속성이 정수로 설정되면 그룹에 묶여 있는 유효성 검사 조건 중 설정된 값 이하의 조건이 만족하는지 검사합니다. 설정된 값을 초과하여 만족하면 오류를 냅니다. 묶여 있는 유효성 검사 조건이 무시되는 경우 만족하는 것으로 처리되므로 주의 바랍니다.

생성자

Miya Validator의 새로운 그룹 검사 조건을 생성합니다.

Arguments
targetConditions {Array} – 대상 유효성 검사 조건(MiyaCondition)의 배열 targetOptions {Object} – 검사 조건 항목들
targetLabel {String} – 그룹 검사 조건의 label. 미지정 시 대상 유효성 검사 조건의 label값을 ", "로 연결하여 지정됨.
Returns
MiyaGroupCondition의 Instance
Example
// mc1, mc2라는 유효성 검사 조건 중 1가지 이상 참인 검사 조건
var mc1 = new MiyaCondition("a", {
    required: true
}, null, document.forms["form"]);
var mc2 = new MiyaCondition("b", {
    required: true
}, null, document.forms["form"]);
var mgc = new MiyaGroupCondition([mc1, mc2], {
    requiremin: 1
});

addCondition 함수

존재하는 MiyaGroupCondition Instance에 유효성 검사 조건(MiyaCondition)을 추가합니다.

Arguments
condition {Object} – MiyaCondition의 Instance
Returns
Number. – 추가된 유효성 검사 조건의 배열 index
Example
// 정의된 mgc라는 MiyaGroupCondition Instance에 mc3 유효성 검사 조건을 추가
mgc.addCondition(mc3);

removeCondition 함수

존재하는 MiyaGroupCondition Instance에서 특정 유효성 검사 조건(MiyaCondition)을 제거합니다.

Arguments
index {Number} – 생성자의 targetConditions 배열의 index
Returns
Nothing.
Example
// 정의된 mgc라는 MiyaGroupCondition Instance에서 3번째 유효성 검사 조건을 제거
mgc.removeCondition(2);

getCondition 함수

존재하는 MiyaGroupCondition Instance에서 특정 유효성 검사 조건을 가져옵니다.

Arguments
index {Number} – 생성자의 targetConditions 배열의 index
Returns
mixed. – 해당 유효성 검사 조건, 없을 경우 null
Example
// 정의된 mgc라는 MiyaGroupCondition Instance에서 1번째 유효성 검사 조건을 가져옵니다.
var mc1 = mc.getCondition(0);

MiyaFormat

폼 유효성 검사에서 주민등록번호, 전화번호 등 특정한 형식을 가지고 있는 검사를 수행해야 할 경우가 많습니다. MiyaFormat에서 자주 사용하는 형식을 찾아보세요. 다음의 형식들을 제공합니다. 원하시는 형식이 없는 경우 pattern 속성이나 새로운 형식 함수를 만들어보세요.

email

이메일 주소 형식을 검사합니다.

hangul

한글만 입력하였는지 검사합니다.

engonly

영문(소문자, 대문자 구분 없음)만 입력하였는지 검사합니다.

number

숫자만 입력하였는지 검사합니다.

residentno

주민등록번호 형식을 검사합니다.

jumin

주민등록번호 형식을 검사합니다. (residentno의 alias입니다.)

foreignerno

외국인등록번호 형식을 검사합니다.

bizno

사업자등록번호 형식을 검사합니다.

phone

전화번호 형식인지 검사합니다. 집 전화번호, 핸드폰 번호 형식이 포함됩니다. 기본적으로 전화번호 사이에 `-`가 있거나 없으면 유효한 형식입니다.

homephone

집 전화번호 형식을 검사합니다. 핸드폰 번호 형식은 오류입니다. 기본적으로 전화번호 사이에 `-`가 있거나 없으면 유효한 형식입니다.

handphone

핸드폰 번호 형식을 검사합니다. 집 전화번호 형식은 오류입니다. 기본적으로 전화번호 사이에 `-`가 있거나 없으면 유효한 형식입니다.

isdate

날짜 형식을 검사합니다. 예를 들어, `2007-11-30`과 같은 형식이 유효합니다.

zip

우편번호 형식을 검사합니다. 예를 들어, `123-456`과 같은 형식이 유효합니다.

jurino (0.2 버전 이상)

법인번호 형식을 검사합니다. 예를 들어, `1111112222222`, `111111-2222222`과 같은 형식이 유효합니다.


MiyaValidatorRealtime

본 기능은 기본 MiyaValidator 라이브러리에 추가적으로 MiyaValidatorRealtime 라이브러리가 필요합니다.

MiyaValidatorRealtime은 MiyaValidator에 아래의 상수와 함수들을 포함하여 실시간 폼 유효성 검사를 가능하게 해주는 확장 라이브러리입니다. 필요에 따라 사용할 수 있고 사용하지 않을 수 있습니다.

상수

REALTIME_MESSAGE_DELAY
폼 컨트롤 조작이 멈추거나 포커스를 잃게된 후 검사를 수행하기까지의 대기시간을 설정. 단위: 밀리 초(millisecond)

enableRealtimeValidation 함수

window의 onload 함수 혹은 HTML 문서의 body 태그 맨 밑에 폼 유효성 검사 선언 후 실행하여 실시간 검사를 가능하게 합니다.

Arguments
rtOptionsObj {object} – 실시간 검사의 조건을 설정 (delay 속성 : REALTIME_MESSAGE_DELAY 상수 대신 대기시간을 설정)
Returns
Nothing.
Example
실시간 검사 Example
참조.

registerRealtimeEvent 함수

폼 컨트롤의 조작(blur, click, change 등) 시 유효성 검사를 하도록 한다.

Arguments
elements {Array of DOM Element} – 유효성 검사 조건에서 다루는 DOM Element들.
Returns
Nothing.

reserveRealtimeValidation 함수

registerRealtimeEvent 함수에서 setTimeout 함수를 실행할 때를 위해 존재하는 Javascript Closures 형식의 함수

Arguments
element {DOM Element}
Returns
Nothing.

realtimeValidate 함수

DOM Element로 Miya Validator에 등록된 유효성 검사 조건(MiyaCondition)을 찾아 해당 유효성 검사 실행.

Arguments
element {DOM Element}
Returns
Nothing.

hideRealtimeMessage 함수

유효한 검사 조건의 메시지 숨김. 메시지는 폼 컨트롤의 부모 element 중 제일 가까운 block level element의 마지막 child node로 추가된다.

Arguments
condition {MiyaCondition}
Returns
Nothing.

showRealtimeMessage 함수

유효하지 않은 검사 조건의 메시지 표시. 메시지는 폼 컨트롤의 부모 element 중 제일 가까운 block level element의 마지막 child node로 추가된다.

Arguments
condition {MiyaCondition}
Returns
Nothing.

getBlockParent 함수 (static)

특정 element의 부모 element 중 제일 가까운 block level element를 반환한다.

반환할 element가 body 태그인 경우 제일 가까운 부모 element(block level 여부 상관 없이)를 반환한다. (IE5에서는 CSS에서 선언한 display 속성을 읽을 수 없는 버그가 있다.)

Arguments
element {DOM Element}
Returns
DOM Element

코멘트 남기기
트랙백 URI: http://miya.pe.kr/miya-validator/miya-validator-documentation/trackback/

“Documentations” - 4개의 코멘트/트랙백

수고하셨3님 코멘트:

정말 세밀하게 설명되어 있군요, 초보자인 저에게 많은 도움이 됩니다.

김군우님 코멘트:

감사합니다. ^^
abbr 태그는 abbreviation으로 약어라는 뜻이고 웹 문서 내에 약어를 사용한 경우 그 전체 단어를 표시해주는 용도로 사용됩니다. 참고가 되시길!

코멘트 남기기

코멘트 작성