« Flex2でStyleを適用する | トップページ | AjaxでJSONを利用する »

2006年8月 2日 (水)

Flex2の入力値チェック

入力フォームの値をチェックする作業は必ず必要となるものですが、Flex2では入力値チェックを行うコンポーネントが mx.validatorsパッケージに用意されています。
今日は、その中から金額・日付・メールアドレスのチェックを行うサンプルを載せておきたと思います。
コントロール サンプルページ
example.mxml

各 Validator のサンプルの前に、まず Validator の主に使う共通項目として、source、property、trigger、triggerEvent、required、valid、invalid といったプロパティがありますので、これらの役割について簡単に書いておきます。

source : TextInputなど入力値をチェックするコントロールのIDを指定します。
property : source で指定したコントロールの値を取得するプロパティ(textなど)を指定します。
trigger : チェックが実行されるきっかけとなるコントロール(Buttonなど)を指定します。
triggerEvent : triggerに指定したコントロールのイベント(clickなど)を指定し、そのイベントでチェックが実行されます。
required : sourceで指定したコントロールが入力必須かどうかをBooleanで指定します。
valid : チェックが行われ、入力値が正当なものと判定された場合の処理を記述します。
invalid : チェックが行われ、入力値が不正なものと判定された場合の処理を記述します。

では、以下サンプルです。
  • CurrencyValidator
    金額の値をチェックする際に使用します。
    currencySymbol プロパティに、\や$などの通貨記号を指定します。
    3桁ごとに区切りのカンマが含まれていてもパスするようです。
    <mx:CurrencyValidator source="{currencyInput}" 
        property="text" currencySymbol="\" trigger="{currencyButton}"
        triggerEvent="click" valid="{Alert.show('OK');}" />
  • DateValidator
    日付の値をチェックする際に使用します。
    inputFormat プロパティに、yyyy/mm/ddなどの入力フォーマットを指定します。
    / の代わりに - が入力されていてもパスするようです。
    <mx:DateValidator inputFormat="yyyy/mm/dd" source="{dateInput}" property="text"
        trigger="{dateButton}" triggerEvent="click" valid="{Alert.show('OK');}" />
  • EmailValidator
    メールアドレスの値をチェックする際に使用します。
    <mx:EmailValidator source="{mailInput}" property="text"
        trigger="{mailButton}" triggerEvent="click" valid="{Alert.show('OK');}" />

この他には、クレジットカードの値をチェックする CreditCardValidator 、数値であるかをチェックする NumberValidator 、 電話番号をチェックする PhoneNumberValidator 、独自の正規表現を指定できる RegExpValidator など結構多彩に用意されています。
各 Validator 固有のプロパティはあるものの、使い方は上記のサンプルと同じような感覚で使用できると思いますので、チェックしてみてはいかがでしょうか。

なお、サンプルページで表示されるメッセージは英語ですが、日本語版のSDKではちゃんと日本語になると思います。
また、オリジナルのメッセージを指定することも出来ます。

|

« Flex2でStyleを適用する | トップページ | AjaxでJSONを利用する »

コメント

コメントを書く



(ウェブ上には掲載しません)




トラックバック

この記事のトラックバックURL:
http://app.cocolog-nifty.com/t/trackback/12438/11201592

この記事へのトラックバック一覧です: Flex2の入力値チェック:

« Flex2でStyleを適用する | トップページ | AjaxでJSONを利用する »