dom-render - npm Package Compare versions

Comparing version 1.0.49 to 1.0.50

package.json

 {
   "name": "dom-render",
-  "version": "1.0.49",
+  "version": "1.0.50",
   "main": "DomRender.js",
@@ -5,0 +5,0 @@ "license": "MIT",

README.MD

@@ -208,2 +208,103 @@ ![Single Page Application Framworks](assets/banner.png)
 
+# 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
@@ -210,0 +311,0 @@ OnBeforeReturnSet

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

175324

increased by3.61%

Number of package files

52

increased by6.12%

Lines of code

3155

increased by1.32%

Number of lines in readme file

390

increased by34.95%

No dependency changes