omachizura

ホームページの基本的なことからスタートし、WEBアプリの開発までできるスキルを紹介します。


登録時にデータの入力チェックを行う方法

誤って不正なデータを登録してしまうのを防ぐために、ユーザが入力した内容をチェックする処理を実装します。

商品名と単価が未入力の場合と、同じ商品名がすでに登録されていた場合はアラートでエラーメッセージを表示して、登録処理は行わないようにします。

クライアント側でのチェック

テキストボックスに値が入力されているかどうかのチェックはクライアント側のjavascriptで行うことができます。

サーバ側でもチェックができますが、無駄なサーバへのアクセスを減らすために、クライアント側で入力チェックを行います。

ただし、クライアント処理はユーザが自由に変更できるので、セキュリティ面を考えると、入力チェックなどの処理はサーバ側でも同じように実装する必要があります。


<!DOCTYPE HTML>
<html>

<head>
  <title>商品マスタ</title>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
  <script Language="JavaScript">
    function touroku(){
      //クライアント側の入力チェック
      if(document.frmMain.txtName.value==''){
        alert('商品名を入力してください。');
        return;
      }
      if(document.frmMain.txtPrice.value==''){
        alert('単価を入力してください。');
        return;
      }

      document.frmMain.submit();
    }
  </script>
</head>

<!-- 省略 -->

<form action="" method="post" name="frmMain">
  商品名:<input type="text" name="txtName">
  単価:<input type="text" name="txtPrice">
  <input type="hidden" name="hidMode" value="1">
  <input type="button" value="登録" onclick="touroku();">
</form>
<p><%= result %></p>

</body>
</html>

サーバ側でのチェック

商品名が重複しているかどうかはデータベースにアクセスしなければ分かりません。

クライアント側でデータベースにアクセスはできないので、サーバ側でデータの登録前に商品名が重複しているかどうかのチェックを行います。

同じタイミングで、送信された商品名と単価が未入力でないかどうかのチェックも行います。

不正なデータだった場合は登録処理は行わずに、クライアント側でアラートを表示する処理を出力します。(サーバ側でアラートは出せません)


<%
  dim result
  dim errMsg = ""; '入力エラーチェック
  dim errFlg = false '入力エラーがあればtrueにし、以降のサーバ処理は行わない
  'サーバ処理でrequest.form("hidMode")=1のときのみ登録処理を行います
  If request.form("hidMode") = "1" Then
    '商品名と単価の未入力チェックを行います
    If request.form("txtName") = "" Then
      errFlg = true
      errMsg = "商品名を入力してください。"
    End If
    If errFlg = false AND request.form("txtPrice") = "" Then
      errFlg = true
      errMsg = "単価を入力してください。"
    End If

    If errFlg = false Then
      '商品名の重複チェックを行います
      'SQLを実行して重複チェック
      errFlg = true
      errMsg = "入力した商品名はすでに登録されています。"
    End If

    If errFlg = false Then
      '入力エラーがない場合のみデータの登録を行う
      'データの登録処理
    End If
  End If
%>

<!DOCTYPE HTML>
<html>

<head>
  <title>商品マスタ</title>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
  <script Language="JavaScript">
    function touroku(){
      //クライアント側の入力チェック
      if(document.frmMain.txtName.value==''){
        alert('商品名を入力してください。');
        return;
      }
      if(document.frmMain.txtPrice.value==''){
        alert('単価を入力してください。');
        return;
      }

      document.frmMain.submit();
    }

    function init(){
      <% If errFlg = true Then %>
      //入力エラーがあった場合のみアラートを表示する処理を出力します
      alert('<%= errMsg %>');
      <% End If %>
    }
  </script>
</head>
<body onload="init()"><!-- 入力エラーのアラートを表示するファンクションを実行する -->
<table class="common-table">
  <caption>商品マスタ</caption>
  <thead>
    <tr>
      <th>商品コード</th>
      <th>商品名</th>
      <th>単価</th>
    </tr>
  </thead>
  <tbody>
<%
  'SQLで取得したデータを1件ずつ出力する
  response.write("<tr><td>" & Rs("商品コード") & "</td><td>" & Rs("商品名") & "</td><td>" & Rs("単価") & "</td>")
%>
  </tbody>
</table>
<form action="" method="post" name="frmMain">
  商品名:<input type="text" name="txtName">
  単価:<input type="text" name="txtPrice">
  <input type="hidden" name="hidMode" value="1">
  <input type="button" value="登録" onclick="touroku();">
</form>
<p><%= result %></p>

</body>
</html>

上記のソースではerrFlg=trueの場合のみクライアント側で「アラートを出力する処理」を出力しています。

javascriptの部分がサーバ処理とクライアント処理が混ざってしまい、分かりづらい場合は、下記のソースのように実装することもできます。


<!-- 省略 -->

<!DOCTYPE HTML>
<html>

<head>
  <title>商品マスタ</title>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
  <script Language="JavaScript">
    function touroku(){
      //クライアント側の入力チェック
      if(document.frmMain.txtName.value==''){
        alert('商品名を入力してください。');
        return;
      }
      if(document.frmMain.txtPrice.value==''){
        alert('単価を入力してください。');
        return;
      }
      document.frmMain.submit();
    }

    function init(){
      //クライアントのコントロールにエラーチェック結果を出力し、その値によってアラートを出力するかどうか判断します
      if(document.frmMain.hidErr.value=="True"){
        alert('<%= errMsg %>');
      }
    }
  </script>
</head>
<body onload="init()"><!-- 入力エラーのアラートを表示するファンクションを実行する -->

<!-- 省略 -->

<form action="" method="post" name="frmMain">
  商品名:<input type="text" name="txtName">
  単価:<input type="text" name="txtPrice">
  <input type="hidden" name="hidMode" value="1">
  <input type="button" value="登録" onclick="touroku();">
</form>
<p><%= result %></p>
<input type="hidden" name="hidErr" value="<%= errFlg %>"> <!-- errFlgの値をhiddenコントロールに出力します -->

</body>
</html>

上記のソースではエラーチェックの結果をhtmlのコントロールの値としてクライアント側に出力し、javascriptではクライアント側に出力された値を参照し、アラートを表示するかどうか判断しています。

入力エラーがない場合、最初の例ではアラート処理自体クライアント側に出力されません。2番目の例ではアラート処理は常にクライアント側に出力されますが、他の出力された値によってアラート処理を実行するかどうかをクライアント側で判断しています。





前へ
1

  • ホームページの仕組み・基本

    ホームページとWEBアプリケーションの違いは、ホームページとは基本的に作成者が一方的に情報を公開するサイトのことを差します。


  • WEBアプリの仕組み・基本

    WEBアプリの基本的な仕組みを説明します。まずは、WEBアプリで頻繁に登場する用語の説明を交えながら、ホームページの仕組みについて復習します。


  • サーバ処理の基本

    サーバ処理でhtmlファイルをそのまま出力している場合は、データが変わるごとに、htmlファイルを書き換えなければなりません。


  • aspの基本的な文法

    aspの基本的な文法について説明します。サーバ処理以外の箇所は普通のhtmlと同じように、そのまま出力されます。サーバ処理で変数などを出力したい場合はresponse.write(出力する変数など)を...


  • htmlで入力したデータをサーバ側に送信する方法 その1

    classic aspでhtmlで入力したデータをサーバ側に送信する方法ついて説明します。下記のような画面で、商品名と単価を入力して登録ボタンを押したら、データベースにデータが登録されるような処理の実...


  • htmlで入力したデータをサーバ側に送信する方法 その2

    classic aspでhtmlで入力したデータをサーバ側に送信する方法ついて説明します。サーバ側ではコントロールのname属性をキーに値を取得するので、それぞれのコントロールにname属性を指定しま...


  • GETとPOSTの違い

    GETとPOSTの違いについて説明します。formのmethod属性には、GETとPOSTの2種類があります。method属性では送信(リクエスト)の方法を指定しています。何も指定しない場合はGETで...


  • サーバ処理でクライアントからの情報を取得する方法

    classic aspでサーバ処理でクライアントからの情報を取得する方法について説明します。クライアント側からサーバ側への送信処理は実装できたので、次はサーバ側でデータの登録を行う処理を実装します。


  • 登録時にデータの入力チェックを行う方法

    classic aspで登録時にクライアントとサーバでデータの入力チェックを行う方法について説明します。誤って不正なデータを登録してしまうのを防ぐために、ユーザが入力した内容をチェックする処理を実装し...


  • 入力エラー時にテキストボックスの値を保持する

    classic aspで入力エラー時にテキストボックスの値を保持する方法について説明します。現状では、入力チェックでエラーになった場合、ユーザがテキストボックスに入力した値がクリアされてしまいます。入...


前へ
1