SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

Webアプリケーションフレームワーク「Catalyst」入門

初めてのCatalyst入門(13)
Catalystによるフォーム操作と検証

フォームのパラメータ検証、値を自動的に設定

  • X ポスト
  • このエントリーをはてなブックマークに追加

チェック機能を実装する

 最初の例では、名前、郵便番号、電話番号、そして携帯電話のメールアドレスを登録するようにしてみたいと思います。

 入力フォーム用のアクションとしてinput1を実装します。

[リスト6]input1アクション(Root.pmの一部)
sub input1 :Local {
  my ( $self, $c ) = @_;
  # POSTの場合のみエラーチェックを行う
  if ($c->req->method eq 'POST') {
    # 各パラメータ毎のチェック設定
    $c->form(
      name => ['NOT_BLANK', ['JLENGTH', 2, 10]],
      name_kana => ['NOT_BLANK', 'KATAKANA', ['JLENGTH', 2, 30]],
      zip => ['NOT_BLANK', 'ZIP_JP'],
      phone => ['NOT_BLANK', 'NUMBER_PHONE_JP'],
      email => ['EMAIL_MOBILE_JP'],
      );
  }
}

 プラグインによってコンテキストに追加された$c->formメソッドに対して、各パラメータごとのチェック項目を設定します。ここでは次のような意味になります。

チェック設定の内容
設定名 説明
NOT_BLANK 値が必須の場合にエラーとする
JLENGTH 日本語文字列の長さチェック。最小と最大の文字列超を設定する
KATAKANA 日本語のカタカナ以外の場合にエラーとする
ZIP_JP 日本の郵便番号以外の場合にはエラーとする
NUMBER_PHONE_JP 日本の電話番号以外の場合にはエラーとする
EMAIL_MOBILE_JP 日本の主要携帯電話キャリアのメールアドレス以外の場合にはエラーとする

 input1のテンプレートは次のようになります。

[リスト7]入力フォーム1のテンプレート(input1.tt)
<html>
<body>
<h1>FormValidatorサンプル</h1>
[% IF c.form.has_error %]
  <div style="color:#ff0000;">エラー</div>
  <ul>
  [% FOREACH message IN c.form.messages('input1') %]
    <li>[% message %]</li>
  [% END %]
  </ul>
[% END %]

<form method="post" action="input1">
氏名:<input type="text" name="name" /><br />
氏名(フリガナ):<input type="text" name="name_kana" /><br />
郵便番号:<input type="text" name="zip" /><br />
電話番号:<input type="text" name="phone" /><br />
携帯メールアドレス:<input type="text" name="email" /><br />
<input type="submit" name="submit" value="登録" /><br />
</form>
</body>
</html>

 c.form.has_errorでフォームの内容にエラーがあったかどうかを判定し、c.form.messagesでエラーメッセージの一覧を取得しています。

 それぞれのチェック項目に対応するエラーメッセージは次のように登録します。

[リスト8]入力フォーム1のエラーメッセージ(conf/messages.ymlの一部)
input1:
  name:
    NOT_BLANK: 名前を入力してください!
    JLENGTH: 名前は2から10文字で入力してください
  name_kana:
    NOT_BLANK: 名前(フリガナ)を入力してください!
    JLENGTH: 名前(フリガナ)は2から30文字で入力してください
    KATAKANA: 名前(フリガナ)はカタカナで入力してください
  zip:
    NOT_BLANK: 郵便番号を入力してください!
    ZIP_JP: 不正な郵便番号です
  phone:
    NOT_BLANK: 電話番号を入力してください!
    NUMBER_PHONE_JP: 不正な電話番号です
  email:
    EMAIL_MOBILE_JP: 不正な携帯電話メールアドレスです

実行例

 このFormValidatorサンプルを実行してみましょう。次のURLをブラウザで表示させます。

http://<ホスト名またはIPアドレス><:Port>/input1

 入力フィールドに何も設定せずにSubmitした場合には、次のような画面が表示されます。

FormValidatorサンプルを実行した画面
FormValidatorサンプルを実行した画面

 それぞれの入力フィールドにさまざまな値を入力して、どのような結果が表示されるかを試してみてください。

 今回の例では、アクション内でパラメータのチェックを行っていますが、Catalyst::Plugin::FormValidator::Simple::Autoを使用すると、検証ルールを外部ファイルに分離できます。

 検証ルールの外部ファイルは、「profiles」により指定できます。

[リスト9]FormValidator::Simple::Autoプラグインの登録と設定(FormSample.pmの一部)
# 省略
use Catalyst qw/
  -Debug
  ConfigLoader
  Static::Simple
  FormValidator::Simple``
  FormValidator::Simple::Auto
  Unicode::Encoding
/;
# 省略
__PACKAGE__->config(
  # 省略
  # Validator::Simple関連のパラメータ登録
  'validator' => {
    plugins => ['Japanese'],
    options => {charset => 'utf8'},
    messages => 'conf/messages.yml',
    message_format => '<span style="color:#ff0000;">%s</span>',
    profiles => 'conf/profiles.yml',
  },
);

 検証ルールはYAML形式で記述します。例えばinput1アクションを外部ファイルに定義すると次のようになります。

[リスト10]input1アクションの検証定義(profiless.yml)
input1:
  name:
    - NOT_BLANK
    - ['JLENGTH', 2, 10]
  name_kana:
    - NOT_BLANK
    - ['JLENGTH', 2, 10]
    - KATAKANA
  zip:
    - NOT_BLANK
    - ZIP_JP
  phone:
    - NOT_BLANK
    - NUMBER_PHONE_JP
  email:
    - EMAIL_MOBILE_JP

 Catalyst::Plugin::FormValidator::Simple::Autoを使用する場合には、アクション実行前に$c->formの実行が自動的に行われているため、アクションの実装部分では検証エラーが発生したかどうかだけのロジックを記述するだけですむようになります。

[リスト11]Catalyst::Plugin::FormValidator::Simple::Autoを使用した場合のアクションの実装例
sub input1 :Local {
  my ( $self, $c ) = @_;
  # $c->form()はすでに呼び出されている
  if ($c->form->has_error) {
    # validationエラー発生時の処理
  }
}

次のページ
フォームの内容を自動的に設定する

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
Webアプリケーションフレームワーク「Catalyst」入門連載記事一覧

もっと読む

この記事の著者

山田 祥寛(ヤマダ ヨシヒロ)

静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for Visual Studio and Development Technologies。執筆コミュニティ「WINGSプロジェクト」代表。主な著書に「独習シリーズ(Java・C#・Python・PHP・Ruby・JSP&サーブレットなど)」「速習シリーズ(ASP.NET Core・Vue.js・React・TypeScript・ECMAScript、Laravelなど)」「改訂3版JavaScript本格入門」「これからはじめるReact実践入門」「はじめてのAndroidアプリ開発 Kotlin編 」他、著書多数

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

WINGSプロジェクト 花田 善仁(ハナダ ヨシヒト)

WINGSプロジェクトについて> 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2018年11月時点での登録メンバは55名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂きたい。著書記事多数。 RSS Twitter: @yyamada(公式)、@yyamada/wings(メンバーリスト) Facebook

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/5717 2011/02/10 14:00

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング