【Rails#3】バリデーションを付けよう │ コジマノテック

コジマです。

ユーザー登録フォームを作成しましたが、バリデーションないとやっぱ嫌だなぁってことで
今回はバリデーションをつけていこうと思います。
ログインまでの道のりは長いですねぇ。こだわりだすとキリがなくなりますね。
そしてタイトルに番号を振ることにしました。わかりやすくなったかと思います。

https://serene-brook-78971.herokuapp.com/
ここまでの成果をherokuにも上げてみました。
今後ブログを更新するタイミングでherokuもアップデートしていけたらと思っています。

バリデーションを付けるので、だいたいこんな感じかなという感覚でmodels/user.rbを作っていきます。

class User < ApplicationRecord
  #名前:空NG
  validates :name,
    presence: true
  #パスワード:空NG、8文字以上,半角英数字
  validates :password,
    presence: true,
    length: { minimum: 8 },
    format: {with: /\A[0-9a-zA-Z]+\z/i }
  #メールアドレス:空NG、重複NG、正規表現テンプレ
  validates :email,
    presence: true,
    uniqueness: true,
    format: {with: /\A[\w+\-.]+@[a-z\d\-.]+\.[a-z]+\z/i }
end

正規表現も少し押さえておきたかったので、Progateで学んだよりも少しはみ出た内容になっています。
rubyだと/\A〜〜\z/で終わるんですねぇ。
私は/^〜〜$/という形しかしらなかったので少し時間を食ってしまいました。
でもまぁ、全部使い方覚えるより、ある程度テンプレを引っ張り出せるようにしておくのが正規表現の使い方としては効率いいのではないでしょうか。書けるより読めた方がいいと思ってます。
メールアドレスの正規表現は簡易的なものですが、ざっくり◯◯@**.comなんかを通してくれます。
半角英数字を\wだけで表現できるらしいのですが、私は[0-9a-zA-Z]の方がぱっと見で分かりやすくて好きです。

バリデーションをつけたら、エラー処理を加えていきます。
前回のものから少し変更しています。

  #ユーザー登録画面
  def signup
    @user = User.new
  end

  #ユーザー登録処理
  def create
    @user = User.new
    @user.name = params[:name]
    @user.password = params[:password]
    @user.email = params[:email]
    # 保存できたか確認する
    if @user.save
      redirect_to("/users/index")
    else
      render("/users/signup")
    end

  end

createアクションの中でsaveの実行結果によって処理を分けます。
成功すればユーザー一覧画面に、エラーがあればもう一度ユーザー登録画面に戻ります。

<div class="container">
  <div class="page-title">
    ユーザー登録
  </div>
  <!-- エラーがある場合表示する-->
  <% @user.errors.full_messages.each do |message| %>
    <p style="color: red; font-weight:bold;"><%= message %></p>
  <%end%>
  <!-- 入力値を送信したい場合にはform_tag -->
  <%= form_tag("/users/create") do%>
    <div class="input-block">
      <div class="category">
        ユーザー名:
      </div>
      <input class="input-box" name="name" value="<%=@user.name%>">
    </div>
    <div class="input-block">
      <div class="category">
        パスワード:
      </div>
      <input class="input-box" type="password" name="password">
    </div>
    <div class="input-block">
      <div class="category">
        メールアドレス:
      </div>
      <input class="input-box" name="email" value="<%=@user.email%>">
    </div>
    <input class="btn ok-btn" type="submit" value="ユーザー登録">
  <%end%>
</div>

signupアクションでUser.newすることで
こちらでUserクラスから生成されたインスタンスを操作することができます。
また、renderはredirect_toと違ってアクションの処理を行わないので、renderを使用すれば
以下の画像のように入力値を保存しておくことができます。

エラーメッセージは今の所errors.full_messages.eachのデフォルトメッセージを使用しています。
申し訳程度に赤文字太文字していますw