備忘録です。調べてもなかなか出てこなかったので苦労しましたが、実はこれだけで制御できます。
^(任意の入力条件)?$
あとはこれを各プログラム言語に合わせてデリミタを付与してください。
解説
()は任意の文字列のグループ化、?は0回か1回の繰り返しになります。そして^は接頭辞、$は接尾辞。つまり、任意の入力条件の0回か1回の繰り返しとなるので、検索用フォームやデータ入力フォームなどで、未入力か条件付き入力か制御したいときに役立ちます。
例は、家族名を入力するフォームがあり、条件としては必須入力項目ではないですが、入力の際には姓名の間に一文字空けてほしい場合などです。
<input type="text" name="family1" pattern="^((\S+ )+\S+)?$">
こうすれば、無記入か条件付きの家族名入力（例：葛飾 北斎、パブロ ルイス ピカソなど。1回以上の繰り返しにしているのはミドルネームに対応させるためです）の制御ができます。
応用編：バリデーションチェックを制御しつつ、Enterキーでの誤送信を防ぎたい
今日ではXSS対策などの理由で\Aと\zを用いて、値のマッチングを厳格化させるのがセオリーですが、pattern属性は内部でJavaScriptによるマッチングを行う機能のため、\A、\zは対応していません。よって、常時スクリプトエラーが発された状態となっているので、バリデーションチェックも機能せず素通りします。
<input type="text" pattern="\A((\S+ )+\S+)?\z"> <!-- 判定に関係なく通ってしまいます。 -->
ですが、Enterキーでの誤送信はシステム運用上問題がある上、勝手にEnterなどを押下されたりするのはセキュリティ的なリスクも否めないので、フォーム入力操作中にEnterキーを押しても反応しないように制御します。
<body>
<form name="frm" method="post" action="test.html" >
<label>郵便番号(例：123-4567)</label><input type="text" pattern="^(\d{3}-\d{4})?$">
<input type="submit" value="送信">
</form>
<script>
frm.addEventListener("keypress",(e)=>{
if(e.which && e.which === 13){
return false;
}
})
</script>
</body>
これで、確かに郵便番号にハイフン付与を必須条件にしたまま、Enterキーでの誤送信は防げている…のですが、不要なバリデーションチェックのメッセージが逐一表示されたままです。そこで、バリデーションチェックを発動させないようにイベントの伝播を阻止するpreventDefault()を用います（バリデーションチェックが行われるタイミングについては、当方の記事で触れています）
- [JavaScript] e.preventDefault とか e.stopPropagation とか return false
- ライブラリを使わずに、複数のチェックボックスにバリデーション制御をかけたい
<body>
<form name="frm" method="post" action="test.html" >
<label>郵便番号</label><input type="text" pattern="^(\d{3}-\d{4})?$">
<input type="submit" value="送信">
</form>
<script>
frm.addEventListener("keypress",(e)=>{
if((e.wchich && e.which === 13){
e.preventDefault(); //バリデーションチェックを発火させない
}
})
</script>
</body>
これで\Aと\zと同様に、Enterキーによる誤送信を防止し、かつ送信ボタンがクリックされ、submitされた場合のみバリデーションチェックを行うことができます。