Miya Validator는 server-side validation이 이루어진 가운데 부가적으로 사용자의 편의 향상을 위해 사용할 수 있는 도구(client-side validator)입니다. server-side validation 없이 Miya Validator를 사용하는 것은 사용자에 의한 폼 전송 값의 악의적인 변형이 우려되므로 좋은 생각이 아닙니다. Miya Validator는 사용자의 편의 향상을 위한 보조도구로서 만들어졌음을 알립니다.
Miya Validator는 거친마루님의 유연한 폼 검사기의 아이디어를 바탕으로 제작된 라이브러리입니다. 이 라이브러리는 GPL이 적용됩니다.
Documentation
Miya Validator의 문서를 제공합니다. 문서 중에 오류가 있거나 혹은 Miya Validator의 개선요구사항이 있으시면 mctenshi-at-gmail-dot-com으로 연락 바랍니다.
Contents
- MiyaValidator
- 상수
- 생성자
- add 함수
- addCondition 함수
- addGroup 함수
- addGroupCondition 함수
- validate 함수
- validateGroup 함수
- validateCondition 함수
- raiseError 함수
- getErrorElement 함수
- getErrorMessage 함수
- isActiveformControl 함수 (static)
- isEmptyElement 함수 (static)
- getFormElement 함수 (static)
- getElement 함수 (static)
- getElementType 함수 (static)
- getValue 함수 (static)
- getNextElement 함수 (static)
- MiyaCondition
- MiyaGroupCondition
- MiyaFormat
- MiyaValidatorRealtime
MiyaValidator
Miya Validator의 핵심, MiyaValidator Class입니다.
상수
- FORMAT_MAP
-
MiyaCondition의 option 속성의 값에 따라 검사에 사용할 함수를 가리킵니다. 아래와 같이 선언되어 있으며 기존의 속성값에 대한 변경이나 새로운 항목의 추가가 가능합니다.
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`는 MiyaCondition의 option 속성의 값입니다. 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 속성이나 새로운 형식 함수를 만들어보세요.
이메일 주소 형식을 검사합니다.
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
“Documentations” - 4개의 코멘트/트랙백
정말 세밀하게 설명되어 있군요, 초보자인 저에게 많은 도움이 됩니다.
감사합니다. ^^
abbr태그는 abbreviation으로 약어라는 뜻이고 웹 문서 내에 약어를 사용한 경우 그 전체 단어를 표시해주는 용도로 사용됩니다. 참고가 되시길!반가워요. 군우씨~
잘 지내죠?
네, 잘 지내시죠? :D
이런 데 인사를 남겨주시다니… ㅋㅋ
코멘트 남기기