dom-render 1.0.49 → 1.0.50

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.MD CHANGED
@@ -205,6 +205,107 @@ using component
205
205
  - $innerHTML: element innerHTML string
206
206
  ---
207
207
 
208
+ # validation
209
+ ```html
210
+ <div class="row mb-3">
211
+ <div class="col">
212
+ <span>아이디</span>
213
+ <input class="w-100" type="text" name="id" placeholder="아이디" dr-value-link="this.form.id.value" dr-event-blur="this.form.id.valid()" required/>
214
+ <span dr-on-init="this.form.id.msgElement" class="d-none"></span>
215
+ </div>
216
+ </div>
217
+ <div class="row mb-3">
218
+ <div class="col">
219
+ <span>비밀번호</span>
220
+ <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/>
221
+ <span dr-on-init="this.form.password.msgElement" >password valid message section</span>
222
+ <input class="w-100" type="password" name="id" placeholder="비밀번호 재입력" dr-value-link="this.form.confirmPassword" required/>
223
+ <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>
224
+ </div>
225
+ </div>
226
+ <div class="row mb-3">
227
+ <div class="col">
228
+ <span>이메일</span>
229
+ <input class="w-100" type="email" name="id" placeholder="이메일" dr-value-link="this.form.email" required/>
230
+ <span class="">2nd input password valid message section</span>
231
+ </div>
232
+ </div>
233
+ </div>
234
+ ```
235
+ ```typescript
236
+ class SignUp {
237
+ public form = new class extends Validation {
238
+ id = new class extends Validation {
239
+ public msgElement!: HTMLElement;
240
+ valid(): boolean {
241
+ let valid = false;
242
+ if (this.length == 0) {
243
+ this.msgElement.className = 'd-block text-danger';
244
+ this.msgElement.textContent = '아이디를 입력해주세요.';
245
+ } else if (this.length < 3 || this.length > 20) {
246
+ this.msgElement.className = 'd-block text-danger';
247
+ this.msgElement.textContent = '아이디는 4글자 이상 20자 미만 이어야 합니다.';
248
+ } else {
249
+ let isExist = false;
250
+ if (isExist) {
251
+ this.msgElement.className = 'd-block text-danger';
252
+ this.msgElement.textContent = '이미 사용중인 아이디입니다. 다른 아이디를 이용해주세요.';
253
+ } else {
254
+ this.msgElement.className = 'd-block text-success';
255
+ this.msgElement.textContent = '사용 가능한 아이디입니다.';
256
+ valid = true;
257
+ }
258
+ }
259
+ return valid;
260
+ }
261
+ }();
262
+ password = new class extends Validation {
263
+ public msgElement!: HTMLElement;
264
+ valid(): boolean {
265
+ let valid = false;
266
+ let regExp = /^.*(?=.)(?=.*[0-9])(?=.*[a-zA-Z]).*$/;
267
+ const ERROR_REQUIRE_PW = '비밀번호를 입력해주세요.';
268
+ const ERROR_PW_LENGTH = '비밀번호는 8글자~20글자로 이루어져야 합니다.';
269
+ const ERROR_PW_REGEXP = '비밀번호는 숫자, 영문, 특수문자 조합으로 이루어져야 합니다.';
270
+ const SUCCESS_AVAILABLE_USER_PW = '사용 가능한 비밀번호입니다.';
271
+ if (this.length == 0) {
272
+ this.msgElement.className = 'd-block text-danger';
273
+ this.msgElement.textContent = ERROR_REQUIRE_PW;
274
+ } else if (this.length < 8 || this.length > 20) {
275
+ this.msgElement.className = 'd-block text-danger';
276
+ this.msgElement.textContent = ERROR_PW_LENGTH;
277
+ } else {
278
+ if (regExp.test(this.value)) {
279
+ this.msgElement.className = 'd-block text-success';
280
+ this.msgElement.textContent = SUCCESS_AVAILABLE_USER_PW;
281
+ valid = true;
282
+ } else {
283
+ this.msgElement.className = 'd-block text-danger';
284
+ this.msgElement.textContent = ERROR_PW_REGEXP;
285
+ }
286
+ }
287
+ return valid;
288
+ }
289
+ }();
290
+ confirmPassword = new class extends Validation {
291
+ value = '';
292
+ valid(): boolean {
293
+ return true;
294
+ }
295
+ }();
296
+ email = new class extends Validation {
297
+ value = '';
298
+ valid(): boolean {
299
+ return true;
300
+ }
301
+ }();
302
+ valid() {
303
+ return this.childValid()
304
+ }
305
+ }();
306
+ }
307
+ ```
308
+
208
309
  # Detect Get, Set
209
310
  OnBeforeReturnSet
210
311
  ```typescript
@@ -0,0 +1,8 @@
1
+ export declare abstract class Validation {
2
+ value: string;
3
+ abstract valid(): boolean;
4
+ childValid(): boolean;
5
+ childInValid(): boolean;
6
+ get length(): number;
7
+ [name: string]: Validation | string | undefined | Element | any;
8
+ }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "dom-render",
3
- "version": "1.0.49",
3
+ "version": "1.0.50",
4
4
  "main": "DomRender.js",
5
5
  "license": "MIT",
6
6
  "description": "dom-render",
@@ -0,0 +1,8 @@
1
+ export declare abstract class Validation {
2
+ value: string;
3
+ abstract valid(): boolean;
4
+ childValid(): boolean;
5
+ childInValid(): boolean;
6
+ get length(): number;
7
+ [name: string]: Validation | string | undefined | Element | any;
8
+ }
@@ -0,0 +1,25 @@
1
+ var Validation = (function () {
2
+ function Validation() {
3
+ this.value = '';
4
+ }
5
+ Validation.prototype.childValid = function () {
6
+ return !this.childInValid();
7
+ };
8
+ Validation.prototype.childInValid = function () {
9
+ var inValid = Object.entries(this).filter(function (_a) {
10
+ var k = _a[0], v = _a[1];
11
+ return (v instanceof Validation) && !v.valid();
12
+ });
13
+ return inValid.length > 0;
14
+ };
15
+ Object.defineProperty(Validation.prototype, "length", {
16
+ get: function () {
17
+ var _a, _b;
18
+ return (_b = (_a = this.value) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0;
19
+ },
20
+ enumerable: false,
21
+ configurable: true
22
+ });
23
+ return Validation;
24
+ }());
25
+ export { Validation };