JavaScript | HTML / CSS 連携：フォーム応用 － pattern

JavaScript JavaScript
スポンサーリンク

pattern は「この入力欄の“合格パターン”を正規表現で決めるためのルール」

pattern は、 「この入力欄には、こういう形の文字列だけを“正解”として受け付けてほしい」 とブラウザに伝えるための属性です。

required が「空かどうか」しか見ないのに対して、 pattern は「中身の形（パターン）」までチェックします。

郵便番号（123-4567） ユーザーID（英数字だけ） 商品コード（ABC-123 みたいな形式）

こういう「形が決まっている文字列」を入力してもらうときに、 pattern を使うと、 ブラウザが自動で“合格か不合格か”を判定してくれます。

pattern の基本：中身は「正規表現」というルールの言語

まずは「英数字だけOK」の例から

<input
  type="text"
  name="user_id"
  pattern="[A-Za-z0-9]+"
  required
  placeholder="英数字のみ"
>

ここでの pattern="[A-Za-z0-9]+" は、

  • [A-Za-z0-9] → 英大文字・英小文字・数字のどれか 1 文字
  • + → それが 1 文字以上続く

という意味です。

つまり、

  • abc → OK
  • User123 → OK
  • 12345 → OK
  • abc_123 → NG（_ が入っている）

という判定になります。

pattern の中身は「正規表現（Regular Expression）」という“文字列の形を表現するためのミニ言語”。 最初は難しく見えるけど、よく使うパターンだけ覚えれば十分戦えます。

よく使う正規表現の“部品”を感覚で覚える

「数字だけ」のパターン

<input
  type="text"
  name="age"
  pattern="[0-9]+"
  required
  placeholder="半角数字のみ"
>

[0-9]+ は「0〜9 の数字が 1 文字以上」という意味。

  • 20 → OK
  • 003 → OK
  • abc → NG

「英字だけ」のパターン

pattern="[A-Za-z]+"
  • abc → OK
  • XYZ → OK
  • abc123 → NG

「英数字だけ」のパターン（さっきのやつ）

pattern="[A-Za-z0-9]+"

「先頭から末尾まで、全部このルールで」という書き方

本来の正規表現では、 ^ が「文字列の先頭」、$ が「末尾」を表します。

でも、HTML の pattern は 「暗黙的に先頭から末尾までマッチするかどうか」を見てくれるので、 基本的には ^ と $ を書かなくても大丈夫です。

具体例１：日本の郵便番号（123-4567）を pattern でチェックする

HTMLでの書き方

<label for="zip">郵便番号</label>
<input
  type="text"
  id="zip"
  name="zip"
  pattern="[0-9]{3}-[0-9]{4}"
  required
  placeholder="例）123-4567"
>

ここでの pattern="[0-9]{3}-[0-9]{4}" は、

  • [0-9]{3} → 数字が 3 文字
  • - → ハイフン
  • [0-9]{4} → 数字が 4 文字

という意味です。

判定はこうなります。

  • 123-4567 → OK
  • 12-34567 → NG（前半が 2 桁）
  • 1234567 → NG（ハイフンがない）
  • abc-defg → NG

「郵便番号は必ず 3桁-4桁 の形で書いてほしい」というルールを、 pattern でブラウザに伝えているわけです。

具体例２：ユーザーIDを「英数字＋アンダースコア」に限定する

HTMLでの書き方

<label for="user_id">ユーザーID</label>
<input
  type="text"
  id="user_id"
  name="user_id"
  pattern="[A-Za-z0-9_]+"
  required
  placeholder="英数字とアンダースコアのみ"
>

[A-Za-z0-9_]+ は、

  • 英字（大文字・小文字）
  • 数字
  • _

のどれかが 1 文字以上、という意味です。

判定はこう。

  • mono_123 → OK
  • MONO → OK
  • user-name → NG（- が入っている）
  • user.name → NG（. が入っている）

「使っていい文字の種類」を pattern で決めることで、 後で扱いやすい ID だけを受け付けられる。

ブラウザのエラーメッセージと pattern：何が起きるか

pattern に合わない文字列で送信しようとすると…

例えば、さっきの郵便番号入力欄で 1234567 と打って送信すると、 ブラウザがこう判断します。

  • required → OK（空ではない）
  • pattern → NG（3桁-4桁 の形ではない）

その結果、

  • フォーム送信がブロックされる
  • 「入力内容が正しくありません」的なメッセージが出る（ブラウザによって文言は違う）

という挙動になります。

pattern は「HTML標準のバリデーション」に組み込まれている。 自分で JavaScriptを書かなくても、 “形が違う入力”をブラウザが止めてくれる。

JavaScript と pattern：自前バリデーションと組み合わせる

checkValidity() と validationMessage を使う

HTML：

<form id="zipForm">
  <label for="zip">郵便番号</label>
  <input
    type="text"
    id="zip"
    name="zip"
    pattern="[0-9]{3}-[0-9]{4}"
    required
    placeholder="例）123-4567"
  >
  <button type="submit">送信</button>
</form>

<p id="message"></p>

JavaScript：

const form = document.querySelector("#zipForm");
const zipInput = document.querySelector("#zip");
const message = document.querySelector("#message");

form.addEventListener("submit", (event) => {
  if (!zipInput.checkValidity()) {
    event.preventDefault(); // 送信を止める
    message.textContent = zipInput.validationMessage;
  } else {
    message.textContent = "送信OKです。";
  }
});
JavaScript

ここでのポイントは、

  • zipInput.checkValidity() が required や pattern をまとめてチェックしてくれる
  • NG のときは validationMessage にブラウザ標準のエラーメッセージが入る

ということです。

pattern を HTML側に書いておけば、 JavaScript側では「そのルールに合っているかどうか」を checkValidity() で一発確認できる。 自分で正規表現を書く必要がなくなる。

pattern の限界と注意点：「複雑すぎる正規表現はやめておこう」

メールアドレスを pattern で完全にチェックしようとしない

よくある罠がこれです。

<input
  type="email"
  name="email"
  pattern="なんかすごく長い正規表現"
>

メールアドレスの完全な正規表現は、 仕様が複雑すぎて、 現実的にはほぼメンテ不能です。

メールアドレスなら、 type="email" に任せる方がずっと楽です。

<input
  type="email"
  name="email"
  required
>

pattern は「自分でルールを決めたいとき」に使うもの。 すでに type="email" や type="url" が持っている標準ルールを わざわざ pattern で再実装する必要はない。

pattern を使うか迷ったときの判断基準

「この入力欄には“形が決まっている文字列”を書いてほしいか？」

自分にこう聞いてみてください。

この入力欄は、

  • ただの自由なテキストか？
  • それとも「こういう形じゃないと困る」ものか？

自由なテキスト → pattern は不要 形が決まっている → pattern を検討する

例えば、

  • 郵便番号 → 3桁-4桁 の形が決まっている
  • ユーザーID → 英数字だけにしたい
  • 商品コード → ABC-123 のような形式にしたい

こういう欄には、 pattern がかなり効いてきます。

初心者として「pattern」で絶対に掴んでほしいこと

pattern は、 「この入力欄の“合格パターン”を正規表現で決めて、ブラウザにそのルールを守らせるための属性」 です。

  • 中身は正規表現（文字列の形を表現するミニ言語）
  • 「数字だけ」「英数字だけ」「3桁-4桁」などを簡単に書ける
  • required が「空かどうか」、pattern が「形が合っているかどうか」を見る
  • checkValidity() と組み合わせると、JS側でも簡単に「合格／不合格」を判定できる
  • 複雑すぎる正規表現は避けて、「形が決まっているもの」にだけ使う

あなたが pattern を書くときに、 「この入力欄には“こういう形の文字列だけ”を通したくて、 そのルールをブラウザに正規表現で教えているんだよな」 とイメージできていたら、 もう pattern を“ただの難しそうな属性”ではなく、 “ユーザーの入力とあなたのロジックをきれいに揃えてくれる、頼れるフィルター”として扱えている状態です。

スポンサーリンク
タイトルとURLをコピーしました