次の方法で共有

チュートリアル : Web フォーム ページにおけるユーザーの入力の検証

  • [アーティクル]

更新 : 2007 年 11 月

このチュートリアルでは、ASP.NET 検証コントロールを使用して、Web ページのユーザー入力をチェックする方法について説明します。コードを使用せずに、すべてのチェックを自動的に実行するコントロールを使用します。記述したコードを使用するカスタム検証コントロールも作成します。これは、独自のロジックがページの検証フレームワークにどのように追加されるかを示します。最後に、ユーザーがページで行った選択に基づいて、ユーザー入力を条件付きで検証する方法について説明します。

このチュートリアルでは、利用者が予約を要求できる Web サイトのページを作成します。このチュートリアルの目的は、検証の説明であるため、このチュートリアルでは、予約の種類は重要ではありません (たとえば、レストラン、コミュニティ センターの会議室などでもかまいません)。また、このページでは、予約が実際に処理されるわけではありません。

作成するページでは、電子メール アドレス、予約の人数、および希望日の入力をユーザーに要求します。このページでは、ユーザーが電話による予約の確認を要求することもできます (実装されている場合、このページの既定値は、電子メールによる確認です)。

セキュリティに関するメモ :

既定では、Web フォーム ページは、悪意のあるユーザーがアプリケーションにスクリプトを送信しようとしていないかどうかを自動的に検証します。詳細については、「スクリプトによる攻略の概要」を参照してください。

このチュートリアルでは、次の作業を行う方法について説明します。

  • 検証コントロールを使用して、ASP.NET Web ページのユーザー入力をチェックします。

  • 検証エラー メッセージの表示の書式を設定します。

  • コードを記述して、カスタム検証を作成します。

前提条件

このチュートリアルを実行するための要件は次のとおりです。

  • Visual Studio と .NET Framework

Web サイトおよびページの作成

チュートリアルの最初の部分では、スタイルを使用できる Web サイトおよびページを作成します。

Visual Studio で Web サイトを既に作成している場合 (「チュートリアル : Visual Web Developer での基本的な Web ページの作成」を実行した場合など) は、その Web サイトを使用して、このチュートリアルの後半の「コントロールの追加」に進むことができます。それ以外の場合は、次の手順に従って、新しい Web サイトおよびページを作成します。

ファイル システム Web サイトを作成するには

  1. Visual Studio を開きます。

  2. [ファイル] メニューの [新しい Web サイト] をクリックします。

    [新しい Web サイト] ダイアログ ボックスが表示されます。

  3. [言語] ボックスで、作業に使用する言語をクリックします。

    選択したプログラミング言語は Web サイトでの既定として設定されます。ただし、プログラミング言語をページごとに設定することもできます。

  4. [Visual Studio にインストールされたテンプレート] の [ASP.NET Web サイト] をクリックします。

  5. [場所] ボックスに、Web サイトのページを格納するフォルダの名前を入力します。

    たとえば、フォルダ名として「C:\WebSites」と入力します。

  6. [OK] をクリックします。

    Visual Studio によりフォルダが作成され、Default.aspx という名前の新しいページが作成されます。

コントロールの追加

予約に必要な情報の入力をユーザーに要求するために使用するのは、限られたコントロールのみです。

コントロールおよびテキストを追加するには

  1. デザイン ビューに切り替えます。

  2. 「Submit a Reservation」など、ページ見出しを入力します。

  3. ツールボックスの [標準] グループから次のコントロールをページにドラッグし、プロパティを次のように設定します。

    1. コントロール

    1. プロパティ

    TextBox

    ID : textEmail

    TextBox

    ID : textNumberInParty

    TextBox

    ID : textPreferredDate

    Button

    ID : buttonSubmit

    Text : Submit Request

    ValidationGroup : AllValidators

    Label

    ID : labelMessage

    Text : (空白)
    メモ :

    ページの正確なレイアウトは、重要ではありません。

  4. テキスト ボックスの前に、テキストをキャプションとして入力します。

  5. [Submit Request] をダブルクリックして Click イベントのハンドラを作成し、次の強調表示されたコードを追加します。

    Protected Sub buttonSubmit_Click(ByVal sender As Object, _
       ByVal e As System.EventArgs)
    If Page.IsValid Then      labelMessage.Text = "Your reservation has been processed."    End If
End Sub

    protected void buttonSubmit_Click(object sender, EventArgs e)
{
    if (Page.IsValid)    {      labelMessage.Text = "Your reservation has been processed.";    }
}

    ボタン ハンドラにはメッセージが表示されるだけで、実際の処理は実行されません。ただし、メッセージの表示により、このチュートリアルの後半で検証の結果をテストできます。

  6. デザイン ビューに切り替えて、ページの空白領域をダブルクリックし、Page_Load ハンドラを作成して、次の強調表示されたコードを追加します。

    Protected Sub Page_Load(ByVal sender As Object, _
    ByVal e As EventArgs)
   labelMessage.Text = ""
End Sub

    protected void Page_Load(object sender, EventArgs e)
{
    labelMessage.Text = "";
}

    すべての検証が合格すると、このコードでは、ページによって表示されたメッセージが消去されます。コードは、このチュートリアルの後半でテストに使用します。

基本的な検証の追加

架空の予約システムでは、次の検証チェックを実行します。

  • 電子メール アドレスは必須です。someone@example.com など、適切な形式で指定する必要があります (一般的には、電子メール アドレスが実際のアドレスかどうかをチェックするのは現実的ではありませんが、アドレスが電子メール アドレスの適切なパターンに準拠しているかどうかをチェックできます)。

  • 人数も必須です。数値で指定する必要があります。

  • 希望日は必須です。

検証コントロールを使用して、この検証をすべて追加できます。検証コントロールでは、すべてのチェックが実行され、エラーが自動的に表示されます。

メモ :

このチュートリアルの後半では、別のチェックを追加して、ユーザーが有効な日付を入力したかどうかを確認します。

基本的な検証を追加するには

  1. デザイン ビューに切り替えます。ツールボックスの [検証] グループから RequiredFieldValidator コントロールをドラッグし、[textEmail] ボックスの横にドロップします。

  2. RequiredFieldValidator コントロールのプロパティを次のように設定します。

    プロパティ

    設定

    ControlToValidate

    textEmail

    検証コントロールを、内容が検証されるテキスト ボックスにバインドします。

    Display

    Dynamic

    エラーを表示するために必要な場合のみコントロールを表示する (およびページ内の領域を使用する) ことを指定します。

    ErrorMessage

    電子メール アドレスは必須です。

    エラーの一覧にテキストを表示します。これは、チュートリアルの後半で設定します。

    Text

    *

    アスタリスクは、フィールドが必須であることを示す従来の方法です。このテキストは、エラーがある場合のみ表示されます。

    ValidationGroup

    AllValidators

    オプション ボタンと同様に、検証コントロールを 1 つの単位として扱われるグループにグループ化できます。検証コントロールのグループ化の詳細については、このチュートリアルの後半で説明します。

    ユーザーが電子メール アドレスを入力したことを確認するために、設定した内容がテストに追加されます。検証コントロールによりすべてのチェックが実行され、ページにコードを追加する必要があるエラーが表示されます。

  3. ツールボックスの [Validation] グループから RegularExpressionValidator コントロールをドラッグし、追加した RequiredFieldValidator の横にドロップします。

  4. RegularExpressionValidator コントロールのプロパティを次のように設定します。

    1. プロパティ

    1. 設定

    ControlToValidate

    textEmail

    電子メール ボックスへのユーザーの入力を再度検証します。

    Display

    Dynamic

    ErrorMessage

    電子メール アドレスの形式は、name@domain.xyz である必要があります。

    長いエラー メッセージ。

    Text

    無効な書式です。

    短いエラー メッセージ。

    ValidationGroup

    AllValidators

    オプション ボタンと同様に、検証コントロールを 1 つの単位として扱われるグループにグループ化できます。検証コントロールのグループ化の詳細については、このチュートリアルの後半で説明します。

  5. RegularExpressionValidator コントロールが選択されている状態で、[プロパティ] ウィンドウの ValidationExpression ボックスの省略記号ボタンをクリックします。

    正規表現は、文字列で定義されたパターンを正確に検索するために使用される言語で構成されます。RegularExpressionValidator コントロールで、有効なパターン (この場合は有効な電子メール アドレスのパターン) の正規表現を定義します。

    正規表現エディタには、一般的に使用される正規表現の一覧が表示されるため、正規表現構文を知らなくても検証コントロールを使用できます。

  6. [表現の例] ボックスの [インターネット電子メール アドレス] をクリックします。

    電子メール アドレスの正規表現が [検証の表現] ボックスに表示されます。

  7. [OK] をクリックし、ダイアログ ボックスを閉じます。

  8. 手順 1 ～ 3 に従って、別の RequiredFieldValidator コントロールを追加します。ただし、今度は [textNumberInParty] ボックスにバインドして、ErrorMessage プロパティを [グループの人数を指定してください] に設定します。

  9. ツールボックスの [検証] グループから RangeValidator コントロールをドラッグし、追加した RequiredFieldValidator の横にドロップします。

  10. RangeValidator コントロールのプロパティを次のように設定します。

    1. プロパティ

    1. 設定

    ControlToValidate

    textNumberInParty

    Display

    Dynamic

    ErrorMessage

    グループの人数として、1 ～ 20 の値を入力します。

    MaximumValue

    20

    この場合は、任意ですが最大値を入力します。

    MinimumValue

    1

    このアプリケーションでは、予約には少なくとも 1 人が必要です。

    Text

    1 ～ 20 の値を入力します。

    Type

    Integer

    ValidationGroup

    AllValidators

    RangeValidator コントロールは、2 つの機能を実行します。ユーザーが入力したデータが数値かどうかを確認して、数値が指定された最小値と最大値の範囲内にあることを確認します。

ページのテスト

ここで、これまでに設定した検証コントロールをテストできます。

基本的な検証をテストするには

  1. Ctrl キーを押しながら F5 キーを押してページを実行します。

  2. ブラウザにページが表示されたら、[Submit Request] をクリックします。

    いくつかの必須フィールドに入力していないため、検証エラーが表示されます。検証エラーはすぐに表示されます。ページは送信されません。既定では、検証コントロールはクライアント側の ECMAScript (JavaScript) をページに挿入して、ブラウザで検証チェックを実行します。これにより、検証エラーのフィードバックがユーザーに直ちに表示されます。クライアント スクリプトがない場合、検証エラーのチェックにはサーバーへのラウンド トリップが必要になりますが、これは時間がかかることがあります。実際には、クライアント側の検証チェックがすべて合格するまで、ページを送信することはできません (セキュリティ対策としてページが送信されると、同じ検証チェックが再度実行されます)。

  3. 無効な電子メール アドレスを入力して、[textEmail] ボックスで検証をチェックした後、自分のアドレスなど、有効な電子メール アドレスを再度入力します。

  4. [グループの人数] ボックスには、1 ～ 20 の数値のみ入力できることを確認します。

  5. 有効な値を入力した後、[Submit Request] をクリックします。すべてのコントロールで検証が合格した場合は、"Your reservation has been processed" というメッセージが表示されます。

  6. 検証が期待どおりに動作していることを確認した後、ブラウザを閉じます。

検証が期待どおりに動作していない場合は、上記のプロパティ設定をすべて行ったかどうかを再確認して、ページを再実行します。

別の方法によるエラー情報の表示

既定では、検証コントロールはエラー テキストを埋め込み先に表示します。つまり、コントロールの Text プロパティの値を、ページのコントロールの位置に表示します。場合によっては、エラー情報を別の方法で表示する必要があります。ASP.NET 検証コントロールには、次のような追加オプションがあります。

  • すべての検証エラーを 1 か所にまとめて表示します。これは、埋め込み先でのエラーの表示と同時に、またはその代わりとして実行できます。エラーの一覧を表示することによって、長いエラー メッセージを表示することもできます。

  • エラー情報を含むポップアップ メッセージをブラウザに表示します。このオプションは、スクリプト対応のブラウザでのみ機能します。

ValidationSummary コントロールを使用すると、これらの表示オプションを両方とも追加できます。ここでは、両方の表示機能をページに追加します。

検証情報を別の方法で表示するには

  1. ツールボックスの [検証] グループから、ValidationSummary コントロールをページにドラッグします。

  2. ValidationSummary コントロールの ValidationGroup プロパティを、AllValidators に設定します。

  3. ページを実行します。

  4. チュートリアルの前半で実行したのと同じテストを実行します。

    エラーごとに、エラー情報が 2 か所に表示されます。短いエラー メッセージ (検証コントロールの Text プロパティ値) は、検証コントロールの位置に表示されます。長いエラー メッセージ (コントロールの ErrorMessage プロパティ値) は、ValidationSummary コントロールに表示されます。

  5. ブラウザを閉じます。

  6. ValidationSummary コントロールの ShowMessageBox プロパティを true に設定します。

  7. ページを実行します。

  8. 同じテストを実行します。

    今度は、各エラーがブラウザのポップアップ メッセージとして表示されます。

  9. ブラウザを閉じます。

日付チェック エントリへのカスタム検証の追加

ASP.NET 検証コントロールには、有効な日付を自動的にチェックするコントロールは含まれていません。その代わりに、CustomValidator コントロールを使用できます。カスタム検証コントロールを使用すると、独自の検証コードを作成して、アプリケーションが必要とする条件をチェックできます。このチュートリアルでは、CustomValidator を使用して、ユーザーが [textPreferredDate] ボックスに入力した値が日付値に変換できるかどうかをチェックします。

カスタム検証コードの 2 つのブロックを追加します。最初のブロックは、ページが送信されたときに実行されるカスタム検証コードです。CustomValidator コントロールには、常にサーバー側の検証ロジックが必要です。ユーザーに直ちにフィードバックが返されるように、ブラウザで同様のチェックを実行するクライアント スクリプト (ECMAScript または JavaScript) も作成します。

CustomValidator コントロールを使用して有効な日付をチェックするには

  1. ツールボックスの [検証] グループから CustomValidator コントロールをページにドラッグし、[textPreferredDate] ボックスの横に配置します。

  2. CustomValidator コントロールのプロパティを次のように設定します。

    プロパティ

    設定

    ControlToValidate

    textPreferredDate

    Display

    Dynamic

    ErrorMessage

    m/d/yyyy 形式で日付を入力します。

    Text

    日付の形式が無効です (m/d/yyyy が必要です)。

    ValidationGroup

    AllValidators

  3. CustomValidator コントロールをダブルクリックして ServerValidate イベントのハンドラを作成し、次の強調表示されたコードを追加します。

    Protected Sub CustomValidator1_ServerValidate( _
   ByVal source As Object, _
   ByVal args As System.Web.UI.WebControls.ServerValidateEventArgs)
   Try      DateTime.ParseExact(args.Value, "d", _         System.Globalization.DateTimeFormatInfo.InvariantInfo)      args.IsValid = True   Catch      args.IsValid = False   End Try
End Sub

    protected void CustomValidator1_ServerValidate(object source, 
    ServerValidateEventArgs args)
{
    try    {        DateTime.ParseExact(args.Value, "d",            System.Globalization.DateTimeFormatInfo.InvariantInfo);        args.IsValid = true;    }    catch    {       args.IsValid = false;    }
}

    このコードは、ユーザーがページを送信したときに実行されます。コードは、ハンドラに渡される ServerValidateEventArgs (args) オブジェクトを使用して、検証コントロールと対話します。ユーザーが [textPreferredDate] ボックスに入力した値は、args オブジェクトの Value プロパティとして渡されます。ユーザーのエントリが有効かどうかをチェックした後、args オブジェクトの IsValid プロパティを true または false に設定します。false に設定した場合、検証コントロールによりエラー メッセージが表示されます。

    この例では、コードは try-catch ブロックを使用して、ユーザーのエントリを DateTime オブジェクトに変換できるかどうかを判断します。ユーザーが無効な値 (m/d/yyyy 形式に準拠しない値) を入力した場合、DateTime オブジェクトの ParseExact メソッドは例外をスローし、Catch ブロックが実行されます。

    メモ :

    DateTime.ParseExact メソッドの provider パラメータの値は、カルチャと無関係です。現在のカルチャを使用する必要がある場合は、provider を null に設定します。

  4. Button_Click ハンドラに次の強調表示されたコードを追加します。

    Protected Sub buttonSubmit_Click(ByVal sender As Object, _
       ByVal e As System.EventArgs)
   If Page.IsValid Then
      labelMessage.Text = "Your reservation has been processed."
   Else     labelMessage.Text = "Page is not valid."End If
End Sub

    protected void buttonSubmit_Click(object sender, EventArgs e)
{
    if(Page.IsValid)    {
        labelMessage.Text = "Your reservation has been processed.";
    }    else    {        labelMessage.Text = "Page is not valid.";    }
}

    CustomValidator コントロールを使用する場合は、サーバー側の処理の Page.IsValid プロパティをチェックして、すべての検証チェックが合格したかどうかを確認する必要があります。IsValid プロパティは、ページのすべての検証コントロールの累積状態を返します。このプロパティは、すべての検証チェックがサーバー側の処理を終了したかどうかを確認するために使用されます。

これで、有効な日付をチェックするための、CustomValidator コントロールのサーバー側のコードが追加されました。このチュートリアルの前半で説明したように、検証コントロールでは、クライアント スクリプトを使用してユーザーのエントリもチェックされます。CustomValidator コントロールにもクライアント スクリプトを追加できます。実際には、サーバー側の検証が実行されるロジックを複製するクライアント スクリプトを作成します。クライアント側のカスタム検証コードの作成は、常に実際的であるとは限りません (たとえば、カスタム コードがサーバー側のデータベースを参照してユーザーのエントリを検証する場合など)。ただし、この場合は、サーバー側のコードが実行するのと基本的に同じチェックを実行するクライアント側のコードを作成できます。

CustomValidator コントロールにクライアント スクリプトを追加するには

  1. Default.aspx を開くか、切り替えます。

  2. ページの <head> 要素で、次のクライアント スクリプト ブロックを追加します。

    <script language="javascript">
function validateDate(oSrc, args)
{
  var iDay, iMonth, iYear;
  var arrValues;
  arrValues = args.Value.split("/");
  iMonth = arrValues[0];
  iDay = arrValues[1];
  iYear = arrValues[2];

  var testDate = new Date(iYear, iMonth - 1, iDay);
  if ((testDate.getDate() != iDay) ||
      (testDate.getMonth() != iMonth - 1) ||
      (testDate.getFullYear() != iYear))
  {
     args.IsValid = false;
     return;
  }

  return true;
}</script>
    メモ :

    ECMAScript (JavaScript) は大文字と小文字を区別します。コードは、ここに表示されているとおりに入力します。

    このコードは、サーバー側の検証チェックに似ていますが、厳密には異なります。ユーザーのエントリが args オブジェクトの Value プロパティとして関数に渡され、オブジェクトの IsValid プロパティを設定して値が検証に合格するかどうかを指定できます。この例では、有効な日付が入力されたかどうかがコードによってチェックされます。

    カスタム検証のコードは、クライアント スクリプトではサーバー コードの場合と若干異なる点に注意してください。ECMAScript では、.NET Framework と厳密に同じ機能は提供されません。したがって、ECMAScript では、サーバー側で日付のチェックに使用する ParseExact コードではなく、入力したテキストが解析されます。ただし、2 つの検証チェック (クライアントおよびサーバー) は似ているため、必要な機能を提供するには十分です。

  3. カーソルを <asp:customvalidator> 要素に置いて選択します。

  4. [プロパティ] ウィンドウで、コントロールの ClientValidationFunction プロパティを validateDate に設定します。これは、作成した ECMAScript 関数の名前です。

    これで、ユーザーのエントリを直ちにチェックし、ページがサーバーに送信されたときに再度チェックするために、クライアント スクリプトで機能するカスタム検証チェックが追加されました。

カスタム検証のテスト

ここで、カスタム検証が正しく機能するかどうかをテストできます。

カスタム検証をテストするには

  1. CustomValidator コントロールの EnableClientScript プロパティを false に設定して、クライアント側の検証を一時的に無効にします。

  2. Ctrl キーを押しながら F5 キーを押してページを実行します。

  3. フィールドの検証が合格するように、電子メール アドレスとグループの人数を入力します。

  4. 日付テキスト ボックスに、明らかに日付ではない文字列を入力して、[Submit Request] をクリックします。

    Web サーバーへのラウンド トリップがページで実行され、サーバー側の検証が失敗します。IsValid のテストが失敗し、labelMessage により "Page is not valid." と表示されます。

  5. 有効な日付値 (11/17/2005 など) を入力して、ボタンをクリックします。

    今度は、日付値が検証に合格するため、ボタンの Click ハンドラに作成された確認メッセージが表示されます。

  6. ブラウザを閉じます。

  7. CustomValidator コントロールの EnableClientScript プロパティを true に設定して、クライアント側の検証を再度有効にします。

  8. ページを再実行して、電子メール アドレスとグループの人数に有効な値を入力します。

    日付テキスト ボックスに無効な日付値を入力して、Tab キーを押します (ボタンはクリックしないでください)。

    日付テキスト ボックスのフォーカスが失われると、クライアント側の検証スクリプトが直ちに実行され、エラー メッセージが表示されます。

    メモ :

    Internet Explorer のオートコンプリート オプションを使用している場合、オートコンプリート リストから値を選択すると、値がテキスト ボックスに入力されますが、クライアント側の検証は実行されません。

  9. [Submit Request] をクリックします。

    日付テキスト ボックスのクライアント側検証が失敗したため、ページは送信されません。

  10. 日付値を修正して、Tab キーを再度押します。

    エラー メッセージが消えます。これで、フォームを送信できます。

条件付き検証を含むオプション コントロールの追加

チュートリアルの最後の部分では、予約フォームにオプション情報を追加します。ユーザーはボックスをオンにして、電話による予約の確認が必要かどうかを指定できます。確認が必要な場合は、電話番号を入力する必要があります。したがって、ページにはチェック ボックスとテキスト ボックスの 2 つの追加コントロールがあります。

前と同じように、ユーザーのエントリをチェックする検証を使用します。RequiredFieldValidator コントロールを使用して、ユーザーが電話番号を入力したかどうかを確認し、RegularExpressionValidator コントロールを使用して電話番号の形式をチェックします。電話番号はオプションです。ユーザーが [Confirm reservation by phone] チェック ボックスをオンにした場合のみ、電話番号をチェックする必要があります。したがって、チェック ボックスの状態によって電話番号の検証をオンまたはオフにする単純なコードを作成します。

条件付きの検証を追加するには

  1. ツールボックスの [標準] グループから、CheckBox コントロールをページにドラッグし、次のプロパティを設定します。

    プロパティ

    設定

    ID

    checkPhoneConfirmation

    AutoPostBack

    True

    ユーザーがチェック ボックスをクリックすると、ページでラウンド トリップが実行され、条件付きでテキスト ボックスと検証が有効になります。

    CausesValidation

    False

    CheckBox をクリックしても、検証は自動的に行われません。

    Text

    予約を電話で確認します。

  2. TextBox コントロールをページの CheckBox コントロールの下にドラッグし、次のプロパティを設定します。

    1. プロパティ

    1. 設定

    ID

    textPhoneNumber

    Enabled

    False

    ユーザーがチェック ボックスをクリックするまで、テキスト ボックスは有効になりません。

  3. 電話番号テキスト ボックスの横に、キャプションとして「電話番号 :」などのテキストを入力します。

  4. ツールボックスの [検証] グループから、RequiredFieldValidator をページにドラッグし、次のプロパティを設定します。

    プロパティ

    設定

    ID

    validatorRequiredPhoneNumber

    チュートリアルの前半では、検証コントロールの ID を設定しませんでしたが、この場合は、コードで検証コントロールを参照するため、ニーモニック ID を指定すると便利です。

    ControlToValidate

    textPhoneNumber

    Display

    Dynamic

    ErrorMessage

    電話番号を入力する必要があります。

    Text

    *

    ValidationGroup

    (空白のまま)

    このプロパティを空白にすると、検証コントロールは、ページのその他の検証コントロールに設定した AllValidators グループに属しません。結果として、buttonSubmit コントロールがクリックされた場合、既定ではこの検証コントロールはチェックされません。

  5. RegularExpressionValidator コントロールをページにドラッグし、次のプロパティを設定します。

    プロパティ

    設定

    ID

    validatorRegExPhoneNumber

    ControlToValidate

    textPhoneNumber

    Display

    Dynamic

    ErrorMessage

    電話番号の書式が無効です。

    Text

    無効な書式です。

    ValidationExpression

    ([正規表現エディタ] ダイアログ ボックスを使用して、[米国の電話番号] などの電話番号表現を選択します。)

    ValidationGroup

    (空白のまま)

  6. checkPhoneConfirmation コントロールをダブルクリックして CheckedChanged イベントのハンドラを作成し、次の強調表示されたコードを追加します。

    Protected Sub checkPhoneConfirmation_CheckedChanged( _
   ByVal sender As Object, _
   ByVal e As System.EventArgs)
   If checkPhoneConfirmation.Checked = True Then      textPhoneNumber.Enabled = True      validatorRequiredPhoneNumber.ValidationGroup = "AllValidators"      validatorRegExPhoneNumber.ValidationGroup = "AllValidators"   Else      textPhoneNumber.Enabled = False      validatorRequiredPhoneNumber.ValidationGroup = ""      validatorRegExPhoneNumber.ValidationGroup = ""   End If
End Sub

    protected void checkPhoneConfirmation_CheckedChanged(
    object sender, EventArgs e)
{
    if(checkPhoneConfirmation.Checked)    {        textPhoneNumber.Enabled = true;        validatorRequiredPhoneNumber.ValidationGroup =             "AllValidators";        validatorRegExPhoneNumber.ValidationGroup = "AllValidators";    }    else    {        textPhoneNumber.Enabled = false;        validatorRequiredPhoneNumber.ValidationGroup = "";        validatorRegExPhoneNumber.ValidationGroup = "";    }
}

    ユーザーがチェック ボックスをクリックすると、テキスト ボックスに関連付けられた 2 つの検証コントロールが、その他の検証コントロールが属する検証グループに追加されます。その結果、ユーザーがページを送信したときに、電話番号の検証コントロールを含む、ページのすべての検証コントロールがチェックされます。ユーザーがチェック ボックスをオフにすると、検証コントロールがグループから削除されるため、[Submit Request] をクリックしても処理されません。

条件付き検証のテスト

ここで、条件付き検証が正しく機能するかどうかをテストできます。

条件付き検証をテストするには

  1. Ctrl キーを押しながら F5 キーを押してページを実行します。

  2. 電子メール アドレス、グループの人数、および日付に有効な情報を入力します。

  3. [Submit Request] をクリックします。

    ページが送信され、確認メッセージが表示されます。

  4. [予約を電話で確認します。] チェック ボックスをオンにします。

  5. [Submit Request] を再度クリックします。

    今度は、エラー メッセージ (電話番号テキスト ボックスの横のアスタリスク) が表示されます。チェック ボックスをクリックしたときに、テキスト ボックスの検証が有効になっています。

  6. 無効な電話番号を入力して、[Submit Request] を再度クリックし、テキスト ボックスが無効な電話番号を受け入れないことを確認します。

  7. 正しい形式の電話番号を入力して、送信ボタンをクリックし、検証コントロールが整形式のデータを受け入れることを確認します。

    メモ :

    正規表現エディタで、RegularExpressionValidator コントロールの ValidationExpression プロパティとして [米国の電話番号] を選択した場合、正しい形式の電話番号は、エリア コード (3 桁の数字で、かっこで囲まれるか後ろにダッシュが付き、省略されることもある)、3 桁の数字、ダッシュ、4 桁の数字の順に構成されます。たとえば、(425) 555-0123、425-555-0123、555-0123 などが正しい形式です。

次の手順

Web フォーム ページに追加した検証は、Web 検証コントロールの基本的な概念を示しています。

検証にとって重要な側面は、Web サイトのセキュリティを向上させる方法を理解することです。詳細については、「Web アプリケーションのセキュリティ上の脅威の概要」を参照してください。

参照

概念

スクリプトによる攻略の概要

参照

ASP.NET Web ページにおけるユーザー入力の検証