属性pattern

属性 pattern は、HTML フォームの入力フィールドを正規表現で検証する属性です。

正規表現は、ほぼあらゆる検証ルールを作成できる特別なコマンドです。詳細については、 PHPの正規表現に関する書籍または JavaScriptの正規表現に関する書籍で学ぶことができます。

この属性が設定されたフィールドが正しく入力されていない状態でフォームの送信を試みると、ブラウザはフォームの送信を許可せず、ポップアップヒントとしてエラーメッセージを表示します。残念ながら、このエラーメッセージの内容や見た目をHTMLやCSSで変更することはできません。

属性 pattern の存在は、PHP側でのサーバーサイド検証の必要性を免れるものではないことに注意してください（この属性による検証は簡単に回避できるためです）。

属性 pattern は、 input タグまたは textarea タグに適用する必要があります。

例

input タグに注目し、属性 pattern を追加して、 2桁の数字（例えば、25）が入力されているかを検証する正規表現を設定してみましょう。

任意の数字を入力し、ボタンをクリックしてフォームを送信してみてください。 2桁の数字が入力されていない場合、ブラウザはフォームの送信を許可せずエラーメッセージを表示します。それ以外の場合はフォームが送信されます：

<form action="">
	<input type="text" pattern="\d{2}">
	<input type="submit">
</form>

前の例では、ブラウザはフィールドが空でない場合にのみエラーを表示していました（空のフィールドは2桁の数字ではないにも関わらず）。属性 pattern とともに属性 required も記述することで、空のフィールドに対してもエラーが発生するようにしてみましょう：

<form action="">
	<input type="text" pattern="\d{2}" required>
	<input type="submit">
</form>