inputタグに正規表現を適用させる！pattern属性とは？

トラストバンク開発部・フロントエンドチームの君田（きみた）です。

本日はinputタグのpattern属性について書いていこうと思います。フロントエンド開発をしていると、入力値の検証はどこかで実装する機会がある機能です。そんなときに少しでも役に立てれば嬉しいです。

patern属性について

pattern属性とはinput要素に正規表現を適用させることができる便利な属性です。どんなinput要素にも指定できるわけではなく、以下のtype属性を指定した場合に有効になります。

text
tel.
email
url
password
search

正規表現を設定することによって、入力欄が空文字でない場合を除いて、設定した正規表現と一致しない場合はpatternMissmatchがtureになり、対象のinput要素の擬似クラス:invalidが有効になります。

patternMissmatchとは？

値の入力値検証に関しての状態を表すValidityStateオブジェクトの読み取り専用プロパティです。

developer.mozilla.org

input要素のtype属性に text, tel, email, url, password, searchのいづれかが設定されてる状態で、pattern属性に正規表現が設定されているかつ、それに反する入力をした場合patternMismatchプロパティが trueになります。これがtrueになることで擬似クラス:invalid が有効になります。

擬似クラス:invalidを利用してみる

実際の動作を確認してみます。

<form>
  <div>
    <label for="uname">メールアドレス</label>
    <input
      type="email"
      name="email"
      pattern="[a-zA-Z0-9_+&*-]+(?:\.[a-zA-Z0-9_+&*-]+)*@(?:[a-zA-Z0-9-]+\.)+[a-zA-Z]{2,}]"
    />
  </div>
  <div>
    <button>送信</button>
  </div>
</form>

input:invalid {
  border: red solid 3px;
}

JavaScriptなしで入力値を検証し、:invalid 擬似クラスを利用してスタイルを変更することができます。

ユーザビリティに関して

pattern属性を付与したinput要素はユーザビリティの観点からtitle属性を設定することを推奨されています。例えば、「4文字以上、8文字以下で入力してください」などの文言を設定します。こちらも実際にやってみます。

<form>
  <div>
    <label for="uname">ユーザー名：</label>
    <input
      type="text"
      id="uname"
      name="name"
      required
      size="45"
      pattern="[a-z]{4,8}"
      title="英語小文字で4文字以上、8文字以下で入力してください"
    />
  </div>
  <div>
    <button>送信</button>
  </div>
</form>

input:invalid {
  border: red solid 3px;
}

pattern属性の検証中にパターンに一致しないことをtitle属性に設定した値を通してユーザーに伝えることができます。

アクセシビリティに関して

titile属性に値を設定した場合、マウスカーソルを合わせたときにテキスト表示されてしまうことがあります。ですので、「入力が間違っています、見直してください」「エラーが発生しました、再度入力してください」などエラーが発生しているかのような文言を設定しないように注意が必要です。

最後に

弊社トラストバンクでは様々な職種で絶賛採用中です！気になった方、是非お気軽にご連絡ください！

トラストバンクテックブログ

株式会社トラストバンクのプロダクト系メンバーによるブログです