HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTMLのpattern属性の使い方を解説！正規表現で入力値を検証する方法

pattern属性とは？

HTMLのpattern属性は、フォームの入力値を正規表現で検証するための属性です。この属性を指定できるのは、以下のinputタイプに限られます。

  • text（テキスト）
  • url（URL）
  • tel（電話番号）
  • search（検索）
  • date（日付）
  • email（メールアドレス）
  • password（パスワード）

特にパスワード入力では、pattern属性を活用することで「最低限必要な文字数」などの条件を簡単に設定できます。たとえば「パスワードは8文字以上にする」といったルールを、ブラウザ側で自動的にチェックさせることが可能です。

使用例

次のコードを実行すると、HTMLにおけるpattern属性の使い方を実際に確認できます。このサンプルでは、パスワードに「8文字以上」というパターンを設定しています。

ユーザーが8文字未満のパスワードを入力したまま送信ボタンをクリックすると、「Please match the requested format: Eight or more characters（要求された形式に一致させてください：8文字以上）」というエラーメッセージが表示され、送信が中断されます。

<!DOCTYPE html>
<html>
   <body>
      <h2>Register</h2>
      <form action="/new.php">
         Student UserName<br><input type = "text" name = "name"/><br>
         Password<br><input type = "password" name = "password" pattern = ".{8}"
         title="Eight or more characters"><br><br>
         <input type = "submit" value = "Submit">
      </form>
   </body>
</html>

ポイント解説

pattern=".{8}"は「任意の文字が8個以上続く」という意味の正規表現です。また、title属性に説明文を記述しておくと、バリデーションエラー発生時にその内容がツールチップとして表示されるため、ユーザーにとって分かりやすいフォームになります。

  1. HTMLのlist属性とは？datalist要素で入力候補を表示する方法を解説

    HTMLのlist属性とはHTMLでは、<datalist>要素を使用して、あらかじめ定義された選択肢のリストを作成できます。このリストは<input>要素（入力欄）に対して適用され、ユーザーが文字を入力すると、定義済みの選択肢が候補として自動的に表示されます。<input>要素のlist属性は、対応する<datalist>要素のidを参照することで、入力欄と選択肢リストを関連付けます。このlist属性は、HTML5で新たに導入された機能です。list属性の基本的な使い方list属性を使うには、以下の2つのステップを行います。<datali

  2. HTML pattern属性とは？使い方とサンプルコードをわかりやすく解説

    HTMLのpattern属性は、<input>要素に入力された値が、あらかじめ指定した正規表現に一致するかどうかを検証するための属性です。この属性を活用すれば、JavaScriptを書かなくてもブラウザ側で手軽に入力チェック（バリデーション）を実装でき、フォームの利便性を高めることができます。pattern属性を指定した入力欄に正規表現と一致しない値が入力された場合、フォーム送信時にエラーメッセージが表示され、送信がブロックされます。利用できるのはtext・search・tel・url・email・passwordなどのテキスト系入力タイプです。構文pattern属性の基本構文は次