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