dom-render 1.0.49 → 1.0.50

package/README.MD

@@ -205,6 +205,107 @@ using component
     - $innerHTML: element innerHTML string
 ---
 
+# validation
+```html
+  <div class="row mb-3">
+        <div class="col">
+            <span>아이디</span>
+            <input class="w-100" type="text" name="id" placeholder="아이디" dr-value-link="this.form.id.value" dr-event-blur="this.form.id.valid()" required/>
+            <span dr-on-init="this.form.id.msgElement" class="d-none"></span>
+        </div>
+    </div>
+    <div class="row mb-3">
+        <div class="col">
+            <span>비밀번호</span>
+            <input class="w-100" type="password" name="id" placeholder="숫자, 영문, 특수문자 조합 최소 8자~20자" dr-value-link="this.form.password.value" dr-event-blur="this.form.password.valid()" required/>
+            <span dr-on-init="this.form.password.msgElement" >password valid message section</span>
+            <input class="w-100" type="password" name="id" placeholder="비밀번호 재입력"  dr-value-link="this.form.confirmPassword" required/>
+            <span dr-class="{'d-block': this.form.password != this.form.confirmPassword, 'text-danger': this.form.password != this.form.confirmPassword}">2nd input password valid message section</span>
+        </div>
+    </div>
+    <div class="row mb-3">
+        <div class="col">
+            <span>이메일</span>
+            <input class="w-100" type="email" name="id" placeholder="이메일" dr-value-link="this.form.email" required/>
+            <span class="">2nd input password valid message section</span>
+        </div>
+    </div>
+</div>
+```
+```typescript
+class SignUp {
+ public form = new class extends Validation {
+        id = new class extends Validation {
+            public msgElement!: HTMLElement;
+            valid(): boolean {
+                let valid = false;
+                if (this.length == 0) {
+                    this.msgElement.className = 'd-block text-danger';
+                    this.msgElement.textContent = '아이디를 입력해주세요.';
+                } else if (this.length < 3 || this.length > 20) {
+                    this.msgElement.className = 'd-block text-danger';
+                    this.msgElement.textContent = '아이디는 4글자 이상 20자 미만 이어야 합니다.';
+                } else {
+                    let isExist = false;
+                    if (isExist) {
+                        this.msgElement.className = 'd-block text-danger';
+                        this.msgElement.textContent = '이미 사용중인 아이디입니다. 다른 아이디를 이용해주세요.';
+                    } else {
+                        this.msgElement.className = 'd-block text-success';
+                        this.msgElement.textContent = '사용 가능한 아이디입니다.';
+                        valid = true;
+                    }
+                }
+                return valid;
+            }
+        }();
+        password = new class extends Validation {
+            public msgElement!: HTMLElement;
+            valid(): boolean {
+                let valid = false;
+                let regExp = /^.*(?=.)(?=.*[0-9])(?=.*[a-zA-Z]).*$/;
+                const ERROR_REQUIRE_PW = '비밀번호를 입력해주세요.';
+                const ERROR_PW_LENGTH = '비밀번호는 8글자~20글자로 이루어져야 합니다.';
+                const ERROR_PW_REGEXP = '비밀번호는 숫자, 영문, 특수문자 조합으로 이루어져야 합니다.';
+                const SUCCESS_AVAILABLE_USER_PW = '사용 가능한 비밀번호입니다.';
+                if (this.length == 0) {
+                    this.msgElement.className = 'd-block text-danger';
+                    this.msgElement.textContent = ERROR_REQUIRE_PW;
+                } else if (this.length < 8 || this.length > 20) {
+                    this.msgElement.className = 'd-block text-danger';
+                    this.msgElement.textContent = ERROR_PW_LENGTH;
+                } else {
+                    if (regExp.test(this.value)) {
+                        this.msgElement.className = 'd-block text-success';
+                        this.msgElement.textContent = SUCCESS_AVAILABLE_USER_PW;
+                        valid = true;
+                    } else {
+                        this.msgElement.className = 'd-block text-danger';
+                        this.msgElement.textContent = ERROR_PW_REGEXP;
+                    }
+                }
+                return valid;
+            }
+        }();
+        confirmPassword = new class extends Validation {
+            value = '';
+            valid(): boolean {
+                return true;
+            }
+        }();
+        email = new class extends Validation {
+            value = '';
+            valid(): boolean {
+                return true;
+            }
+        }();
+        valid() {
+            return this.childValid()
+        }
+    }();
+}
+```
+
 # Detect Get, Set
 OnBeforeReturnSet
 ```typescript

package/dist/validations/Validation.d.ts

@@ -0,0 +1,8 @@
+export declare abstract class Validation {
+    value: string;
+    abstract valid(): boolean;
+    childValid(): boolean;
+    childInValid(): boolean;
+    get length(): number;
+    [name: string]: Validation | string | undefined | Element | any;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dom-render",
-  "version": "1.0.49",
+  "version": "1.0.50",
   "main": "DomRender.js",
   "license": "MIT",
   "description": "dom-render",

package/validations/Validation.d.ts

@@ -0,0 +1,8 @@
+export declare abstract class Validation {
+    value: string;
+    abstract valid(): boolean;
+    childValid(): boolean;
+    childInValid(): boolean;
+    get length(): number;
+    [name: string]: Validation | string | undefined | Element | any;
+}

package/validations/Validation.js

@@ -0,0 +1,25 @@
+var Validation = (function () {
+    function Validation() {
+        this.value = '';
+    }
+    Validation.prototype.childValid = function () {
+        return !this.childInValid();
+    };
+    Validation.prototype.childInValid = function () {
+        var inValid = Object.entries(this).filter(function (_a) {
+            var k = _a[0], v = _a[1];
+            return (v instanceof Validation) && !v.valid();
+        });
+        return inValid.length > 0;
+    };
+    Object.defineProperty(Validation.prototype, "length", {
+        get: function () {
+            var _a, _b;
+            return (_b = (_a = this.value) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    return Validation;
+}());
+export { Validation };