データの検証を行うバリデータが使えるFlex
入力フォームはアプリケーションにつきものですが、サーバが対応できる形式で正しいデータを送信しなければ、エラーとなってしまいます。従来のWebアプリケーションでは、サーバ側でのみデータの検証が可能でしたので、ユーザーが入力したデータが間違っているかどうかは一度サーバへリクエストを送信する必要がありました。
しかしFlexでは、クライアント側でデータの検証を行うことができるため、余分なサーバリクエストを防ぐことができます。それがバリデータです。
■ バリデータで文字列の長さを検証
まずは、文字列の長さを検証する簡単なサンプルを紹介します。入力は自由な文字列ですが、4文字以上かつ8文字以下であることが必須であるとします。
サンプルを実行し、入力フィールドに文字を入力した後、タブキーなどでフォーカスを外すと、検証が実行されます。検証の結果、入力内容が正しくないと判断された場合、TextInputの周りが赤く囲まれ、マウスオーバーすると赤いフキダシでエラー内容が表示されます。
*** 一部省略されたコンテンツがあります。PC版でご覧ください。 ***
Flexのバリデータでは、「どのオブジェクト」の「なんのプロパティ」を検証するかをバリデータ側で制御します。入力フィールドには一切手を加えることなく、検証の仕組みのみを適用できます。
ここでは、StringValidatorを使用して、最低文字数を設定するminLengthに4、最大文字数を設定するmaxLengthに8を指定しています。
*** 一部省略されたコンテンツがあります。PC版でご覧ください。 ***
具体的には、sourceに対象となるオブジェクト、propertyに対象のプロパティ名を指定します。今回のサンプルではtextInputのtextを対象とします。
■ イベントを“引き金”にして検証する
下記のサンプルでは、TextInput自身のEnterEvent（エンターキーを押下したときに発生するイベント）に対して検証を実行するようにしています。
*** 一部省略されたコンテンツがあります。PC版でご覧ください。 ***
デフォルトでは、フォーカスアウトのタイミングで検証が実行されますが、任意のイベントに検証の実行を関連付けできます。そのためには、triggerとtriggerEventを使用します。triggerにはイベントの発生源のオブジェクト、triggerEventにはイベントを表す文字を指定します。
*** 一部省略されたコンテンツがあります。PC版でご覧ください。 ***
■ プログラム上から検証を実行
また、validateメソッドを呼ぶことで、プログラム上から検証を実行することもできます。
*** 一部省略されたコンテンツがあります。PC版でご覧ください。 ***
validateメソッドを実行すると、ValidationResultEventを返り値として取得できます。その中にtypeというプロパティが含まれており、検証が成功した場合はValidationResultEvent.VALID、検証が失敗した場合はValidationResultEvent.INVALIDの値がセットされるため、その後の処理を判断できます。
*** 一部省略されたコンテンツがあります。PC版でご覧ください。 ***
続いて次ページでは、文字列表現を柔軟に指定できるフォーマッタを使った実践テクニックを解説します。
Copyright © ITmedia, Inc. All Rights Reserved.