はじめに
大勉強会のハンズオンのエピソードです。全員でエピソードに沿ってハンズオンを行います。マシンは各自持参したマシンかイベントで用意したマシンを1名1台使用します。
『エピソードを使ったINTER-Mediatorのハンズオン 1 - 基本機能』を拡張します。前段階で作成した、『page02.html』と『def02.php』をそれぞれ、『page04.html』と『def04.php』にコピーして機能拡張します。
ここでは、バリデーションを追加して入力支援できるようにします。
シナリオ
背景
外回り営業マンに完成したWebアプリを見せたら、機能は満たしているので合格でした。ただ、入力支援の機能や件数がふえてきたら検索や集計ができると助かるとのこと。つまり、機能拡張の依頼です。
機能拡張(バリデーションを追加する)
データの型の整合性を取るために、日付と出金の値のチェックをとる機能を実装します。
課題
コンテキストの『Validation』キーを指定することによってバリデーションを設定できます。『Validation』キーには、『field』、『rule』、『message』、『notify』の要素があります。
課題1: 日付の入力を『yyyy-mm-dd』にバリデーションで限定する
手順1: 『def04.php』を開き、『Show All』をクリックする。
手順2: 『validation』をクリックする。
手順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: いろいろな日付を入れてみる
ここでは、全角で、『２０１８−０７−３０』と入力。正規表現にマッチしないので、『YYYY-MM-DDの形式(半角)で入力してください』と表示される。
課題2: 出金の入力を『整数』にバリデーションで限定する
手順1: 『Validation』へ値をもう一つ追加する。
手順2: 『Validation』へ値を追加する。
Validationの値
field: withdraw
rule: test(value, '^[0-9]+$')
message: 正整数(半角)で入力してください
notify:
