ユーザーがユーザーインターフェイスに入力するデータは、アプリケーションにとって適切な内容の場合もあれば、そうでないこともあります。Flex では、オブジェクトのフィールド値が特定の条件に適合することを保証するためにバリデータを使用します。例えば、ユーザーが有効な電話番号値を入力したことを確認したり、ストリング値が設定された最小値以上であることや、郵便番号フィールドに正しい桁数の数字が含まれていることを確認したりするために、バリデータを使用できます。
典型的なクライアントサーバー環境では、データがクライアントからサーバーへ送信された後に、サーバー上でデータ検証が実行されます。Flex バリデータを使用するメリットの 1 つは、バリデータをクライアント上で実行し、サーバーに送信される前に入力データを検証できる点です。Flex バリデータを使用することで、データをサーバーへ送信し、後でサーバーからエラーメッセージを受信する必要がなくなるので、アプリケーション全体の応答性が向上します。
Flex には、以下のような一般的なユーザー入力データ用のバリデータが用意されています。
通常、Flex バリデータはデータモデルに対して使用します。データモデルの詳細については、データの格納を参照してください。
バリデータは MXML または ActionScript を使用して定義します。MXML 内でバリデータを宣言するには、<mx:Validator> タグか、適切なバリデータタイプのタグを使用します。例えば、標準バリデータ PhoneNumberValidator を宣言する場合は、<mx:PhoneNumberValidator> タグを使用します。次に例を示します。
<?xml version="1.0"?>
<!-- validators\PNValidator.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<!-- Define the PhoneNumberValidator. -->
<mx:PhoneNumberValidator id="pnV"
source="{phoneInput}" property="text"/>
<!-- Define the TextInput control for entering the phone number. -->
<mx:TextInput id="phoneInput"/>
<mx:TextInput id="zipCodeInput"/>
</mx:Application>
前の例で実行する SWF ファイルは以下のとおりです。
前の例では、電話番号用の TextInput コントロールに値を入力します。郵便番号用の TextInput コントロールを選択し、直前の TextInput コントロールからフォーカスを移動すると、バリデータが実行されます。
バリデータの source プロパティを使用してオブジェクトを指定し、property プロパティを使用して検証するオブジェクトのフィールドを指定します。source および property プロパティの詳細については、source プロパティと property プロパティについてを参照してください。
Validator タグは、MXML ファイルのルートタグ直下の子としてのみ指定できます。前の例では、バリデータによって、ユーザーが TextInput コントロールに有効な電話番号を入力したことを確認します。有効な電話番号には、少なくとも 10 桁の番号と、追加の書式文字が含まれます。詳細については、電話番号の検証を参照してください。
次の例に示すように、バリデータは MXML ファイル内のスクリプトブロックまたは ActionScript ファイル内のいずれかで、ActionScript を使用して宣言します。
<?xml version="1.0"?>
<!-- validators\PNValidatorAS.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Script>
<![CDATA[
// Import PhoneNumberValidator.
import mx.validators.PhoneNumberValidator;
// Create the validator.
private var v:PhoneNumberValidator = new PhoneNumberValidator();
private function createValidator():void {
// Configure the validator.
v.source = phoneInput;
v.property = "text";
}
]]>
</mx:Script>
<!-- Define the TextInput control for entering the phone number. -->
<mx:TextInput id="phoneInput" creationComplete="createValidator();"/>
<mx:TextInput id="zipCodeInput"/>
</mx:Application>
前の例で実行する SWF ファイルは以下のとおりです。
バリデータは、次の 2 つのプロパティを使用して検証するアイテムを指定します。
source 検証するプロパティを含むオブジェクトを指定します。このプロパティには、コンポーネントまたはデータモデルのインスタンスを設定します。source プロパティに値を指定するには、MXML 内でデータバインディングシンタックスを使用します。ネストされたプロパティを指定するために、ドット区切りのストリングがサポートされています。
property 検証する値を含む source のプロパティ名を指定するストリングです。
これらのプロパティは、次のいずれかの方法で設定できます。
通常は、次の例に示すように、source プロパティの値として Flex ユーザーインターフェイスコントロールを指定し、property プロパティの値として検証するコントロールのプロパティを指定します。
<?xml version="1.0"?>
<!-- validators\ZCValidator.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:ZipCodeValidator id="zipV"
source="{myZip}"
property="text"/>
<mx:TextInput id="phoneInput"/>
<mx:TextInput id="myZip"/>
</mx:Application>
前の例で実行する SWF ファイルは以下のとおりです。
この例では、Flex の ZipCodeValidator を使用して、TextInput コントロールに入力されたデータを検証します。TextInput コントロールは、text プロパティに入力データを格納します。
検証は、イベントに応答して自動的にトリガされるようにするか、バリデータの Validator.validate() メソッドを明示的に呼び出してプログラムからトリガします。
イベントを使用する場合は、ユーザーアクションに応答して自動的にバリデータを実行するように設定できます。例えば、Button コントロールの click イベントを使用してフォームのフィールド上で検証をトリガできます。また、TextInput コントロールの valueCommit イベントを使用してユーザーが情報をコントロールに入力した後に検証をトリガすることもできます。詳細については、イベントを使用した検証のトリガを参照してください。
プログラムから検証をトリガすることもできます。例えば、1 つの検証を実行するために、複数の関連する入力フィールドを調べなければならない場合があります。また、ユーザーの入力に基づいて条件付きで検証を実行しなければならない場合もあります。例えば、支払いに使用する通貨(米ドルやユーロなど)をユーザーが選択できるようにすることができます。そのためには、特定の通貨に設定されたバリデータを呼び出す必要があります。この場合、入力値に適したバリデータをトリガする validate() メソッドを明示的に呼び出すように指定できます。詳細については、プログラムによる検証のトリガを参照してください。
Flex バリデータは、ユーザーがユーザーインターフェイスコントロールに不適切な値を入力したときにそのことを判別できます。すべてのバリデータが required プロパティをサポートしています。このプロパティが true の場合、ユーザーインターフェイスコントロールで値の欠落や空の値があると、検証エラーが発生します。デフォルト値は true です。したがって、バリデータに関連付けられたコントールにユーザーが 1 つでも必須データを入力できなかった場合は、デフォルトで検証エラーが発生します。このチェックを無効にするには、required プロパティを false に設定します。詳細については、必須フィールドの検証を参照してください。
デフォルトでは、検証エラーが発生すると、障害に関連するコンポーネントの周りに赤いボックスが描画されます。マウスポインタをそのコンポーネントの上に重ねると、エラーに関連付けられたエラーメッセージが表示されます。コンポーネントの外観とエラーに関連付けられるエラーメッセージは、カスタマイズ可能です。検証エラーの詳細については、検証エラーの操作を参照してください。
検証はイベント駆動型です。イベントを使用して、検証のトリガ、イベントに応答したプログラマティックなバリデータの作成と設定、バリデータにより送出されたイベントの受け取りを実行できます。
例えば、検証操作が完了すると、バリデータは検証結果に応じて valid イベントまたは invalid イベントを送出します。これらのイベントを受け取り、その後、アプリケーションに必要な追加の処理を実行できます。
別の方法として、Flex コンポーネントが検証結果に応じて valid イベントまたは invalid イベントを送出することもあります。この場合は、バリデータによって送出されたイベントではなく、検証対象のコンポーネントから送出されたイベントを受け取ることになります。
検証イベントを受け取る必要はありません。デフォルトでは、検証が失敗した場合、データバインディングのソースに関連付けられたコントロールの周りに赤いボックスが描画されます。検証に合格すると、以前失敗したときのインジケータはクリアされます。詳細については、検証イベントの操作を参照してください。
Flex は、多数の事前定義済みのバリデータを提供していますが、独自の検証ロジックを実装する必要が生じる場合もあります。ActionScript の mx.validators.Validator クラスを拡張することで、カスタム検証ロジックをカプセル化したサブクラスを作成できます。カスタムバリデータの作成の詳細については、カスタムバリデータを参照してください。
このページに新しいコメントが追加された場合に、電子メールでの通知を希望する。 | コメントレポート