エンタープライズアプリケーション II 第9回 / 2006年7月23日 バリデータ エンタープライズアプリケーション II 第9回 / 2006年7月23日

ここでの内容 バリデータ サンプルプログラム バリデータの解説

バリデータ

バリデータとは何か 入力されたデータが、そのアプリケーションに適合するものかどうかチェックする機能。例えば・・・ ここは必須項目なので、必ず入力しなければならない。 ここには、1～10までの数が入る 適合しなかった場合は、エラーメッセージを表示できる。

JSF標準のバリデータ 必須項目のチェック 数の範囲のチェック 文字列の長さのチェック

Tomahawkのバリデータ e-mailアドレスのチェック クレジットカードの番号チェック 正規表現によるチェック ２つのコンポーネントの入力値が等しいかチェック

サンプルプログラム

データの入力

エラー

成功

h:panelGrid タグ (1) UIコンポーネントを表形式でレイアウトするためのコンポーネント <h:panelGrid columns="3"> <f:facet name="header"> <h:outputText ... /> </f:facet> <h:inputText ... /> <h:message ... /> </h:panelGrid>

h:panelGrid タグ (2) f:facet タグは、表形式の直前に「ヘッダ」として表示される <h:panelGrid columns="3"> <f:facet name="header"> <h:outputText ... /> </f:facet> <h:inputText ... /> <h:message ... /> </h:panelGrid>

h:panelGrid タグ (3) <h:panelGrid columns="3"> <f:facet name="header"> <h:outputText ... /> </f:facet> <h:inputText ... /> <h:message ... /> </h:panelGrid> Columns属性で指定された個数のUIコンポーネントを、１行で表示する その後に続く３つのUIコンポーネントが、次の行に

バリデータの解説

必須項目のチェック お名前を入力してください(必須): <h:inputText id="name" required="true" value="#{ParameterBean.name}" /> データが入力されていないとエラーになる。

h:message 要素 (1) <h:inputText id="name" required="true" value="#{ParameterBean.name}" /> <h:message for="name" style="error" /> エラーメッセージを表示するUIコンポーネント for 属性で指定した UIコンポーネントに関するエラーメッセージを表示する。 コンバータに適合しなかったらエラーメッセージを表示する。

h:message 要素 (2) <h:message for="name" style="error" /> エラーメッセージのスタイルに、style.css の ".error" というクラスセレクタの設定が適用される style.css より .error { font-style: italic; color: red; }

文字列の長さのチェック (1) パスワードを設定してください(5文字以上) <h:inputSecret id="password" value="#{ParameterBean.password}"> <f:validateLength minimum="5" /> </h:inputSecret> <h:message for="password" styleClass="error" />

h:inputSecret パスワードを設定してください(5文字以上) <h:inputSecret id="password" value="#{ParameterBean.password}"> …… </h:inputSecret> パスワードなどを入力するときに、入力された文字をそのまま表示せずに、"・・・・・" のように伏せ字にして表示してくれるコンポーネント

文字列の長さのチェック (2) <f:validateLength minimum="5" /> 文字列の長さをチェックするバリデータ 最小でも5文字は必要になる。 ほかに、maximum 属性もある。最大で何文字までかチェックする

文字列の長さのチェック (3) f:validateLength は、h:inputSecret の子要素になっている。 <h:inputSecret id="password" value="#{ParameterBean.password}"> <f:validateLength minimum="5" /> </h:inputSecret> f:validateLength は、h:inputSecret の子要素になっている。 つまり、この f:validateLength は、h:inputSecret に属している。

数の範囲のチェック (1) 品物の数を入力してください(1～10): <h:inputText id="quantity" value="#{ParameterBean.quantity}"> <f:validateLongRange minimum="1" maximum="10" /> </h:inputText> <h:message for="quantity" />

数の範囲のチェック (2) <f:validateLongRange minimum="1" maximum="10"/> 整数の数の範囲をチェックする。 1 ～ 10 までの範囲となる。それ以外だとエラーになる。

Value Binding と Managed Bean <h:inputText id="quantity" value="#{ParameterBean.quantity}"> …… </h:inputText> // quantity プロパティは Integer 型 public Integer getQuantity() { return quantity; }

コンバータとは何か h:inputText 要素のようなテキスト入力フィールドには、基本的には String 型のデータが入る。 コンバータとは、Value Binding を使うタグと Managed Beanのプロパティ間でデータ変換を行うもの。 h:inputText に入力されたデータを、Integer や Date 型に変換 Integer や Date 型のオブジェクトの値を、h:outputText などで出力

E-mailアドレスのチェック e-mailアドレスを入力してください: <h:inputText id="email" 　　value="#{ParameterBean.email}"> <t:validateEmail /> </h:inputText> Emailアドレスの形式になっているかどうかチェックする。

２つのコンポーネントの入力値が等しいかチェック <h:inputText id="email" required="true" value="#{ParameterBean.email}" /> <h:inputText id="email2" required="true" value="#{ParameterBean.anotherEname}”> <t:validateEqual for="email" /> </h:inputText> name1で入力された値とname2で入力された値が等しいかチェックする

クレジットカードの番号チェック クレジットカードの番号をチェックする VISA, Master Card など (JCBはダメ) クレジットカードの番号を入力してください: <h:inputText id="creditCardNumber" value="#{ParameterBean.creditCardNumber}"> <t:validateCreditCard /> </h:inputText> クレジットカードの番号をチェックする VISA, Master Card など (JCBはダメ)

正規表現によるチェック 入力データが pattern属性で指定した正規表現にマッチするかどうかチェックする。 郵便番号を入力してください(例: 097-0013): <h:inputText id="zipNumber" value="#{ParameterBean.zipNumber}"> <t:validateRegExpr pattern='¥d{3}-¥d{4}' /> </h:inputText> 入力データが pattern属性で指定した正規表現にマッチするかどうかチェックする。

¥d{3}-¥d{4} という正規表現 まず、(0から9までの)数字が３つ並び その後で "-" (ハイフン) がきて (0から9までの)数字が４つ並ぶ

カスタム・バリデータ バリデータは、自分で作成することもできる。