@nuka9510/simple-validation 1.3.0 → 1.4.0

package/@types/validation.d.ts

@@ -15,20 +15,20 @@ export interface result {
 }
 
 export interface dateEl {
-  S?: InputElement;
-  E?: InputElement;
+  S?: HTMLInputElement;
+  E?: HTMLInputElement;
 }
 
-/** validation check할 Element를 담는 객체 */
-export interface el {
-  el?: InputElement[];
-  date?: {
-    [date: string]: dateEl;
-  };
+export interface date {
+  [name: string]: dateEl;
+}
+
+export interface checkbox {
+  [name: string]: HTMLInputElement[];
 }
 
 export interface radio {
-  [required: string]: InputElement[];
+  [name: string]: HTMLInputElement[];
 }
 
 /** validation에 사용할 정규식을 담은 객체 */

package/dist/cjs/index.cjs

@@ -59,38 +59,46 @@ __webpack_require__.r(__webpack_exports__);
  * Validation Check를 위한 객체
  */
 class Validation {
-    /** 결과 값 객체 */
     result;
-    /** validation check할 Element를 담는 객체 */
-    #el;
-    /** validation check할 radio Element를 담는 객체 */
+    #input;
+    #date;
+    #checkbox;
     #radio;
-    /** validation check에 사용할 정규식을 담은 객체 */
     #regex;
     /**
      * Validation Check를 위한 객체
      *
      * ```
      * <form name="form">
-     *   <input type="text" name="text" data-sv-pattern="password" data-sv-input-name="비밀번호" minlength="0" maxlength="10">
-     *   <input type="text" name="text" data-sv-pattern="password" minlength="0" maxlength="10" required="비밀번호">
-     *   <input type="date" name="sdate1" data-sv-date="date1" data-sv-date-state="S" data-sv-input-name="검색일1">
-     *   <input type="date" name="edate1" data-sv-date="date1" data-sv-date-state="E" data-sv-input-name="검색일1">
-     *   <input type="date" name="sdate2" data-sv-date="date2" data-sv-date-state="S" required="검색일2">
-     *   <input type="date" name="edate2" data-sv-date="date2" data-sv-date-state="E" required="검색일2">
+     *   <input type="text" name="text" minlength="0" maxlength="10" data-sv-pattern="password" data-sv-input="비밀번호">
+     *   <input type="text" name="text" minlength="0" maxlength="10" data-sv-pattern="password" required="비밀번호">
+     *
+     *   <input type="date" name="sdate1" data-sv-name="date1" data-sv-state="S" data-sv-date="검색일1">
+     *   <input type="date" name="edate1" data-sv-name="date1" data-sv-state="E" data-sv-date="검색일1">
+     *   <input type="date" name="sdate2" data-sv-name="date2" data-sv-state="S" required="검색일2">
+     *   <input type="date" name="edate2" data-sv-name="date2" data-sv-state="E" required="검색일2">
+     *
+     *   <input type="checkbox" data-sv-name="checkbox1" required="옵션">
+     *   <input type="checkbox" data-sv-name="checkbox1" required="옵션">
+     *   <input type="checkbox" name="checkbox2" required="옵션">
+     *   <input type="checkbox" name="checkbox2" required="옵션">
+     *
+     *   <input type="radio" data-sv-name="radio1" required="옵션">
+     *   <input type="radio" data-sv-name="radio1" required="옵션">
+     *   <input type="radio" name="radio2" required="옵션">
+     *   <input type="radio" name="radio2" required="옵션">
      * </form>
      * <script type="importmap">
      *   {
      *     "imports": {
-     *       "@nuka9510/js-util": "https://cdn.jsdelivr.net/npm/@nuka9510/js-util/dist/index.js",
-     *       "@nuka9510/simple-validation": "https://cdn.jsdelivr.net/npm/@nuka9510/simple-validation/dist/index.js"
+     *       "@nuka9510/simple-validation": "https://cdn.jsdelivr.net/npm/@nuka9510/simple-validation/dist/esm/index.min.mjs"
      *     }
      *   }
      * </script>
      * <script type="module">
-     *   import { SValidation } from "@nuka9510/simple-validation";
+     *   import { Validation } from "@nuka9510/simple-validation";
      *
-     *   const validation = new SValidation({regex: {password: /^[\S!?@#$%^&*():;+-=~{}<>\_\[\]\|\\\"\'\,\.\/\`]{6,10}$/}});
+     *   const validation = new Validation({regex: {password: /^[\S!?@#$%^&*():;+-=~{}<>\_\[\]\|\\\"\'\,\.\/\`]{6,10}$/}});
      *
      *   validation.run(form);
      *
@@ -103,16 +111,16 @@ class Validation {
      * </script>
      * ```
      */
-    constructor(config) { this.init(config); }
-    /** 객체 초기화 */
-    init(
-    /** validation 초기화를 위한 객체 */ config = null) {
+    constructor(
+    /** validation 초기화를 위한 객체 */ config) { this.#init(config); }
+    #init(config = null) {
         this.#resultInit();
-        this.#elInit();
+        this.#inputInit();
+        this.#dateInit();
+        this.#checkboxInit();
         this.#radioInit();
         this.#regexInit(config?.regex);
     }
-    /** 결과 값 초기화 */
     #resultInit() {
         this.result = {
             flag: true,
@@ -121,235 +129,272 @@ class Validation {
             phase: _enums_phase_js__WEBPACK_IMPORTED_MODULE_1__["default"].INIT
         };
     }
-    /** validation check할 Element를 담는 객체 초기화 */
-    #elInit() { this.#el = {}; }
-    /** validation check할 radio Element를 담는 객체 초기화 */
+    #inputInit() { this.#input = []; }
+    #dateInit() { this.#date = {}; }
+    #checkboxInit() { this.#checkbox = {}; }
     #radioInit() { this.#radio = {}; }
-    /** validation check에 사용할 정규식을 담은 객체 초기화 */
     #regexInit(regex = null) {
         this.#regex = (!_nuka9510_js_util__WEBPACK_IMPORTED_MODULE_0__.Util.empty(regex) &&
             _nuka9510_js_util__WEBPACK_IMPORTED_MODULE_0__.Util.isObject(regex))
             ? {
-                ...this.#regex,
+                ...(this.#regex ?? {}),
                 ...regex
             }
-            : { ...this.#regex };
+            : { ...(this.#regex ?? {}) };
     }
-    /** el에 있는 Element들을 required check한다.  */
-    #required(el) {
-        const required = el.getAttribute('required');
-        if (!_nuka9510_js_util__WEBPACK_IMPORTED_MODULE_0__.Util.empty(required)) {
-            if (el.type == 'radio') {
+    #setEl(el) {
+        const type = el.getAttribute('type');
+        switch (type) {
+            case 'date':
+            case 'time':
+            case 'datetime-local':
+            case 'month':
+            case 'week':
+                this.#setDate(el);
+                break;
+            case 'checkbox':
+                this.#setCheckbox(el);
+                break;
+            case 'radio':
                 this.#setRadio(el);
-            }
-            else if (_nuka9510_js_util__WEBPACK_IMPORTED_MODULE_0__.Util.empty(el.value)) {
-                this.result.flag = false;
-                this.result.alertMsg = `'${required}'을/를 입력해 주세요.`;
-                this.result.el = el;
-                this.result.phase = _enums_phase_js__WEBPACK_IMPORTED_MODULE_1__["default"].REQUIRED;
-            }
-        }
-    }
-    /** radio에 있는 Element들을 required check한다.  */
-    #requiredRadio() {
-        for (const i in this.#radio) {
-            const el = this.#radio[i][0], flag = this.#radio[i].some((...arg) => arg[0].checked);
-            if (!flag) {
-                this.result.flag = false;
-                this.result.alertMsg = `'${i}'을/를 선택해주세요.`;
-                this.result.el = el;
-                this.result.phase = _enums_phase_js__WEBPACK_IMPORTED_MODULE_1__["default"].REQUIRED;
                 break;
-            }
+            default:
+                this.#setInput(el);
+                break;
         }
     }
-    /** el에 Element를 담는다.  */
-    #setEl(el) {
-        const pattern = el.dataset['svPattern'], date = el.dataset['svDate'];
-        if (!_nuka9510_js_util__WEBPACK_IMPORTED_MODULE_0__.Util.empty(pattern)) {
-            if (_nuka9510_js_util__WEBPACK_IMPORTED_MODULE_0__.Util.empty(this.#el.el)) {
-                this.#el.el = [];
-            }
-            this.#el.el?.push(el);
-        }
-        if (!_nuka9510_js_util__WEBPACK_IMPORTED_MODULE_0__.Util.empty(date)) {
-            const state = el.dataset['svDateState'];
+    #setInput(el) { this.#input.push(el); }
+    #setDate(el) {
+        const name = el.getAttribute('data-sv-name');
+        if (!_nuka9510_js_util__WEBPACK_IMPORTED_MODULE_0__.Util.empty(name)) {
+            const state = el.getAttribute('data-sv-state');
             switch (state) {
                 case 'S':
                 case 'E':
-                    if (_nuka9510_js_util__WEBPACK_IMPORTED_MODULE_0__.Util.empty(this.#el.date)) {
-                        this.#el.date = {};
-                    }
-                    if (_nuka9510_js_util__WEBPACK_IMPORTED_MODULE_0__.Util.empty(this.#el.date[date])) {
-                        this.#el.date[date] = {};
+                    if (_nuka9510_js_util__WEBPACK_IMPORTED_MODULE_0__.Util.empty(this.#date[name])) {
+                        this.#date[name] = {};
                     }
-                    this.#el.date[date][state] = el;
+                    this.#date[name][state] = el;
                     break;
+                default:
+                    this.#input.push(el);
+                    break;
+            }
+        }
+        else {
+            this.#input.push(el);
+        }
+    }
+    #setCheckbox(el) {
+        const name = el.getAttribute('name') || el.getAttribute('data-sv-name');
+        if (!_nuka9510_js_util__WEBPACK_IMPORTED_MODULE_0__.Util.empty(name)) {
+            if (_nuka9510_js_util__WEBPACK_IMPORTED_MODULE_0__.Util.empty(this.#checkbox[name])) {
+                this.#checkbox[name] = [];
             }
+            this.#checkbox[name].push(el);
         }
     }
-    /** `#radio`에 type이 'radio'인 Element를 담는다.  */
     #setRadio(el) {
-        const required = el.getAttribute('required');
-        if (!_nuka9510_js_util__WEBPACK_IMPORTED_MODULE_0__.Util.empty(required)) {
-            if (_nuka9510_js_util__WEBPACK_IMPORTED_MODULE_0__.Util.empty(this.#radio[required])) {
-                this.#radio[required] = [el];
+        const name = el.getAttribute('name') || el.getAttribute('data-sv-name');
+        if (!_nuka9510_js_util__WEBPACK_IMPORTED_MODULE_0__.Util.empty(name)) {
+            if (_nuka9510_js_util__WEBPACK_IMPORTED_MODULE_0__.Util.empty(this.#radio[name])) {
+                this.#radio[name] = [];
             }
-            else {
-                this.#radio[required].push(el);
+            this.#radio[name].push(el);
+        }
+    }
+    #requiredEl() {
+        if (this.result.flag) {
+            this.#requiredInput();
+        }
+        if (this.result.flag) {
+            this.#requiredDate();
+        }
+        if (this.result.flag) {
+            this.#requiredCheckbox();
+        }
+        if (this.result.flag) {
+            this.#requiredRadio();
+        }
+    }
+    #requiredInput() {
+        for (const input of this.#input) {
+            const required = input.getAttribute('required');
+            if (!_nuka9510_js_util__WEBPACK_IMPORTED_MODULE_0__.Util.empty(required) &&
+                _nuka9510_js_util__WEBPACK_IMPORTED_MODULE_0__.Util.empty(input.value)) {
+                this.result = {
+                    flag: false,
+                    alertMsg: `'${required}'을/를 입력해 주세요.`,
+                    el: input,
+                    phase: _enums_phase_js__WEBPACK_IMPORTED_MODULE_1__["default"].REQUIRED
+                };
+                break;
             }
         }
     }
-    /**
-     * Element들을 validation check 한다.
-     * ```
-     * -----------------------
-     * date : isDate
-     * -----------------------
-     * el : isPattern
-     * ```
-     */
-    #match() {
-        for (const i in this.#el) {
-            if (this.result.flag) {
-                switch (i) {
-                    case 'date':
-                        this.#isDate(this.#el[i]);
-                        break;
-                    case 'el':
-                        this.#isPattern(this.#el[i]);
-                        break;
+    #requiredDate() {
+        for (const name in this.#date) {
+            for (const state in this.#date[name]) {
+                const date = this.#date[name][state], required = date.getAttribute('required');
+                if (!_nuka9510_js_util__WEBPACK_IMPORTED_MODULE_0__.Util.empty(required) &&
+                    _nuka9510_js_util__WEBPACK_IMPORTED_MODULE_0__.Util.empty(date.value)) {
+                    this.result = {
+                        flag: false,
+                        alertMsg: `'${required}'을/를 입력해 주세요.`,
+                        el: date,
+                        phase: _enums_phase_js__WEBPACK_IMPORTED_MODULE_1__["default"].REQUIRED
+                    };
+                    break;
                 }
             }
-            else {
+        }
+    }
+    #requiredCheckbox() {
+        for (const name in this.#checkbox) {
+            const checkboxList = this.#checkbox[name].filter((...arg) => !_nuka9510_js_util__WEBPACK_IMPORTED_MODULE_0__.Util.empty(arg[0].getAttribute('required')));
+            if (!_nuka9510_js_util__WEBPACK_IMPORTED_MODULE_0__.Util.empty(checkboxList) &&
+                checkboxList.some((...arg) => !arg[0].checked)) {
+                const checkbox = checkboxList.find((...arg) => !arg[0].checked), required = checkbox.getAttribute('required');
+                this.result = {
+                    flag: false,
+                    alertMsg: `'${required}'을/를 선택해주세요.`,
+                    el: checkbox,
+                    phase: _enums_phase_js__WEBPACK_IMPORTED_MODULE_1__["default"].REQUIRED
+                };
                 break;
             }
         }
     }
-    /** date check */
-    #isDate(el) {
-        for (const i in el) {
-            if (this.result.flag) {
-                const sdate = el[i].S.value, edate = el[i].E.value;
-                if (!_nuka9510_js_util__WEBPACK_IMPORTED_MODULE_0__.Util.empty(sdate) &&
-                    !_nuka9510_js_util__WEBPACK_IMPORTED_MODULE_0__.Util.empty(edate)) {
-                    const inputName = el[i].S.dataset['svInputName'] ||
-                        el[i].E.dataset['svInputName'], required = el[i].S.getAttribute('required') ||
-                        el[i].E.getAttribute('required');
-                    if ((new Date(sdate)).getTime() > (new Date(edate)).getTime()) {
-                        this.result.flag = false;
-                        this.result.alertMsg = `'${inputName || required}'의 시작일이 종료일 보다 늦습니다.`;
-                        this.result.el = el[i].S;
-                        this.result.phase = _enums_phase_js__WEBPACK_IMPORTED_MODULE_1__["default"].MATCH;
-                    }
-                }
-            }
-            else {
+    #requiredRadio() {
+        for (const name in this.#radio) {
+            const radioList = this.#radio[name].filter((...arg) => !_nuka9510_js_util__WEBPACK_IMPORTED_MODULE_0__.Util.empty(arg[0].getAttribute('required')));
+            if (!_nuka9510_js_util__WEBPACK_IMPORTED_MODULE_0__.Util.empty(radioList) &&
+                radioList.every((...arg) => !arg[0].checked)) {
+                const radio = radioList.find((...arg) => !arg[0].checked), required = radio.getAttribute('required');
+                this.result = {
+                    flag: false,
+                    alertMsg: `'${required}'을/를 선택해주세요.`,
+                    el: radio,
+                    phase: _enums_phase_js__WEBPACK_IMPORTED_MODULE_1__["default"].REQUIRED
+                };
                 break;
             }
         }
     }
-    /** regex check */
-    #isPattern(el) {
-        if (Array.isArray(el)) {
-            for (const i of el) {
-                const pattern = i.dataset['svPattern'], inputName = i.dataset['svInputName'], required = i.getAttribute('required'), val = i.value;
-                if (Object.keys(this.#regex).includes(pattern)) {
-                    if (!_nuka9510_js_util__WEBPACK_IMPORTED_MODULE_0__.Util.empty(val) &&
-                        !this.#regex[pattern].test(val)) {
-                        this.result.flag = false;
-                        this.result.alertMsg = `'${inputName || required}'의 형식이 올바르지 않습니다.`;
-                        this.result.el = i;
-                        this.result.phase = _enums_phase_js__WEBPACK_IMPORTED_MODULE_1__["default"].MATCH;
+    #length() {
+        for (const input of this.#input) {
+            const input_ = input.getAttribute('data-sv-input') || input.getAttribute('required'), length = input.value.length;
+            if (!(input instanceof HTMLSelectElement)) {
+                if (input.minLength >= 0 &&
+                    input.maxLength >= 0) {
+                    if (length < input.minLength ||
+                        length > input.maxLength) {
+                        this.result = {
+                            flag: false,
+                            alertMsg: `'${input_}'은/는 ${input.minLength}~${input.maxLength}자 이내로 입력해주세요.`,
+                            el: input,
+                            phase: _enums_phase_js__WEBPACK_IMPORTED_MODULE_1__["default"].LENGTH
+                        };
+                        break;
+                    }
+                }
+                else if (input.minLength >= 0 &&
+                    input.maxLength < 0) {
+                    if (length < input.minLength) {
+                        this.result = {
+                            flag: false,
+                            alertMsg: `'${input_}'은/는 ${input.minLength}자 이상으로 입력해주세요.`,
+                            el: input,
+                            phase: _enums_phase_js__WEBPACK_IMPORTED_MODULE_1__["default"].LENGTH
+                        };
+                        break;
+                    }
+                }
+                else if (input.minLength < 0 &&
+                    input.maxLength >= 0) {
+                    if (length > input.maxLength) {
+                        this.result = {
+                            flag: false,
+                            alertMsg: `'${input_}'은/는 ${input.maxLength}자 이하로 입력해주세요.`,
+                            el: input,
+                            phase: _enums_phase_js__WEBPACK_IMPORTED_MODULE_1__["default"].LENGTH
+                        };
                         break;
                     }
                 }
             }
         }
-        else {
-            const pattern = el.dataset['svPattern'], inputName = el.dataset['svInputName'], required = el.getAttribute('required'), val = el.value;
-            if (Object.keys(this.#regex).includes(pattern)) {
-                if (!_nuka9510_js_util__WEBPACK_IMPORTED_MODULE_0__.Util.empty(val) &&
-                    !this.#regex[pattern].test(val)) {
-                    this.result.flag = false;
-                    this.result.alertMsg = `'${inputName || required}'의 형식이 올바르지 않습니다.`;
-                    this.result.el = el;
-                    this.result.phase = _enums_phase_js__WEBPACK_IMPORTED_MODULE_1__["default"].MATCH;
+    }
+    #match(regex) {
+        if (this.result.flag) {
+            this.#isPattern(regex);
+        }
+        if (this.result.flag) {
+            this.#isDate();
+        }
+    }
+    #isPattern(regex = null) {
+        const regex_ = {
+            ...this.#regex,
+            ...(regex ?? {})
+        };
+        for (const input of this.#input) {
+            const pattern = input.getAttribute('data-sv-pattern');
+            if (Object.keys(regex_).includes(pattern)) {
+                const input_ = input.getAttribute('data-sv-input') || input.getAttribute('required'), value = input.value;
+                if (!_nuka9510_js_util__WEBPACK_IMPORTED_MODULE_0__.Util.empty(value) &&
+                    !regex_[pattern].test(value)) {
+                    this.result = {
+                        flag: false,
+                        alertMsg: `'${input_}'의 형식이 올바르지 않습니다.`,
+                        el: input,
+                        phase: _enums_phase_js__WEBPACK_IMPORTED_MODULE_1__["default"].MATCH
+                    };
+                    break;
                 }
             }
         }
     }
-    /** Element value의 length를 check 한다.  */
-    #length() {
-        for (const i in this.#el) {
-            if (i == 'el' &&
-                this.result.flag) {
-                for (const j of this.#el[i]) {
-                    const inputName = j.dataset['svInputName'], required = j.getAttribute('required'), val = j.value.length;
-                    if (!(j instanceof HTMLSelectElement)) {
-                        if (j.minLength >= 0 &&
-                            j.maxLength >= 0) {
-                            if (val < j.minLength ||
-                                val > j.maxLength) {
-                                this.result.flag = false;
-                                this.result.alertMsg = `'${inputName || required}'은/는 ${j.minLength}~${j.maxLength}자 이내로 입력해주세요.`;
-                                this.result.el = j;
-                                this.result.phase = _enums_phase_js__WEBPACK_IMPORTED_MODULE_1__["default"].LENGTH;
-                                break;
-                            }
-                        }
-                        else if (j.minLength >= 0 &&
-                            j.maxLength < 0) {
-                            if (val < j.minLength) {
-                                this.result.flag = false;
-                                this.result.alertMsg = `'${inputName || required}'은/는 ${j.minLength}자 이상으로 입력해주세요.`;
-                                this.result.el = j;
-                                this.result.phase = _enums_phase_js__WEBPACK_IMPORTED_MODULE_1__["default"].LENGTH;
-                                break;
-                            }
-                        }
-                        else if (j.minLength < 0 &&
-                            j.maxLength >= 0) {
-                            if (val > j.maxLength) {
-                                this.result.flag = false;
-                                this.result.alertMsg = `'${inputName || required}'은/는 ${j.maxLength}자 이하로 입력해주세요.`;
-                                this.result.el = j;
-                                this.result.phase = _enums_phase_js__WEBPACK_IMPORTED_MODULE_1__["default"].LENGTH;
-                                break;
-                            }
-                        }
-                    }
+    #isDate() {
+        for (const name in this.#date) {
+            const date = this.#date[name], sdate = date.S, edate = date.E;
+            if (!_nuka9510_js_util__WEBPACK_IMPORTED_MODULE_0__.Util.empty(sdate) &&
+                !_nuka9510_js_util__WEBPACK_IMPORTED_MODULE_0__.Util.empty(edate)) {
+                const input_ = sdate.getAttribute('data-sv-date') ||
+                    edate.getAttribute('data-sv-date') ||
+                    sdate.getAttribute('required') ||
+                    edate.getAttribute('required');
+                if (sdate.valueAsNumber > edate.valueAsNumber) {
+                    this.result = {
+                        flag: false,
+                        alertMsg: `'${input_}'의 시작일이 종료일 보다 늦습니다.`,
+                        el: sdate,
+                        phase: _enums_phase_js__WEBPACK_IMPORTED_MODULE_1__["default"].MATCH
+                    };
+                    break;
                 }
             }
-            else if (!this.result.flag) {
-                break;
-            }
         }
     }
     /** validation을 실행한다. */
-    run(form) {
-        this.init();
+    run(form, 
+    /** validation 추가 설정*/ config) {
+        this.#init();
         for (const el of form.elements) {
-            if (this.result.flag) {
-                if (['INPUT', 'SELECT', 'TEXTAREA'].includes(el.tagName)) {
-                    if (!el.disabled) {
-                        this.#required(el);
-                        this.#setEl(el);
-                    }
+            if (['INPUT', 'SELECT', 'TEXTAREA'].includes(el.tagName)) {
+                if (!el.disabled) {
+                    this.#setEl(el);
                 }
             }
-            else {
-                break;
-            }
         }
         if (this.result.flag) {
-            this.#requiredRadio();
+            this.#requiredEl();
         }
         if (this.result.flag) {
-            this.#match();
+            this.#length();
         }
         if (this.result.flag) {
-            this.#length();
+            this.#match(config?.regex);
         }
         if (this.result.flag) {
             this.result.phase = _enums_phase_js__WEBPACK_IMPORTED_MODULE_1__["default"].DONE;