【Larevel】『alpha系』のバリデーションルールには注意が必要だよというお話

ゆーたろー

こんにちは、ゆーたろーです。

大阪のHRTechベンチャーのエンジニアです。
TypeScript/Vue.js(Nuxt.js)/Laravelを使っています。

・プログラミングスクール講師
・月1で勉強会運営
・Twitter(フォロワー4700人以上)で情報発信

など色々やっている1児のパパです。

Laravelではデフォルトで様々なバリデーションルールを準備してくれており、生PHPと比べてかなり簡単にバリデーションを設定することができます。

その中で、以下の3つのalpha系のルールには注意が必要というお話をします。

alpha系のバリデーションルール

  • alpha:全てアルファベット
  • alpha_dash:全部アルファベットと数字、ダッシュ(-)、下線(_)
  • alpha_num:全部アルファベットと数字

「そもそもバリデーションって何」って方は

こちらの記事でバリデーションについて解説しているので読んでみてください。

それでは何に注意しなければならないかを解説していきます!

目次

結論:全角文字を通してしまう

このalpha系のバリデーションルールの最大の落とし穴は全角文字を通してしまうことです。

例えば、ユーザー登録時のパスワードのバリデーションに『8文字以上の半角英数字』という条件をつけたいとします。

app/Http/Controllers/Auth/RegisterController.phpvalidatorメソッドをこのように修正する方が多いのではないかと思います。

    protected function validator(array $data)
    {
        return Validator::make($data, [
            'name' => ['required', 'string', 'max:255'],
            'email' => ['required', 'string', 'email', 'max:255', 'unique:users'],
            // alpha_numを追加
            'password' => ['required', 'string', 'alpha_num', 'min:8', 'confirmed'],
        ]);
    }

実はこれだと、ダメなんですよね。

あああasyr552hdhbxiのように(全角ひらがな)が入っている場合でもバリデーションをクリアしてユーザー登録が完了してしまいます

同様に漢字、全角カタカナが入っている場合、全てそれらの場合でもバリデーションが通ってしまいます。

公式ドキュメントに『アルファベット文字』と書いているけど…。バグなのでしょうか?そもそもこういう仕様?

調べてみたのですが、解決に至らなかったのでalpha系のバリデーションルールは全角文字を通してしまうということを覚えておこうと思います。

正規表現を使ってバリデーションルールを設定しよう

Laravelで『8文字以上の半角英数字』というルールのバリデーションを実装する方法ですが、正規表現を使います。

デフォルトでregexというルールを準備してくれています。以下は公式ドキュメントでの説明。

regex:正規表現

フィールドが指定された正規表現にマッチすることをバリデートします。

このルールは内部でPHPのpreg_match関数を使用しています。パターンは有効なデリミタを使用していることも含め、preg_matchが求めているフォーマットにしたがって指定する必要があります。たとえば:'email' => 'regex:/^.+@.+$/i'

注目: regexnot_regexパターンを使用する場合はルールをパイプ(縦棒)で区切らず、ルールの配列で指定する必要があります。とくに正規表現に縦棒を含んでいる場合に該当します。

https://readouble.com/laravel/6.x/ja/validation.html#rule-regex

このようにregex:の後に正規表現を書くことで入力値がそれにマッチしているかどうかをチェックしてくれます。

'email' => 'regex:/^.+@.+$/i'

というわけで『8文字以上の半角英数字』を表す正規表現を実装します。

    protected function validator(array $data)
    {
        return Validator::make($data, [
            'name' => ['required', 'string', 'max:255'],
            'email' => ['required', 'string', 'email', 'max:255', 'unique:users'],
            // 正規表現を追加
            'password' => ['required', 'string', 'regex:/\A([a-zA-Z0-9]{8,})+\z/u', 'min:8', 'confirmed'],
        ]);
    }

'regex:/\A([a-zA-Z0-9]{8,})+\z/u'で表現しています。

正規表現についてはこちらの記事でチートシートとしてまとめられています。

これで全角ひらがな、漢字等の全角文字を弾いてくれるバリデーションになりました。

正規表現をチェックしてくれる『Rubular』が便利!

知り合いのエンジニアさんの技術記事で紹介されていたのですが、Rubularというサイトで正規表現の動作確認が簡単にできて便利です!

このサイトを紹介していた記事も併せて載せておきます。

簡単に使い方を解説します。

初期画面はこちらです。

Rubularの初期画面
  1. 正規表現の入力欄
  2. チェックしたい文字列の入力欄
  3. 結果が表示されるエリア

正規表現を設定→チェックしたい文字列を入力→結果を見る、というのが使い方です。

ではこの記事で扱ってきた『8文字以上の半角英数字』を例にしてマッチする場合、マッチしない場合それぞれの画面を載せておきます。

マッチする場合

正規表現とマッチする場合

マッチしない場合

正規表現とマッチしない場合

Rubularのご紹介は以上す。

最後に

Laravelの『alpha系』のバリデーションルールに注意が必要というお話をしてきました!

Laravelを触り始めて結構な期間が経ちますがこの記事を書くまでalpha系のルールは全角文字を通してしまうということは知りませんでした…。

僕がメンターをしているプログラミングスクールの元受講生から教えていただきました。感謝。

今回の内容だけでなく便利メソッドだからと言って使うと思わぬ落とし穴があるものは他に色々ありそう…。

“頭おかしい”プログラミングスクール『やんばるエキスパート』

内定者続出のエンジニア転職特化オンラインコミュニティ『転職クエスト』

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!

この記事を書いた人

上場グループのHRTechベンチャーで働くWebエンジニアです。
新卒で入社した大手重工メーカを4年で退職し、2020年4月からエンジニアとキャリアチェンジしました。

仕事ではTypeScript/Vue.js(Nuxt.js)/Laravelを主に使っています。

プログラミングスクールの講師やデザイン関連のお仕事もさせてもらっています。

神戸で「つながる勉強会」という勉強会を月1で運営しています。
https://tsunagaru-kobe.connpass.com/

お仕事のご依頼、ご相談はお問い合わせページもしくはTwitterのDMからお願いします。

コメント

コメントする

目次
閉じる