@nuka9510/simple-validation 1.2.8 → 1.4.0

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.
Files changed (18) hide show
  1. package/@types/validation.d.ts +13 -9
  2. package/README.md +3 -16
  3. package/dist/cjs/index.cjs +300 -185
  4. package/dist/cjs/index.cjs.map +1 -1
  5. package/dist/cjs/index.min.cjs +1 -1
  6. package/dist/enums/phase.d.ts +16 -0
  7. package/dist/enums/phase.js +24 -0
  8. package/dist/esm/index.min.mjs +1 -1
  9. package/dist/esm/index.mjs +302 -186
  10. package/dist/esm/index.mjs.map +1 -1
  11. package/dist/index.d.ts +2 -1
  12. package/dist/index.js +2 -1
  13. package/dist/js/index.js +300 -185
  14. package/dist/js/index.js.map +1 -1
  15. package/dist/js/index.min.js +1 -1
  16. package/dist/validation.d.ts +24 -16
  17. package/dist/validation.js +243 -185
  18. package/package.json +3 -2
package/dist/validation.js CHANGED
@@ -1,40 +1,49 @@
1
1
  import { Util } from "@nuka9510/js-util";
2
+ import Phase from "./enums/phase.js";
2
3
  /**
3
4
  * Validation Check를 위한 객체
4
5
  */
5
6
  export default class Validation {
6
- /** 결과 값 객체 */
7
7
  result;
8
- /** validation check할 Element를 담는 객체 */
9
- #el;
10
- /** validation check할 radio Element를 담는 객체 */
8
+ #input;
9
+ #date;
10
+ #checkbox;
11
11
  #radio;
12
- /** validation check에 사용할 정규식을 담은 객체 */
13
12
  #regex;
14
13
  /**
15
14
  * Validation Check를 위한 객체
16
15
  *
17
16
  * ```
18
17
  * <form name="form">
19
- * <input type="text" name="text" data-sv-pattern="password" data-sv-input-name="비밀번호" minlength="0" maxlength="10">
20
- * <input type="text" name="text" data-sv-pattern="password" minlength="0" maxlength="10" required="비밀번호">
21
- * <input type="date" name="sdate1" data-sv-date="date1" data-sv-date-state="S" data-sv-input-name="검색일1">
22
- * <input type="date" name="edate1" data-sv-date="date1" data-sv-date-state="E" data-sv-input-name="검색일1">
23
- * <input type="date" name="sdate2" data-sv-date="date2" data-sv-date-state="S" required="검색일2">
24
- * <input type="date" name="edate2" data-sv-date="date2" data-sv-date-state="E" required="검색일2">
18
+ * <input type="text" name="text" minlength="0" maxlength="10" data-sv-pattern="password" data-sv-input="비밀번호">
19
+ * <input type="text" name="text" minlength="0" maxlength="10" data-sv-pattern="password" required="비밀번호">
20
+ *
21
+ * <input type="date" name="sdate1" data-sv-name="date1" data-sv-state="S" data-sv-date="검색일1">
22
+ * <input type="date" name="edate1" data-sv-name="date1" data-sv-state="E" data-sv-date="검색일1">
23
+ * <input type="date" name="sdate2" data-sv-name="date2" data-sv-state="S" required="검색일2">
24
+ * <input type="date" name="edate2" data-sv-name="date2" data-sv-state="E" required="검색일2">
25
+ *
26
+ * <input type="checkbox" data-sv-name="checkbox1" required="옵션">
27
+ * <input type="checkbox" data-sv-name="checkbox1" required="옵션">
28
+ * <input type="checkbox" name="checkbox2" required="옵션">
29
+ * <input type="checkbox" name="checkbox2" required="옵션">
30
+ *
31
+ * <input type="radio" data-sv-name="radio1" required="옵션">
32
+ * <input type="radio" data-sv-name="radio1" required="옵션">
33
+ * <input type="radio" name="radio2" required="옵션">
34
+ * <input type="radio" name="radio2" required="옵션">
25
35
  * </form>
26
36
  * <script type="importmap">
27
37
  * {
28
38
  * "imports": {
29
- * "@nuka9510/js-util": "https://cdn.jsdelivr.net/npm/@nuka9510/js-util/dist/index.js",
30
- * "@nuka9510/simple-validation": "https://cdn.jsdelivr.net/npm/@nuka9510/simple-validation/dist/index.js"
39
+ * "@nuka9510/simple-validation": "https://cdn.jsdelivr.net/npm/@nuka9510/simple-validation/dist/esm/index.min.mjs"
31
40
  * }
32
41
  * }
33
42
  * </script>
34
43
  * <script type="module">
35
- * import { SValidation } from "@nuka9510/simple-validation";
44
+ * import { Validation } from "@nuka9510/simple-validation";
36
45
  *
37
- * const validation = new SValidation({regex: {password: /^[\S!?@#$%^&*():;+-=~{}<>\_\[\]\|\\\"\'\,\.\/\`]{6,10}$/}});
46
+ * const validation = new Validation({regex: {password: /^[\S!?@#$%^&*():;+-=~{}<>\_\[\]\|\\\"\'\,\.\/\`]{6,10}$/}});
38
47
  *
39
48
  * validation.run(form);
40
49
  *
@@ -47,244 +56,293 @@ export default class Validation {
47
56
  * </script>
48
57
  * ```
49
58
  */
50
- constructor(config) { this.init(config); }
51
- /** 객체 초기화 */
52
- init(
53
- /** validation 초기화를 위한 객체 */ config = null) {
59
+ constructor(
60
+ /** validation 초기화를 위한 객체 */ config) { this.#init(config); }
61
+ #init(config = null) {
54
62
  this.#resultInit();
55
- this.#elInit();
63
+ this.#inputInit();
64
+ this.#dateInit();
65
+ this.#checkboxInit();
56
66
  this.#radioInit();
57
67
  this.#regexInit(config?.regex);
58
68
  }
59
- /** 결과 값 초기화 */
60
69
  #resultInit() {
61
70
  this.result = {
62
71
  flag: true,
63
72
  alertMsg: null,
64
- el: null
73
+ el: null,
74
+ phase: Phase.INIT
65
75
  };
66
76
  }
67
- /** validation check할 Element를 담는 객체 초기화 */
68
- #elInit() { this.#el = {}; }
69
- /** validation check할 radio Element를 담는 객체 초기화 */
77
+ #inputInit() { this.#input = []; }
78
+ #dateInit() { this.#date = {}; }
79
+ #checkboxInit() { this.#checkbox = {}; }
70
80
  #radioInit() { this.#radio = {}; }
71
- /** validation check에 사용할 정규식을 담은 객체 초기화 */
72
81
  #regexInit(regex = null) {
73
82
  this.#regex = (!Util.empty(regex) &&
74
83
  Util.isObject(regex))
75
84
  ? {
76
- ...this.#regex,
85
+ ...(this.#regex ?? {}),
77
86
  ...regex
78
87
  }
79
- : { ...this.#regex };
88
+ : { ...(this.#regex ?? {}) };
80
89
  }
81
- /** el에 있는 Element들을 required check한다. */
82
- #required(el) {
83
- const required = el.getAttribute('required');
84
- if (!Util.empty(required)) {
85
- if (el.type == 'radio') {
90
+ #setEl(el) {
91
+ const type = el.getAttribute('type');
92
+ switch (type) {
93
+ case 'date':
94
+ case 'time':
95
+ case 'datetime-local':
96
+ case 'month':
97
+ case 'week':
98
+ this.#setDate(el);
99
+ break;
100
+ case 'checkbox':
101
+ this.#setCheckbox(el);
102
+ break;
103
+ case 'radio':
86
104
  this.#setRadio(el);
87
- }
88
- else if (Util.empty(el.value)) {
89
- this.result.flag = false;
90
- this.result.alertMsg = `'${required}'을/를 입력해 주세요.`;
91
- this.result.el = el;
92
- }
93
- }
94
- }
95
- /** radio에 있는 Element들을 required check한다. */
96
- #requiredRadio() {
97
- for (const i in this.#radio) {
98
- const el = this.#radio[i][0], flag = this.#radio[i].some((...arg) => arg[0].checked);
99
- if (!flag) {
100
- this.result.flag = false;
101
- this.result.alertMsg = `'${i}'을/를 선택해주세요.`;
102
- this.result.el = el;
103
105
  break;
104
- }
106
+ default:
107
+ this.#setInput(el);
108
+ break;
105
109
  }
106
110
  }
107
- /** el에 Element를 담는다. */
108
- #setEl(el) {
109
- const pattern = el.dataset['svPattern'], date = el.dataset['svDate'];
110
- if (!Util.empty(pattern)) {
111
- if (Util.empty(this.#el.el)) {
112
- this.#el.el = [];
113
- }
114
- this.#el.el?.push(el);
115
- }
116
- if (!Util.empty(date)) {
117
- const state = el.dataset['svDateState'];
111
+ #setInput(el) { this.#input.push(el); }
112
+ #setDate(el) {
113
+ const name = el.getAttribute('data-sv-name');
114
+ if (!Util.empty(name)) {
115
+ const state = el.getAttribute('data-sv-state');
118
116
  switch (state) {
119
117
  case 'S':
120
118
  case 'E':
121
- if (Util.empty(this.#el.date)) {
122
- this.#el.date = {};
123
- }
124
- if (Util.empty(this.#el.date[date])) {
125
- this.#el.date[date] = {};
119
+ if (Util.empty(this.#date[name])) {
120
+ this.#date[name] = {};
126
121
  }
127
- this.#el.date[date][state] = el;
122
+ this.#date[name][state] = el;
123
+ break;
124
+ default:
125
+ this.#input.push(el);
128
126
  break;
129
127
  }
130
128
  }
129
+ else {
130
+ this.#input.push(el);
131
+ }
132
+ }
133
+ #setCheckbox(el) {
134
+ const name = el.getAttribute('name') || el.getAttribute('data-sv-name');
135
+ if (!Util.empty(name)) {
136
+ if (Util.empty(this.#checkbox[name])) {
137
+ this.#checkbox[name] = [];
138
+ }
139
+ this.#checkbox[name].push(el);
140
+ }
131
141
  }
132
- /** `#radio`에 type이 'radio'인 Element를 담는다. */
133
142
  #setRadio(el) {
134
- const required = el.getAttribute('required');
135
- if (!Util.empty(required)) {
136
- if (Util.empty(this.#radio[required])) {
137
- this.#radio[required] = [el];
143
+ const name = el.getAttribute('name') || el.getAttribute('data-sv-name');
144
+ if (!Util.empty(name)) {
145
+ if (Util.empty(this.#radio[name])) {
146
+ this.#radio[name] = [];
138
147
  }
139
- else {
140
- this.#radio[required].push(el);
148
+ this.#radio[name].push(el);
149
+ }
150
+ }
151
+ #requiredEl() {
152
+ if (this.result.flag) {
153
+ this.#requiredInput();
154
+ }
155
+ if (this.result.flag) {
156
+ this.#requiredDate();
157
+ }
158
+ if (this.result.flag) {
159
+ this.#requiredCheckbox();
160
+ }
161
+ if (this.result.flag) {
162
+ this.#requiredRadio();
163
+ }
164
+ }
165
+ #requiredInput() {
166
+ for (const input of this.#input) {
167
+ const required = input.getAttribute('required');
168
+ if (!Util.empty(required) &&
169
+ Util.empty(input.value)) {
170
+ this.result = {
171
+ flag: false,
172
+ alertMsg: `'${required}'을/를 입력해 주세요.`,
173
+ el: input,
174
+ phase: Phase.REQUIRED
175
+ };
176
+ break;
141
177
  }
142
178
  }
143
179
  }
144
- /**
145
- * Element들을 validation check 한다.
146
- * ```
147
- * -----------------------
148
- * date : isDate
149
- * -----------------------
150
- * el : isPattern
151
- * ```
152
- */
153
- #match() {
154
- for (const i in this.#el) {
155
- if (this.result.flag) {
156
- switch (i) {
157
- case 'date':
158
- this.#isDate(this.#el[i]);
159
- break;
160
- case 'el':
161
- this.#isPattern(this.#el[i]);
162
- break;
180
+ #requiredDate() {
181
+ for (const name in this.#date) {
182
+ for (const state in this.#date[name]) {
183
+ const date = this.#date[name][state], required = date.getAttribute('required');
184
+ if (!Util.empty(required) &&
185
+ Util.empty(date.value)) {
186
+ this.result = {
187
+ flag: false,
188
+ alertMsg: `'${required}'을/를 입력해 주세요.`,
189
+ el: date,
190
+ phase: Phase.REQUIRED
191
+ };
192
+ break;
163
193
  }
164
194
  }
165
- else {
195
+ }
196
+ }
197
+ #requiredCheckbox() {
198
+ for (const name in this.#checkbox) {
199
+ const checkboxList = this.#checkbox[name].filter((...arg) => !Util.empty(arg[0].getAttribute('required')));
200
+ if (!Util.empty(checkboxList) &&
201
+ checkboxList.some((...arg) => !arg[0].checked)) {
202
+ const checkbox = checkboxList.find((...arg) => !arg[0].checked), required = checkbox.getAttribute('required');
203
+ this.result = {
204
+ flag: false,
205
+ alertMsg: `'${required}'을/를 선택해주세요.`,
206
+ el: checkbox,
207
+ phase: Phase.REQUIRED
208
+ };
166
209
  break;
167
210
  }
168
211
  }
169
212
  }
170
- /** date check */
171
- #isDate(el) {
172
- for (const i in el) {
173
- if (this.result.flag) {
174
- const sdate = el[i].S.value, edate = el[i].E.value;
175
- if (!Util.empty(sdate) &&
176
- !Util.empty(edate)) {
177
- const inputName = el[i].S.dataset['svInputName'] ||
178
- el[i].E.dataset['svInputName'], required = el[i].S.getAttribute('required') ||
179
- el[i].E.getAttribute('required');
180
- if ((new Date(sdate)).getTime() > (new Date(edate)).getTime()) {
181
- this.result.flag = false;
182
- this.result.alertMsg = `'${inputName || required}'의 시작일이 종료일 보다 늦습니다.`;
183
- this.result.el = el[i].S;
184
- }
185
- }
186
- }
187
- else {
213
+ #requiredRadio() {
214
+ for (const name in this.#radio) {
215
+ const radioList = this.#radio[name].filter((...arg) => !Util.empty(arg[0].getAttribute('required')));
216
+ if (!Util.empty(radioList) &&
217
+ radioList.every((...arg) => !arg[0].checked)) {
218
+ const radio = radioList.find((...arg) => !arg[0].checked), required = radio.getAttribute('required');
219
+ this.result = {
220
+ flag: false,
221
+ alertMsg: `'${required}'을/를 선택해주세요.`,
222
+ el: radio,
223
+ phase: Phase.REQUIRED
224
+ };
188
225
  break;
189
226
  }
190
227
  }
191
228
  }
192
- /** regex check */
193
- #isPattern(el) {
194
- if (Array.isArray(el)) {
195
- for (const i of el) {
196
- const pattern = i.dataset['svPattern'], inputName = i.dataset['svInputName'], required = i.getAttribute('required'), val = i.value;
197
- if (Object.keys(this.#regex).includes(pattern)) {
198
- if (!Util.empty(val) &&
199
- !this.#regex[pattern].test(val)) {
200
- this.result.flag = false;
201
- this.result.alertMsg = `'${inputName || required}'의 형식이 올바르지 않습니다.`;
202
- this.result.el = i;
229
+ #length() {
230
+ for (const input of this.#input) {
231
+ const input_ = input.getAttribute('data-sv-input') || input.getAttribute('required'), length = input.value.length;
232
+ if (!(input instanceof HTMLSelectElement)) {
233
+ if (input.minLength >= 0 &&
234
+ input.maxLength >= 0) {
235
+ if (length < input.minLength ||
236
+ length > input.maxLength) {
237
+ this.result = {
238
+ flag: false,
239
+ alertMsg: `'${input_}'은/는 ${input.minLength}~${input.maxLength}자 이내로 입력해주세요.`,
240
+ el: input,
241
+ phase: Phase.LENGTH
242
+ };
243
+ break;
244
+ }
245
+ }
246
+ else if (input.minLength >= 0 &&
247
+ input.maxLength < 0) {
248
+ if (length < input.minLength) {
249
+ this.result = {
250
+ flag: false,
251
+ alertMsg: `'${input_}'은/는 ${input.minLength}자 이상으로 입력해주세요.`,
252
+ el: input,
253
+ phase: Phase.LENGTH
254
+ };
255
+ break;
256
+ }
257
+ }
258
+ else if (input.minLength < 0 &&
259
+ input.maxLength >= 0) {
260
+ if (length > input.maxLength) {
261
+ this.result = {
262
+ flag: false,
263
+ alertMsg: `'${input_}'은/는 ${input.maxLength}자 이하로 입력해주세요.`,
264
+ el: input,
265
+ phase: Phase.LENGTH
266
+ };
203
267
  break;
204
268
  }
205
269
  }
206
270
  }
207
271
  }
208
- else {
209
- const pattern = el.dataset['svPattern'], inputName = el.dataset['svInputName'], required = el.getAttribute('required'), val = el.value;
210
- if (Object.keys(this.#regex).includes(pattern)) {
211
- if (!Util.empty(val) &&
212
- !this.#regex[pattern].test(val)) {
213
- this.result.flag = false;
214
- this.result.alertMsg = `'${inputName || required}'의 형식이 올바르지 않습니다.`;
215
- this.result.el = el;
272
+ }
273
+ #match(regex) {
274
+ if (this.result.flag) {
275
+ this.#isPattern(regex);
276
+ }
277
+ if (this.result.flag) {
278
+ this.#isDate();
279
+ }
280
+ }
281
+ #isPattern(regex = null) {
282
+ const regex_ = {
283
+ ...this.#regex,
284
+ ...(regex ?? {})
285
+ };
286
+ for (const input of this.#input) {
287
+ const pattern = input.getAttribute('data-sv-pattern');
288
+ if (Object.keys(regex_).includes(pattern)) {
289
+ const input_ = input.getAttribute('data-sv-input') || input.getAttribute('required'), value = input.value;
290
+ if (!Util.empty(value) &&
291
+ !regex_[pattern].test(value)) {
292
+ this.result = {
293
+ flag: false,
294
+ alertMsg: `'${input_}'의 형식이 올바르지 않습니다.`,
295
+ el: input,
296
+ phase: Phase.MATCH
297
+ };
298
+ break;
216
299
  }
217
300
  }
218
301
  }
219
302
  }
220
- /** Element value의 length를 check 한다. */
221
- #length() {
222
- for (const i in this.#el) {
223
- if (i == 'el' &&
224
- this.result.flag) {
225
- for (const j of this.#el[i]) {
226
- const inputName = j.dataset['svInputName'], required = j.getAttribute('required'), val = j.value.length;
227
- if (!(j instanceof HTMLSelectElement)) {
228
- if (j.minLength >= 0 &&
229
- j.maxLength >= 0) {
230
- if (val < j.minLength ||
231
- val > j.maxLength) {
232
- this.result.flag = false;
233
- this.result.alertMsg = `'${inputName || required}'은/는 ${j.minLength}~${j.maxLength}자 이내로 입력해주세요.`;
234
- this.result.el = j;
235
- break;
236
- }
237
- }
238
- else if (j.minLength >= 0 &&
239
- j.maxLength < 0) {
240
- if (val < j.minLength) {
241
- this.result.flag = false;
242
- this.result.alertMsg = `'${inputName || required}'은/는 ${j.minLength}자 이상으로 입력해주세요.`;
243
- this.result.el = j;
244
- break;
245
- }
246
- }
247
- else if (j.minLength < 0 &&
248
- j.maxLength >= 0) {
249
- if (val > j.maxLength) {
250
- this.result.flag = false;
251
- this.result.alertMsg = `'${inputName || required}'은/는 ${j.maxLength}자 이하로 입력해주세요.`;
252
- this.result.el = j;
253
- break;
254
- }
255
- }
256
- }
303
+ #isDate() {
304
+ for (const name in this.#date) {
305
+ const date = this.#date[name], sdate = date.S, edate = date.E;
306
+ if (!Util.empty(sdate) &&
307
+ !Util.empty(edate)) {
308
+ const input_ = sdate.getAttribute('data-sv-date') ||
309
+ edate.getAttribute('data-sv-date') ||
310
+ sdate.getAttribute('required') ||
311
+ edate.getAttribute('required');
312
+ if (sdate.valueAsNumber > edate.valueAsNumber) {
313
+ this.result = {
314
+ flag: false,
315
+ alertMsg: `'${input_}'의 시작일이 종료일 보다 늦습니다.`,
316
+ el: sdate,
317
+ phase: Phase.MATCH
318
+ };
319
+ break;
257
320
  }
258
321
  }
259
- else if (!this.result.flag) {
260
- break;
261
- }
262
322
  }
263
323
  }
264
324
  /** validation을 실행한다. */
265
- run(form) {
266
- this.init();
325
+ run(form,
326
+ /** validation 추가 설정*/ config) {
327
+ this.#init();
267
328
  for (const el of form.elements) {
268
- if (this.result.flag) {
269
- if (['INPUT', 'SELECT', 'TEXTAREA'].includes(el.tagName)) {
270
- if (!el.disabled) {
271
- this.#required(el);
272
- this.#setEl(el);
273
- }
329
+ if (['INPUT', 'SELECT', 'TEXTAREA'].includes(el.tagName)) {
330
+ if (!el.disabled) {
331
+ this.#setEl(el);
274
332
  }
275
333
  }
276
- else {
277
- break;
278
- }
279
334
  }
280
335
  if (this.result.flag) {
281
- this.#requiredRadio();
336
+ this.#requiredEl();
282
337
  }
283
338
  if (this.result.flag) {
284
- this.#match();
339
+ this.#length();
285
340
  }
286
341
  if (this.result.flag) {
287
- this.#length();
342
+ this.#match(config?.regex);
343
+ }
344
+ if (this.result.flag) {
345
+ this.result.phase = Phase.DONE;
288
346
  }
289
347
  }
290
348
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@nuka9510/simple-validation",
3
- "version": "1.2.8",
3
+ "version": "1.4.0",
4
4
  "description": "simple validation util for web front-end",
5
5
  "type": "module",
6
6
  "exports": {
@@ -51,6 +51,7 @@
51
51
  "webpack-cli": "^6.0.1"
52
52
  },
53
53
  "dependencies": {
54
- "@nuka9510/js-util": "^1.2.6"
54
+ "@nuka9510/js-util": "^1.2.6",
55
+ "@nuka9510/simple-enum": "^1.1.5"
55
56
  }
56
57
  }