質問編集履歴

1

ソースコード追記

2017/02/24 04:11

投稿

aaaaaaaa
aaaaaaaa

スコア501

test CHANGED
File without changes
test CHANGED
@@ -10,6 +10,328 @@
10
10
 
11
11
 
12
12
 
13
+ ```javascript
14
+
15
+ function AppModel(attrs) {
16
+
17
+ this.val ="";
18
+
19
+ //使用するvalidation patternを設定するオブジェクトを追加する。
20
+
21
+ this.attrs = {
22
+
23
+ required: "",//値が空かどうかを調べるrequiredメソッド。
24
+
25
+ maxlength: 8,
26
+
27
+ minlength: 4
28
+
29
+ };
30
+
31
+
32
+
33
+ this.listeners = {
34
+
35
+ valid: [],//valid…正当な、有効な
36
+
37
+ invalid: []//invalid…病人
38
+
39
+ };
40
+
41
+ }
42
+
43
+ //AppModelのプロトタイプたち。つまりインスタンスに継承させたいものだ。
44
+
45
+
46
+
47
+ //this.valの値が正しいのかどうかを調べるvalidateメソッド。
48
+
49
+ AppModel.prototype.validate = function() {
50
+
51
+ var val;
52
+
53
+ //バリデーションでエラーが出たものを保存しておくための空の配列
54
+
55
+ this.errors = [];
56
+
57
+
58
+
59
+ for(var key in this.attrs) {
60
+
61
+ val = this.attrs[key];
62
+
63
+ if(!this[key](val)) this.errors.push(key);
64
+
65
+ }
66
+
67
+ this.trigger(!this.errors.length ? "valid" : "invalid");
68
+
69
+ };
70
+
71
+
72
+
73
+ //第一引数に配列の添え字、第二引数に第一引数を処理する関数を指定した。
74
+
75
+ AppModel.prototype.on = function(event, func) {
76
+
77
+ //AppModelがもつ連想配列listeners内の、eventという添え字を持つモノ(恐らく配列だろうが、いまのところeventを添え字に持つ配列は、見当たらない。)の末尾にfuncという関数を挿入している。
78
+
79
+ this.listeners[event].push(func);
80
+
81
+ };
82
+
83
+
84
+
85
+ AppModel.prototype.trigger = function(event) {
86
+
87
+ $.each(this.listeners[event], function() {
88
+
89
+ //コンストラクター内でのthisは、インスタンスを表すので、this()は、AppModel()なのか?
90
+
91
+ //▼このthis()の意味は良くわからない。(1/27)
92
+
93
+ this();
94
+
95
+ });
96
+
97
+ };
98
+
99
+ //恐らくセッター。受け取ったvalが、AppModelのthis.valと一致すれば処理を行わない。一致しなければ、this.valに引数を代入する。
100
+
101
+ AppModel.prototype.set = function(val) {
102
+
103
+ if(this.val === val) return;
104
+
105
+ this.val = val;
106
+
107
+ this.validate();
108
+
109
+ };
110
+
111
+
112
+
113
+ //値が空かどうかを判定するrequiredメソッド。
114
+
115
+ AppModel.prototype.required = function() {
116
+
117
+ return this.val !== "";
118
+
119
+ };
120
+
121
+ //値の文字数が引数のnum以上かどうかを判定するmaxlengthメソッド。
122
+
123
+ AppModel.prototype.maxlength = function(num) {
124
+
125
+ return num >= this.val.length;
126
+
127
+ };
128
+
129
+ //値の文字数が引数num以下かどうかを判定するminlengthメソッド。
130
+
131
+ AppModel.prototype.minlength = function(num) {
132
+
133
+ return num <= this.val.length;
134
+
135
+ };
136
+
137
+
138
+
139
+
140
+
141
+ function AppView(el) {
142
+
143
+
144
+
145
+ this.initialize(el);
146
+
147
+ //インスタンス化したとき、handleEventsメソッドを実行するようにしている。
148
+
149
+ this.handleEvents();
150
+
151
+ }
152
+
153
+
154
+
155
+ AppView.prototype.initialize = function(el) {
156
+
157
+ this.$el = $(el);
158
+
159
+
160
+
161
+ //this.$elの隣のliをthis.$listに代入する。
162
+
163
+ this.$list = this.$el.next().children();
164
+
165
+
166
+
167
+ var obj = this.$el.data();
168
+
169
+
170
+
171
+ if(this.$el.prop("required")) {
172
+
173
+ obj["required"] = "";
174
+
175
+ }
176
+
177
+
178
+
179
+ this.model = new AppModel(obj);
180
+
181
+ };
182
+
183
+
184
+
185
+ AppView.prototype.handleEvents = function() {
186
+
187
+ var self = this;
188
+
189
+ //handleEventsメソッドでは、keyupイベントのイベントハンドラにonKeyupを登録する。
190
+
191
+ this.$el.on("keyup", function(e) {
192
+
193
+ self.onKeyup(e);
194
+
195
+ });
196
+
197
+
198
+
199
+ this.model.on("valid", function() {
200
+
201
+ self.onValid();
202
+
203
+ });
204
+
205
+
206
+
207
+ this.model.on("invalid", function() {
208
+
209
+ self.onInvalid();
210
+
211
+ });
212
+
213
+ };
214
+
215
+ //keyupイベントが発生した時に実行されるonKeyupメソッドを実装する。
216
+
217
+ AppView.prototype.onKeyup = function(e) {
218
+
219
+ var $taget = $(e.currentTarget);
220
+
221
+ //this.modelのsetメソッドを使用して、inputの値をmodelにセットする。$target.valのvalは、requiredやmaxlengthか?
222
+
223
+ this.model.set($target.val());
224
+
225
+ };
226
+
227
+
228
+
229
+ //this.$elのclass="error"を消し、this.$listを非表示にする。
230
+
231
+ AppView.prototype.onValid = function() {
232
+
233
+ this.$el.removeClass("error");
234
+
235
+ this.$list.hide();
236
+
237
+ };
238
+
239
+
240
+
241
+ //そしてthis.$elにclass="error"を付与し、this.$listの中で該当エラーのみ表示する。
242
+
243
+ AppView.prototype.onInvalid = function() {
244
+
245
+ var self =this;
246
+
247
+ this.$el.addClass("error");
248
+
249
+ this.$list.hide();
250
+
251
+
252
+
253
+ $.each(this.model.errors, function(index, val) {
254
+
255
+ self.$list.filter("[data-error=\"" + val + "\"]").show();
256
+
257
+ });
258
+
259
+ };
260
+
261
+ //inputを引数で指定した関数で、個別に処理する。
262
+
263
+ $("input").each(function() {
264
+
265
+ new AppView(this);
266
+
267
+ });
268
+
269
+ ```
270
+
271
+
272
+
273
+ ```html
274
+
275
+ <div class="container">
276
+
277
+ <div class="row">
278
+
279
+ <div class="col">
280
+
281
+ <label for="">権限を作成</label>
282
+
283
+ </div>
284
+
285
+ <div class="col">
286
+
287
+ <input type="text" placeholder="4文字以上、8文字以内で入力して下さい" data-minlength="4" data-maxlength="8" required><!-- requiredは、フォームへの入力や洗濯を必須とする。 -->
288
+
289
+ <ul>
290
+
291
+ <li data-error="required">必須項目です。</li>
292
+
293
+ <li data-error="minlength">4文字以上で入力して下さい。</li>
294
+
295
+ <li data-error="maxlength">8文字以内で入力して下さい。</li>
296
+
297
+ </ul>
298
+
299
+ </div>
300
+
301
+ </div><!-- row -->
302
+
303
+ <div class="row">
304
+
305
+ <div class="col">
306
+
307
+ <label for="">権限を作成</label>
308
+
309
+ </div>
310
+
311
+ <div class="col">
312
+
313
+ <input type="text" placeholder="4文字以上、8文字以内で入力して下さい" data-minlength="4" data-maxlength="8" required>
314
+
315
+ <ul>
316
+
317
+ <li data-error="required">必須項目です。</li>
318
+
319
+ <li data-error="minlength">4文字以上で入力して下さい。</li>
320
+
321
+ <li data-error="maxlength">8文字以内で入力して下さい。</li>
322
+
323
+ </ul>
324
+
325
+ </div>
326
+
327
+ </div><!-- row -->
328
+
329
+ </div><!-- container -->
330
+
331
+ ```
332
+
333
+
334
+
13
335
  問題のソースコード
14
336
 
15
337
  http://jsdo.it/rrrrrrrr/e5jz