目次 > 第2章 Server(Web)版チュートリアル >  2.8 入力チェック(単項目) >  2.8.2 登録画面の入力チェック設定

2.8.2 登録画面の入力チェック設定

本項では、「登録画面」で入力するユーザー情報に対し、クライアント側で以下のチェックをJavascriptを利用して実施する。

  • ID
    • 必須入力である
    • 半角数字である
    • 最大文字数は10文字である
  • 名前
    • 必須入力である
    • 最大文字数は20文字である
  • 年齢
    • 必須入力である
    • 半角数字である
    • 最大文字数は3文字である
  • 生年月日
    • yyyy/MM/dd形式である
    • 最大文字数は10文字である

なお、エラーメッセージはServer(Web)版が提供するデフォルトメッセージを利用する。

備考

クライアント側の入力チェックはJavascriptで行うため、ブラウザ側でチェックを無効化することができる。そのため、サーバー側の入力チェックと組み合わせて利用することが望ましい。

手順

本項では以下の作業が必要になる。

(1) 登録画面の編集

入力チェックを実施するタグを追加する。

  1. “terasoluna-spring-thin-blank\webapps\userManager\insert.jsp”を開き、<html:javascript>タグを追加し、<ts:form>タグにsubmit属性を追加する。
    <%@ page contentType="text/html; charset=Windows-31J"%>
    <%@ taglib uri="/struts-html" prefix="html" %>
    <%@ taglib uri="/struts-bean" prefix="bean" %>
    <%@ taglib uri="/struts-logic" prefix="logic" %>
    <%@ taglib uri="/terasoluna-struts" prefix="ts" %>
    <%@ taglib uri="/terasoluna" prefix="t" %>
    
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    
    <html:html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
    <title>登録画面</title>
    </head>
    
    <body>
    <table border="0" style="width:100%;">
        <tr>
            <td align="center">
                <html:img module="/" page="/image/terasoluna_logo.gif" />
            </td>
        </tr>
        <tr>
            <td align="center">
                <h2>
                    登録画面
                </h2>
            </td>
        </tr>
    </table>
    
    <html:errors />
    
    <!-- ここから -->
    <html:javascript formName="/userManager/insertBL" method="validateRegist"/>
    <ts:form action="/userManager/insertBL" onsubmit="return validateRegist(this);">
    <!-- ここまで -->
    
    <fieldset style="border:2pt solid black;padding:20px;width:100%;">
        <legend style="font-weight:bold;">
          登録情報入力
        </legend><p>
    
        ・・・略・・・
    
    <hr>
    
    <ts:link page="/logon/menuSCR.do">メニュー</ts:link>
    
    </ts:form>
    </body>
    </html:html>
    

クライアント側で入力チェックを実施する際は、<html:javascript>タグを利用する。以下に属性を示す。

属性説明
formNameバリデーション設定ファイルに定義した入力チェック対象のアクション名を指定する。
method入力チェックを実施するJavascriptの関数名を指定する。

(2) メッセージリソースファイルの確認

入力チェックのエラーメッセージを確認する。

  1. “terasoluna-spring-thin-blank\sources\application-messages.properties”を開き、以下のメッセージが設定されていることを確認する。
    errors.date={0}には正しい日付を入力してください.
    errors.numericString={0}には数字を入力してください.
    

(3) メッセージリソースファイルの編集

入力チェックのエラーメッセージで利用する項目名を設定する。

  1. “terasoluna-spring-thin-blank\sources\application-messages.properties”を開き、以下のメッセージを追加する。
    insert.id="ID"
    insert.name="NAME"
    insert.age="AGE"
    insert.birth="BIRTH"
    

(4) バリデーション設定ファイルの編集

入力チェックの定義を設定する。

  1. “terasoluna-spring-thin-blank\webapps\WEB-INF\userManager\validation-userManager.xml”を開き、以下の箇所に設定を追加する。
    <form-validation>
    
        <formset>
    
          <!-- 登録情報確認 -->
          <form name="/userManager/insertBL">
            <field property="id"
                depends="required,numericString,maxlength">
              <arg key="insert.id" position="0"/>
              <arg key="${var:maxlength}" resource="false" position="1"/>
              <var>
                <var-name>maxlength</var-name>
                <var-value>10</var-value>
              </var>
            </field>
            <field property="name"
                depends="required,maxlength">
              <arg key="insert.name" position="0"/>
              <arg key="${var:maxlength}" resource="false" position="1"/>
              <var>
                <var-name>maxlength</var-name>
                <var-value>20</var-value>
              </var>
            </field>
            <field property="age"
                depends="required,numericString,maxlength">
              <arg key="insert.age" position="0"/>
              <arg key="${var:maxlength}" resource="false" position="1"/>
              <var>
                <var-name>maxlength</var-name>
                <var-value>3</var-value>
              </var>
    
            </field>
    
            <field property="birth"
                depends="date,maxlength">
              <arg key="insert.birth" position="0"/>
              <arg key="${var:maxlength}" name="maxlength" resource="false" position="1"/>
              <arg key="${var:datePattern}" name="date" resource="false" position="1"/>
              <var>
                <var-name>datePattern</var-name>
                <var-value>yyyy/MM/dd</var-value>
              </var>
              <var>
                <var-name>maxlength</var-name>
                <var-value>10</var-value>
              </var>
            </field>
    
          </form>
          
        </formset>
        
    </form-validation>
    

今回利用するルールは以下の通りである。

ルール説明
required必須チェック
numericString半角数字チェック
maxlength最大文字数チェック
date日付形式チェック

次項:2.8.3 動作確認

Copyright (C) 2009 NTT DATA CORPORATION