.NET TIPS

[ASP.NET AJAX]MaskedEditValidatorコントロールでマスク機能付きテキストボックスへの入力値を検証するには?[2.0、3.0、3.5、C#、VB]

山田 祥寛
2008/08/21

 「TIPS:[ASP.NET AJAX]MaskedEditコントロールでテキストボックスに入力可能な値を制限するには?」で紹介したように、MaskedEditコントロールは、厳密にはテキストボックスへの入力を制限する機能を持つMaskedEditExtenderと、マスクで入力制限されたテキストボックスの妥当性を検証するMaskedEditValidatorとから構成される。

 本稿では、以降、エクステンダ・コントロールの側を単にMaskedEditコントロールと、検証コントロールの側をMaskedEditValidatorコントロールと表記し、区別するものとする。

 前掲のTIPSでは、取りあえずMaskedEditコントロールだけを利用してマスク機能付きテキストボックスを作成してみたわけであるが、実際のアプリケーションではマスク機能だけでは十分とはいえない。マスク機能はブラウザのJavaScript機能をオフにされてしまえば無効になってしまうし、そもそもマスク機能とはただ単に入力可能な文字列の最小公倍数を定義するもので、厳密にアプリケーションとして妥当な値を定義するものではない。

 例えば、前掲のTIPSでRGB形式のカラーコードとして「#99」のような値を入力してもマスク機能は受け入れてしまうし(マスクはあくまで最大6桁の数値とA〜F文字の組み合わせを受け入れることを定義しているにすぎないからだ)、金額として入力可能な数値範囲を指定することはできない。

 そこで登場するのが、MaskedEditValidatorコントロールだ。

 MaskedEditValidatorコントロールは、MaskedEditコントロールとの組み合わせで利用することを想定した検証コントロールで、MaskedEditコントロールで指定されたルールに従って検証を行い、検証エラー時にはエラー・メッセージを表示する。検証コントロールの基底クラスであるBaseValidatorクラスを継承しているので、標準の検証クラスと同様の手順で利用でき、(もちろん)ValidationSummaryコントロールとも連動できるのが特徴だ。

 検証コントロールに関する詳細は、「テンプレート機能でGridViewコントロールも自由自在」などを参照していただきたい。

MaskedEditValidatorコントロールによる入力値の検証
テキストボックスに入力された値が妥当でない場合には、エラー・メッセージを表示する。

 それではさっそく、MaskedEditValidatorコントロールを利用して、上の画面のような検証機能をページに付与してみることにしよう。なお、本サンプルを作成するに当たっては、前掲のTIPSにあるMaskedEdit.aspxをベースにしている。MaskedEditコントロールで利用可能なプロパティなども含め、MaskedEdit.aspxについての詳細はそちらで確認していただきたい。

1. サーバ・コントロールを配置する

 既存のMaskedEdit.aspxに対して、フォーム・デザイナから以下の画面の要領でサーバ・コントロールを配置する。

Webフォーム(MaskedEdit.aspx)のフォーム・レイアウト
既存のMaskedEdit.aspxに対して以下のコントロールを配置する。
  MaskedEditValidatorコントロール(mevDateTime)。
  MaskedEditValidatorコントロール(mevMoney)。
  MaskedEditValidatorコントロール(mevRgb)。
  Buttonコントロール(btnSend)。
  ValidationSummaryコントロール(summary)。

 MaskedEditValidatorコントロールは、検証コントロールの一種で、標準的なRequiedFieldValidatorやRangeValidatorとほぼ同じ要領で利用できるのが特徴である。が、一点だけ、その性質上、必ずMaskedEditValidatorコントロールはMaskedEditコントロールとセットでなければ利用できない点に注意。MaskedEditコントロールはそれ単体で利用できるが、MaskedEditValidatorコントロールは単体では利用できない。

2. コントロールのプロパティ情報を設定する

 次に、ページに配置したサーバ・コントロールのプロパティを以下の表の要領で設定する(MaskedEditコントロールについては、前回の設定からの差分のみを示している)。

コントロール(ID) プロパティ 設定値
MaskedEditExtender(meeDateTime) ErrorTooltipEnabled True
MaskedEditValidator(mevDateTime) ControlExtender meeDateTime
ControlToValidate txtTime
EmptyValueBlurredText *
EmptyValueMessage 日時は必ず入力してください。
InvalidValueBlurredMessage *
InvalidValueMessage 日時を正しい形式で入力してください。
IsValidEmpty False
SetFocusOnError True
MaskedEditExtender(meeMoney) ErrorTooltipEnabled True
MaskedEditValidator(mevMoney) ControlExtender meeMoney
ControlToValidate txtMoney
MaximumValue 8000
MaximumValueBlurredMessage *
MaximumValueMessage 金額は8000円以下で入力してください。
MinimumValue 500
MinimumValueBlurredText *
MinimumValueMessage 金額は500円以上で入力してください。
SetFocusOnError True
MaskedEditExtender(meeRgb) ErrorTooltipEnabled True
MessageValidateTip True
MaskedEditValidator(mevRgb) ControlExtender meeRgb
ControlToValidate txtRgb
InvalidValueBlurredMessage *
InvalidValueMessage RGB色は#999999の形式で入力してください。
ValidationExpression #[0-9A-Fa-f]{6}
ToolTipMessage 0〜9、A〜Fのみ使用可
Button(btnSend) Text 送信
ValidationSummary(summary) ShowMessageBox True
ShowSummary False
Webフォーム(MaskedEdit.aspx)のプロパティ設定(差分のみ)

 MaskedEditValidatorコントロールでは、検証コントロールで共通して利用可能なプロパティのほか、以下のようなプロパティを設定することが可能だ(共通プロパティについては、先述の別稿を参照)。

分類 プロパティ名 概要
基本 ControlToValidate 検証対象となるテキストボックスのID値
ControlExtender テキストボックスに適用されたMaskedEditコントロールのID値
検証パラメータ InitialValue テキストボックスの初期値(必須検証に使用)
IsValidEmpty テキストボックスが空であることを許可するか
MaximumValue 許可する最大値
MinimumValue 許可する最小値
ValidationExpression 入力値の検証に使用する正規表現パターン
ClientValidationFunction カスタムの検証ロジックを規定するJavaScript関数
メッセージ EmptyValueMessage 入力値が空の場合のメッセージ(フォーカス時)
EmptyValueBlurredText 入力値が空の場合のメッセージ(フォーカス喪失時)
InvalidValueMessage 入力値が不正の場合のメッセージ(フォーカス時)
InvalidValueBlurredMessage 入力値が不正の場合のメッセージ(フォーカス喪失時)
MaximumValueMessage 入力値が最大値を超えている場合のメッセージ(フォーカス時)
MaximumValueBlurredMessage 入力値が最大値を超えている場合のメッセージ(フォーカス喪失時)
MinimumValueMessage 入力値が最小値未満である場合のメッセージ(フォーカス時)
MinimumValueBlurredText 入力値が最小値未満である場合のメッセージ(フォーカス喪失時)
その他 TooltipMessage 空のテキストボックスにフォーカスを当てた場合に表示されるツールヒント
MaskedEditValidatorコントロールで利用可能な主なプロパティ

 多くのプロパティが用意されているが、まず、ControlToValidate/ControleExtenderプロパティは必須である。それ以外は、適用する検証に応じて、必要なパラメータと対応するメッセージとをそれぞれ設定する必要がある。

 メッセージは、大きくXxxxxMessageプロパティとXxxxxBlurredText(Message)プロパティのパターンに分類できるが、まず後者は、標準的な検証コントロールのTextプロパティに相当するものだと考えればよいだろう。つまり、検証エラー時に検証コントロールの場所に表示されるテキストを指定するものだ。省略された場合には、対応するXxxxxMessageプロパティの値が使用される。

 XxxxxBlurredTextプロパティには(もちろん)具体的なエラー・メッセージを指定しても構わないが、ValidationSummaryコントロールを使用している場合には、エラー個所を表すための印(本サンプルでは「*」)だけを指定しておくのが一般的だろう。

 一方、XxxxxMessageプロパティは、標準的な検証コントロールのErrorMessageプロパティに相当するものだ。ValidationSummaryコントロールに引き渡されるエラー・メッセージを表すとともに、MaskedEditコントロールのErrorTooltipEnabledプロパティが指定された場合には、テキストボックスにマウス・カーソルを当てることでエラー・メッセージをツールチップとして表示することも可能である。

MaskedEdit.ErrorTooltipEnabledプロパティがTrueの場合
マウス・カーソルをコントロール上に移動させると、エラー・メッセージがツールチップとして表示される。

 また、TooltipMessageプロパティにも注目だ。こちらは、空のテキストボックスにフォーカスしたときに表示されるテキストを表すものだ。ツールチップは、MaskedEdit.MessageValidateTipプロパティがTrueである場合にのみ表示される。

テキストボックスにフォーカス時に入力ヒントが表示される

 以上で、MaskedEditValidatorコントロールを利用するための手続きは完了だ。作成したサンプル・プログラムを実行し、冒頭の画面のように、不正な値を入力したときにエラー・ ダイアログが表示されればMaskedEditValidatorコントロールは正しく動作している。End of Article

利用可能バージョン:.NET Framework 2.0
利用可能バージョン:.NET Framework 3.0
利用可能バージョン:.NET Framework 3.5
カテゴリ:Webフォーム 処理対象:ASP.NET AJAX
使用ライブラリ:MaskedEditコントロール
関連TIPS:TIPS:[ASP.NET AJAX]MaskedEditコントロールでテキストボックスに入力可能な値を制限するには?

この記事と関連性の高い別の.NET TIPS
[ASP.NET AJAX]MaskedEditコントロールでテキストボックスに入力可能な値を制限するには?
[ASP.NET]CustomValidatorコントロールでマスタ重複チェックを実装するには?
[ASP.NET]複数のボタンを持つフォームで検証コントロールを利用するには?
[ASP.NET AJAX]ValidatorCalloutコントロールで検証メッセージをバルーン表示するには?
[ASP.NET]CustomValidatorコントロールでクライアント検証を有効にするには?
このリストは、(株)デジタルアドバンテージが開発した
自動関連記事探索システム Jigsaw(ジグソー) により自動抽出したものです。
generated by

「.NET TIPS」


Insider.NET フォーラム 新着記事
  • 第2回 簡潔なコーディングのために (2017/7/26)
     ラムダ式で記述できるメンバの増加、throw式、out変数、タプルなど、C# 7には以前よりもコードを簡潔に記述できるような機能が導入されている
  • 第1回 Visual Studio Codeデバッグの基礎知識 (2017/7/21)
     Node.jsプログラムをデバッグしながら、Visual Studio Codeに統合されているデバッグ機能の基本の「キ」をマスターしよう
  • 第1回 明瞭なコーディングのために (2017/7/19)
     C# 7で追加された新機能の中から、「数値リテラル構文の改善」と「ローカル関数」を紹介する。これらは分かりやすいコードを記述するのに使える
  • Presentation Translator (2017/7/18)
     Presentation TranslatorはPowerPoint用のアドイン。プレゼンテーション時の字幕の付加や、多言語での質疑応答、スライドの翻訳を行える
@ITメールマガジン 新着情報やスタッフのコラムがメールで届きます(無料)
- PR -

注目のテーマ

Insider.NET 記事ランキング

本日 月間
ソリューションFLASH