検証コントロール

　Webフォームに入力された値が、一定の条件をみたすかどうかを検証するコントロールです。次のような種類があります。

■　CompareValidatorコントロール

CompareValidatorコントロール

　ユーザーが入力したデータを、他のコントロールの値か、定数で比較をします。

■　主なプロパティ

プロパティ名 概要
ControlToCompare 検証対象の入力コントロールと比較する入力コントロールを取得・設定する
ControlToValidate 検証対象の入力コントロールを取得・設定する
ErrorMessage 検証が失敗したときに表示するエラーメッセージを取得・設定する
IsValid 検証が成功したかどうかを示す値を取得・設定する
Operator 検証で実行する比較演算を取得・設定する
ValueToCompare 検証で比較対象とする定数値を取得・設定する
CompareValidatorの主なプロパティ

○　プロジェクト

　プロジェクトを作成して確認してみましょう。

プロジェクトの種類 ASP.NET Webアプリケーション
プロジェクト名 CompareValidatorTest

サンプルダウンロード

○　デザイン

　Webフォームを追加して、次の図のように各コントロールを配置してください。

コントロールの配置例
コントロールの配置例

○　プログラム

　次のように設定ファイルに追加してください。

Web.config

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <!--
  3. 　ASP.NET アプリケーションの構成方法の詳細については、
  4. 　http://go.microsoft.com/fwlink/?LinkId=169433 を参照してください
  5. -->
  6. <configuration>
  7. 　<system.web>
  8. 　　<compilation debug="true" targetFramework="4.5" />
  9. 　　<httpRuntime targetFramework="4.5" />
  10. 　</system.web>
  11. 　<appSettings>
  12. 　　<add key="ValidationSettings:UnobtrusiveValidationMode" value="None"/>
  13. 　</appSettings>
  14. </configuration>

○　実行結果

実行結果
実行結果

○　解説

　今回は、txtMail2を検証対象として、txtMailと比較して一致しない場合はエラーメッセージを表示しています。

■　CustomValidatorコントロール

CustomValidatorコントロール

　ユーザーが入力したデータに対して、ユーザー定義の検証を行います。

■　主なプロパティ

プロパティ名 概要
ClientValidationFunction 検証に使用するクライアント側のスクリプト関数名を取得・設定する
ControlToValidate 検証対象の入力コントロールを取得・設定する
ErrorMessage 検証が失敗したときに表示するエラーメッセージを取得・設定する
IsValid 検証が成功したかどうかを示す値を取得・設定する
CustomValidatorの主なプロパティ

○　プロジェクト

　プロジェクトを作成して確認してみましょう。

プロジェクトの種類 ASP.NET Webアプリケーション
プロジェクト名 CustomValidatorTest

サンプルダウンロード

○　デザイン

　Webフォームを追加して、次の図のように各コントロールを配置してください。

コントロールの配置例
コントロールの配置例

○　プログラム

　次のように設定ファイルに追加してください。

Web.config

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <!--
  3. 　ASP.NET アプリケーションの構成方法の詳細については、
  4. 　http://go.microsoft.com/fwlink/?LinkId=169433 を参照してください
  5. -->
  6. <configuration>
  7. 　<system.web>
  8. 　　<compilation debug="true" targetFramework="4.5" />
  9. 　　<httpRuntime targetFramework="4.5" />
  10. 　</system.web>
  11. 　<appSettings>
  12. 　　<add key="ValidationSettings:UnobtrusiveValidationMode" value="None"/>
  13. 　</appSettings>
  14. </configuration>

　index.aspxのソースを開き、次のようにJavascriptを追加してください。

index.aspx

  1. <html xmlns="http://www.w3.org/1999/xhtml">
  2. 　<head runat="server">
  3. 　　<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  4. 　　<title></title>
  5. 　　<!-- CustomValidatorコントロールに検証結果を返すスクリプト関数 -->
  6. 　　<script type="text/javascript">
  7. 　　　function checkData(source, arguments) {
  8. 　　　　//CustomeValidatorコントロールに検証結果を返す
  9. 　　　　if ((arguments.Value % 2) == 1) {
  10. 　　　　　arguments.IsValid = true;
  11. 　　　　} else {
  12. 　　　　　arguments.IsValid = false;
  13. 　　　　}
  14. 　　　}
  15. 　　</script>
  16. 　</head>

○　実行結果

実行結果
実行結果

○　解説

　検証コントローラーで検証できるものがない場合などに独自の検証をさせることができます。Javascriptで検証内容を自作できます。次の仕様の関数を用意します。

function 関数名(source, arguments)

　検証対象にアクセスする場合はarguments引数のValueプロパティを使います。検証の結果を返すにはarguments引数のIsValidプロパティにTrue(検証成功)かFalse(検証失敗)をセットします。

　自作の検証用関数を用意したら、その関数名をCustomValidatorコントロールのClientValidationFunctionプロパティにセットします。

 

■　RangeValidatorコントロール

RangeValidatorコントロール

　ユーザーが入力した値が範囲内かどうかを検証します。

 

■　主なプロパティ

プロパティ名 概要
ControlToValidate 検証対象の入力コントロールを取得・設定する
ErrorMessage 検証が失敗したときに表示するエラーメッセージを取得・設定する
IsValid 検証が成功したかどうかを示す値を取得・設定する
MaximumValue 検証範囲の最大値を取得・設定する
MinimumValue 検証範囲の最小値を取得・設定する
Type 検証する際に使用されるデータ型を取得・設定する
RangeValidatorの主なプロパティ

○　プロジェクト

　プロジェクトを作成して確認してみましょう。

プロジェクトの種類 ASP.NET Webアプリケーション
プロジェクト名 RangeValidatorTest

サンプルダウンロード

○　デザイン

　Webフォームを追加して、次の図のように各コントロールを配置してください。

コントロールの配置例
コントロールの配置例

○　プログラム

　次のように設定ファイルに追加してください。

Web.config

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <!--
  3. 　ASP.NET アプリケーションの構成方法の詳細については、
  4. 　http://go.microsoft.com/fwlink/?LinkId=169433 を参照してください
  5. -->
  6. <configuration>
  7. 　<system.web>
  8. 　　<compilation debug="true" targetFramework="4.5" />
  9. 　　<httpRuntime targetFramework="4.5" />
  10. 　</system.web>
  11. 　<appSettings>
  12. 　　<add key="ValidationSettings:UnobtrusiveValidationMode" value="None"/>
  13. 　</appSettings>
  14. </configuration>

○　実行結果

実行結果
実行結果

○　解説

　RangeValidatorコントロールのMinimumValueプロパティに1を、MaximumValueプロパティに99を設定しています。これにより、1~99までの範囲かどうかを比較しています。また、TypeプロパティにIntegerとセットしているので、整数値として比較します。

　またTextBoxコントロールのTextModeプロパティにNumberをセットしているので、数字以外を入力して送信しようとするとエラーメッセージが表示され、送信できません。

■　RegularExpressionValidatorコントロール

RegularExpressionValidatorコントロール

　正規表現を利用して、ユーザーの入力が電話番号、郵便番号、電子メール、アドレスなど、定義済みパターンに一致することを検証します。

■　主なプロパティ

プロパティ名 概要
ControlToValidate 検証対象の入力コントロールを取得・設定する
ErrorMessage 検証が失敗したときに表示するエラーメッセージを取得・設定する
IsValid 検証が成功したかどうかを示す値を取得・設定する
ValidationExpression 検証に使用するパターンを決定する正規表現を取得・設定する
RegularExpressionValidatorの主なプロパティ

○ プロジェクト

　プロジェクトを作成して確認してみましょう。

プロジェクトの種類 ASP.NET Webアプリケーション
プロジェクト名 RegularExpressionValidatorTest

サンプルダウンロード

○　デザイン

　Webフォームを追加して、次の図のように各コントロールを配置してください。

コントロールの配置例
コントロールの配置例

○　プログラム

　次のように設定ファイルに追加してください。

Web.config

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <!--
  3. 　ASP.NET アプリケーションの構成方法の詳細については、
  4. 　http://go.microsoft.com/fwlink/?LinkId=169433 を参照してください
  5. -->
  6. <configuration>
  7. 　<system.web>
  8. 　　<compilation debug="true" targetFramework="4.5" />
  9. 　　<httpRuntime targetFramework="4.5" />
  10. 　</system.web>
  11. 　<appSettings>
  12. 　　<add key="ValidationSettings:UnobtrusiveValidationMode" value="None"/>
  13. 　</appSettings>
  14. </configuration>

○　実行結果

実行結果
実行結果

○　解説

　ReqularExpressionValidatorコントロールのValidationExpressionプロパティに正規表現をセットします。独自の正規表現を作って適用させることもできます。入力のデータの形式をチェックするにはHtml5の検証機能を使うこともできます。その場合、TextBoxコントロールのTextModeプロパティに検証したいデータの種類を選択すると検証されるようになります。

■　RequiredFieldValidatorコントローラー

RequiredFieldValidatorコントローラー

　ユーザーがコントロールにデータを入力したかどうかを検証します。

■　主なプロパティ

プロパティ名 概要
ControlToValidate 検証対象の入力コントロールを取得・設定する
ErrorMessage 検証が失敗したときに表示するエラーメッセージを取得・設定する
IsValid 検証が成功したかどうかを示す値を取得・設定する
InitialValue 検証に使用する初期値を取得・設定する
RequiredFieldValidatorの主なプロパティ

○　プロジェクト

　プロジェクトを作成して確認してみましょう。

プロジェクトの種類 ASP.NET Webアプリケーション
プロジェクト名 RequireFieldValidatorTest

サンプルダウンロード

○　デザイン

　Webフォームを追加して、次の図のように各コントロールを配置してください。

コントロールの配置例
コントロールの配置例

○　プログラム

　次のように設定ファイルに追加してください。

Web.config

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <!--
  3. 　ASP.NET アプリケーションの構成方法の詳細については、
  4. 　http://go.microsoft.com/fwlink/?LinkId=169433 を参照してください
  5. -->
  6. <configuration>
  7. 　<system.web>
  8. 　　<compilation debug="true" targetFramework="4.5" />
  9. 　　<httpRuntime targetFramework="4.5" />
  10. 　</system.web>
  11. 　<appSettings>
  12. 　　<add key="ValidationSettings:UnobtrusiveValidationMode" value="None"/>
  13. 　</appSettings>
  14. </configuration>

○　実行結果

実行結果
実行結果

○　解説

　データを送信する前にInitialValueプロパティの内容かどうかを検証します。もし、InitialValueプロパティの内容であればエラーとします。

■　ValidationSummaryコントロール

ValidationSummaryコントロール

　すべての検証エラーの概要をインライン表示します。

■　主なプロパティ

プロパティ名 概要
DisplayMode ValidationSummaryコントロールの表示モードを取得・設定する
ShowMessageBox 検証の概要をメッセージボックスに表示するかどうかの値を取得・設定する
ShowSummary 検証の概要をインライン表示するかどうかの値を取得・設定する
ValidationSummaryの主なプロパティ

○　プロジェクト

　プロジェクトを作成して確認してみましょう。

プロジェクトの種類 ASP.NET Webアプリケーション
プロジェクト名 ValidationSummaryTest

サンプルダウンロード

○　デザイン

　Webフォームを追加して、次の図のように各コントロールを配置してください。

コントロールの配置例
コントロールの配置例

○　プログラム

　次のように設定ファイルに追加してください。

Web.config

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <!--
  3. 　ASP.NET アプリケーションの構成方法の詳細については、
  4. 　http://go.microsoft.com/fwlink/?LinkId=169433 を参照してください
  5. -->
  6. <configuration>
  7. 　<system.web>
  8. 　　<compilation debug="true" targetFramework="4.5" />
  9. 　　<httpRuntime targetFramework="4.5" />
  10. 　</system.web>
  11. 　<appSettings>
  12. 　　<add key="ValidationSettings:UnobtrusiveValidationMode" value="None"/>
  13. 　</appSettings>
  14. </configuration>

○　実行結果

実行結果
実行結果

○　解説

　Webページに検証エラーがある場合、その内容がValidationSummaryコントロールに表示されます。また、ShowMessageBoxプロパティにTrueをセットすると、検証エラーの内容がメッセージボックスに表示されるようになります。

　ここまで見た検証コントロールは検証をJavascriptで行うため、検証はWebブラウザーで処理させることができます。

前へ   次へ