.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コントロールは、検証コントロールの一種で、標準的な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コントロールは正しく動作している。
利用可能バージョン:.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」 |
- 第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用のアドイン。プレゼンテーション時の字幕の付加や、多言語での質疑応答、スライドの翻訳を行える
|
|