HTML5のpattern属性は入力形式を正規表現で確認する

HTML5のpattern属性は、input要素へ入力された値が、指定した正規表現に一致するかをブラウザーで確認するために使います。会員番号、郵便番号、英数字の管理番号など、サイト側で形式を決めている入力欄が対象です。

pattern属性だけでは空欄を禁止しません。入力を必須にする役割はrequired属性です。また、ブラウザーの検査は入力を助ける仕組みであり、送信された値を信用するための仕組みではありません。サーバー側でも同じ条件を検査します。

pattern属性には値全体の形式を書く

W3CのHTML5仕様では、pattern属性の値をJavaScriptの正規表現の構文で記述し、入力値の一部分ではなく全体と照合します。

説明用の仮例として、半角数字3桁、ハイフン、半角数字4桁だけを受け付ける入力欄は、次のように書けます。

<label for="postal-code">郵便番号</label>
<input
  id="postal-code"
  name="postal-code"
  type="text"
  pattern="[0-9]{3}-[0-9]{4}"
  title="半角数字3桁、ハイフン、半角数字4桁で入力してください"
>
<p>入力例：123-4567</p>

この例の[0-9]は半角数字、{3}と{4}は直前の表現を繰り返す回数を示します。pattern属性は値全体へ照合されるため、先頭と末尾を表す記号を加えなくても、前後に別の文字がある値は一致しません。

これは構文を説明する仮例です。実際の入力欄では、受け付ける文字、ハイフンの有無、全角文字の扱い、保存形式を業務側で先に決めます。利用者が入力した表記を自動変換するなら、変換前と変換後の値も確認します。

required属性とは空欄と形式で役割を分ける

pattern属性は、空ではない値が指定形式と一致するかを確認します。任意入力の欄なら、空欄のまま送信できます。

空欄も禁止する場合は、required属性を併用します。

<label for="member-code">会員番号</label>
<input
  id="member-code"
  name="member-code"
  type="text"
  required
  pattern="[A-Z]{2}[0-9]{6}"
  title="半角英大文字2字と半角数字6桁で入力してください"
>

この仮例では、空欄なら必須条件に一致せず、値があっても形式が違えばpattern mismatchになります。入力があるかと、入力形式が正しいかを一つの説明にまとめないでください。

メールアドレスやURLでは、type="email"やtype="url"が持つ形式検査も働きます。patternを追加するなら、一般的なメールアドレス形式に加えて何を制限するのかを明示します。自社で許可するドメインを限定するなど、目的が決まっていない正規表現を追加すると、受け付けるべき値まで拒むおそれがあります。

入力条件はtitle属性だけに隠さない

title属性は、正規表現が求める形式の説明に使えます。ただし、入力条件をtitle属性だけへ入れると、マウスを使わない人や、ツールチップを表示しない環境には伝わらない場合があります。

入力欄の近くに「半角英大文字2字と半角数字6桁」のような条件と入力例を文字で表示し、必要に応じてtitle属性にも同じ意味を持つ説明を入れます。title="会員番号"のように項目名だけを重ねても、形式が違う理由は分かりません。

label要素は入力欄の名前を示し、条件説明は受け付ける形式を示します。項目名、入力条件、エラーをそれぞれ分けると、修正すべき箇所が読みやすくなります。

正規表現が不正なら形式検査として働かない

pattern属性の値が正規表現として正しく組み立てられない場合、その入力欄には有効な照合条件がない状態になります。複雑な式を貼っただけで、検査できていると判断してはいけません。

公開前には、少なくとも次の三種類を実際に送信します。

1. 受け付ける値
2. 境界にある値
3. 拒否する値

数字の桁数を条件にするなら、規定の桁、1桁少ない値、1桁多い値を試します。ハイフンが必要なら、ハイフンあり、なし、別の位置を試します。正しい値だけで確認すると、式が広すぎる場合と、検査自体が働いていない場合を見分けられません。

ブラウザーとサーバーで同じ条件を確認する

HTML5のconstraint validationは、誤りを送信前に知らせるために使えます。しかし、クライアント側の検査は回避でき、機能を実装しない環境や自動送信から値が届く場合もあります。サーバーはpattern属性を通ったという前提で処理してはいけません。

サーバー側では、必須か、文字コードと文字種は何か、長さはどこまでか、業務上存在する値かを改めて確認します。たとえば会員番号が形式に一致しても、登録済みの番号とは限りません。形式の一致と、データとして正しいことを分けます。

検査条件を変更する場合は、HTMLだけでなく、サーバー側の条件、エラー文、保存形式、既存データとの整合も確認します。制作会社へフォーム改修を頼むなら、正規表現だけでなく、受け付ける例と拒否する例を納品資料へ残してください。

最初の一手は正規表現を書くことではありません。対象項目について、空欄を許すか、受け付ける値を三例、拒否する値を三例、紙に書き出してください。