@nuka9510/simple-validation 1.3.0 → 1.4.1

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