Edited at

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

More than 1 year has passed since last update.


はじめに

大勉強会のハンズオンのエピソードです。全員でエピソードに沿ってハンズオンを行います。マシンは各自持参したマシンかイベントで用意したマシンを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