演習 5: クライアント上での ColdFusion フォームタグによるデータの検証

この演習では、サーバーサイド検証とクライアントサイド検証を比較します。そして "testedit.cfm" ページを編集して、クライアントサイドのスクリプトを使用します。

サーバーサイド検証とクライアントサイド検証の比較

サーバーサイドのデータの検証には 2 つの欠点があります。まず、検証にアクションページが使用されるので、エラーが見つかった時点で、フォームページはブラウザのコンテキストに含まれません。したがって、ユーザーはデータを入力したページからすぐにフィードバックを受け取ることができません。もう 1 つは、データがクライアントで取得され、サーバーで検証されるので、サーバーへのアクセス回数が増加します。このため、ネットワークとサーバーのトラフィックが増加します。データがクライアントで検証される場合、有効なデータのみがサーバーに送信されるので、トラフィックが減少します。

サーバーサイドの編集に代わる方法は、クライアントサイドのスクリプトを使用することです。クライアントサイドのスクリプトを使用すると、入力されたフォームデータをクライアント上で、サーバーに送信する前に検証できます。CFML は、クライアントサイドのデータ検証の利点を備えた標準 HTML フォームタグの代替バージョンを提供します。これらのデータ入力タグには、cfinput text、cfinput radio、cfinput checkbox、cfselect などがあります。詳細については、『ColdFusion MX 開発ガイド』のデータの検証を参照してください。

ColdFusion フォームタグには、次の属性が存在します。

属性 説明

validate

フィールドタグが照合するデータタイプ。値には、integer、date、time、telephone、zipcode があります。

message

検証が失敗した場合に表示されるエラーメッセージ

range

このタグに許可される値の範囲

required

対応するタグにデータが必要かどうかを示すインジケータ

改善されたフォームタグを使用するには、HTML フォームタグを cfform タグで置き換えます。次のコードで、改善された ColdFusion フォームタグを説明します。最初の抜粋は、継続時間フィールドがサーバーでどのように検証されるかを示します。2 番めの抜粋は、ColdFusion フォームタグが、クライアント上でのフィールド検証をどのようにして簡素化しているのかを示します。

サーバーサイドの検証方法 (cfform タグなし)

次に、サーバー上のコード (tripedit.cfm ページ) を示します。

<!--- 人数は必須であり、数値を指定する必要があります。 --->
<cfif Form.numberPeople EQ "" or IsNumeric(Form.numberPeople) EQ False>
   <cfset IsOk = "No">
   <cfoutput>The number of people must be a number and cannot be blank.
   </cfoutput>
</cfif>


  

    
コード
    
    
説明
    
  

  

    

<cfif Form.numberPeople EQ "" or
IsNumeric(Form.numberPeople) EQ False>

    		
    

cfif タグは、ユーザーが値を入力したかどうかを調べるためにフォーム変数 numberPeople の値を検証します。IsNumeric 関数は、フォームに入力された値が数値であるかどうかを調べます。

cfform タグによるクライアントサイドの検証方法

次に、クライアント上のコード (tripedit.cfm ページ) を示します。

<cfinput name="duration" message="Duration must be a number and cannot be blank."
validate="integer" required="Yes" size="3" maxlength="3">


  

    
コード
    
    
説明
    
  

  

    

<cfinput name="duration"
message="Duration must be a number and cannot be blank." validate="integer"
required="Yes" size="3" maxlength="3">

    		
    

cfinput タグを使用して、duration 入力エントリフィールドを cfform タグ内に作成しますvalidate 属性は、フィールドを integer として定義します。required 属性は、フィールドが必須入力フィールドであることを示します。データが入力されていない場合や、入力されたデータが整数でない場合に、message 属性が、"Duration must be...." のメッセージを表示することを指定します。

Trip Edit ページの編集による ColdFusion フォームタグの使用

この演習では、ColdFusion フォームタグを使って多数のビジネスルールの検証をサーバーからクライアントに移動します。この操作を行うためには、"tripedit.cfm" ページの HTML フォームタグを、クライアントサイドでフィールドを検証する ColdFusion フォームタグに変更します。次に、"tripeditaction.cfm" ページから不要なサーバーサイドのシングルフィールド検証コードを削除します。最後にフォームをテストして、クライアントサイドの検証が正常に機能していることを確認します。

Trip Edit ページで ColdFusion フォームタグを使用するには :

  1. エディタで my_app ディレクトリの "tripedit.cfm" ファイルを開きます。
  2. <form> タグと </form> タグを検索して、それぞれを <cfform> タグと </cfform> タグに変更します。
  3. <input> タグを <cfinput> タグに、<select> タグを <cfselect> タグに、<textarea> タグを <cftextarea> タグにそれぞれ変更します。

    メモ: 送信ボタンの入力タイプは cfinput ではなく、標準の入力のままにする必要があります。

  4. ColdFusion の各フォームタグ (cfinput と cfselect) に対して、次に示す適切な値を割り当てます。
    属性値 説明

    required

    入力または選択が必要なフィールドにはこの属性を使用します。

    validate

    検証に特殊なデータタイプを必要とするフィールドに、この属性を使用します。値には、integer、date、time、telephone、および zip code があります。

    message

    検証に失敗した場合にエラーメッセージを必要とするフィールドに、この属性を使用します。メッセージはビジネスルールを説明するテキストを反映します。

    次の表に、編集されたコードブロックを示します。

    ルール 説明 検証コード

    1

    すべての旅行には名前が必要です。

    		 
    <cfinput name= "tripName" 
   maxlength = "50" size = "50" 
   required = "Yes" 
   message = "Trip name must not be blank">

    2

    すべての旅行には詳細な説明が必要です。

    		 
    <cftextarea name="tripDescription" 
   required="Yes" 
   message="Trip description must not be blank.">
</cftextarea>

    3

    旅行はイベントタイプで分類する必要があります。有効なイベントタイプ (1-surfing、2-mountain climbing など) のみを許可します。

    		 
    <cfselect size="1" name="eventType" 
   required="Yes" 
   message="Type of event must be selected.">
      <option value="1" selected>Surfing</option>
      <option value="2">Mountain Climbing</option>
      <option value="3">Mountain Biking</option>
</cfselect>

    4

    旅行先は必須です。

    		 
    <cfinput size="50" name="tripLocation" 
   required="Yes"
   message="Trip location must not be blank.">

    5

    旅行に参加できる定員を指定する必要があります。

    		 
    <cfinput name="numberPeople" 
   size="6"
   required="Yes" 
   validate="integer" 
   message="The number of people field must be 
   a number and cannot be blank.">

    6

    旅行ごとに出発日と帰着日を指定する必要があります。

    すべての旅行日は、入力日以降の有効な日付でなければなりません。出発日は帰着日よりも以前の日付でなければなりません。

    		 
    <cfinput name="departureDate" 
   size="10"
   required="Yes" 
   validate="date" 
   message="Departure date must be a valid date.">

<cfinput name="returnDate"
   size="10" 
   required="Yes" 
   validate="date" 
   message="Return date must be a valid date.">

    7

    旅行代金とベースコストは必須です。値は両方とも正の数値です。旅行代金には少なくともベースコストの最低 20% の利掛けを加算する必要があります。

    		 
    <cfinput name="price"
   size="10" 
   required="Yes" 
   validate="integer" 
   message="Price is required and must be numeric.">

<cfinput name="baseCost"
   size="10" 
   required="Yes" 
   validate="integer" 
   message="Base cost is required and must be numeric.">

    8

    旅行費用が $750 を越える場合は前払いが必要です。 

    <cfinput name="depositRequired"
   type="checkbox" 
   value="Yes" >

    9

    旅行リーダーを指定する必要があります。 

    <cfinput name="tripLeader"
   maxlength="50" size="50" 
   required="Yes" 
   message="A trip leader must be specified.">

    10

    すべての新規旅行にはフォトが必要です。

    		 
    <cfinput name="photo"
   maxlength="50" size="50" 
   required="Yes" 
   message="Valid photo file name must be specified.">

    ヒント: 詳しい説明については、solutions ディレクトリ内の "ttripedit_lesson7_ex5.cfm" ファイルの完成コードを参照してください。ColdFusion フォームタグと属性の詳細については、『ColdFusion MX 開発ガイド』を参照してください。

    メモ: "tripedit.cfm" ページに追加したクライアントサイド検証コードは、クロスフィールドルールの検証を実行しません。

  5. my_app ディレクトリの "tripeditaction.cfm" ファイルを開き、次に示すシングルフィールド検証ルールのコードを削除します。
  6. ファイルを保存します。

    修正された "tripeditaction.cfm" ページは次のように表示されます。

    <cfset isOk = "Yes">
<cfif not isdefined("Form.depositRequired")>
   <cfset form.depositRequired = "No">
</cfif>
<cfif Form.price GT 750 AND Form.depositRequired EQ "No">
	<cfset IsOk = "No">
	<cfoutput>Deposit is required for trips priced over $750.</cfoutput>
</cfif>
<cfif Form.basecost * 1.2 GT #Form.price#>
	<cfset IsOk = "No">
	<cfoutput>Price must be marked up at least 20% above cost.</cfoutput>
</cfif>
<cfif form.departureDate GT form.returnDate>
	<cfset isOk = "No">
	<cfoutput>Return date cannot precede departure date.Please re-enter.</cfoutput>
</cfif><html>
<head>
<title>Trip Maintenance Confirmation</title>
</head>

<body>

<cfif isOk EQ "Yes">
	<h1>Trip Added</h1>
	<cfoutput>You have added #Form.TripName# to the trips database.
	</cfoutput>
</cfif>
</body>
</html>

編集されたコードをテストするには :

  1. ブラウザで "tripedit.cfm" ページを表示します。
  2. フォームのフィールドに値を入力して、[Save] をクリックすることにより、クライアントサイドフィールド検証およびサーバーサイドフィールド検証をテストします。

    推奨するテスト方法 :

  3. 旅行名や旅行先など、必須フィールドを空白にします。
  4. 出発日を 12/32/2002 のように無効な日付にします。
  5. [Number of People] フィールドに「one」などの数字以外の値を入力します。

ColdFusion MX 7 | ColdFusion MX 6.1 | ColdFusion MX* | ColdFusion 5* | フォーラム* | デベロッパーセンター | サポート情報 | バグ報告

バージョン7

 

このページに新しいコメントが追加された場合に、電子メールでの通知を希望する。 | コメントレポート

現在のページ: http://livedocs.adobe.com/coldfusion/7_jp/htmldocs/bus_rul8.htm