2
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

エピソードを使ったINTER-Mediatorのハンズオン 3 - 機能拡張 (バリデーション)

Last updated at Posted at 2018-07-30

#はじめに
大勉強会のハンズオンのエピソードです。全員でエピソードに沿ってハンズオンを行います。マシンは各自持参したマシンかイベントで用意したマシンを1名1台使用します。

エピソードを使ったINTER-Mediatorのハンズオン 1 - 基本機能』を拡張します。前段階で作成した、『page02.html』と『def02.php』をそれぞれ、『page04.html』と『def04.php』にコピーして機能拡張します。

ここでは、バリデーションを追加して入力支援できるようにします。

#シナリオ
##背景
外回り営業マンに完成したWebアプリを見せたら、機能は満たしているので合格でした。ただ、入力支援の機能や件数がふえてきたら検索や集計ができると助かるとのこと。つまり、機能拡張の依頼です。

68747470733a2f2f71696974612d696d6167652d73746f72652e73332e616d617a6f6e6177732e636f6d2f302f35343433392f37653835376639322d666239322d316536612d376339392d3438373532633736623364642e706e67.png

##機能拡張(バリデーションを追加する)
データの型の整合性を取るために、日付と出金の値のチェックをとる機能を実装します。

課題

コンテキストの『Validation』キーを指定することによってバリデーションを設定できます。『Validation』キーには、『field』、『rule』、『message』、『notify』の要素があります。

課題1: 日付の入力を『yyyy-mm-dd』にバリデーションで限定する

手順1: 『def04.php』を開き、『Show All』をクリックする。

スクリーンショット 2018-07-30 13.38.24.png

手順2: 『validation』をクリックする。

スクリーンショット 2018-07-30 13.38.37.png

手順3: 『validation』へ値を追加する。

Validationの値
field: date
rule: test(value, '^([0-9]{4})-(0[1-9]|1[0-2])-(0[1-9]|[12][0-9]|3[01])$')
message: YYYY-MM-DDの形式(半角)で入力してください
notify:

手順4: いろいろな日付を入れてみる

ここでは、全角で、『2018−07−30』と入力。正規表現にマッチしないので、『YYYY-MM-DDの形式(半角)で入力してください』と表示される。

スクリーンショット 2018-07-30 15.45.49.png

課題2: 出金の入力を『整数』にバリデーションで限定する

手順1: 『Validation』へ値をもう一つ追加する。

スクリーンショット 2018-07-30 15.51.29.png

手順2: 『Validation』へ値を追加する。

Validationの値
field: withdraw
rule: test(value, '^[0-9]+$')
message: 正整数(半角)で入力してください
notify:
スクリーンショット 2018-07-30 15.57.06.png
2
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?