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

HTML DOM入力テキストのpatternプロパティとは？使い方とサンプルコードを解説

HTML DOMのInput Text patternプロパティは、テキスト入力フィールドのpattern属性を設定または取得するために使用されます。このプロパティを利用することで、pattern属性に指定した正規表現に基づいて、ユーザーが入力したテキストが妥当な形式かどうかを自動的に検証できます。

構文

patternプロパティの基本構文は以下の通りです。

patternプロパティの設定：

textObject.pattern = regexp

ここで「regexp」は、テキストフィールドの入力値を検証するための正規表現です。正規表現を指定することで、特定の文字数や文字種（数字のみ、アルファベットのみなど）の入力を制限できます。

サンプルコード

それでは、patternプロパティの具体的な使用例を見てみましょう。以下の例では、ユーザー名として「3桁の数字」または「a〜gのアルファベット6文字」のいずれかを入力できるよう制限しています。

<!DOCTYPE html>
<html>
<body>
<h1>Input Text patternプロパティ</h1>
<p>ユーザー名は3文字の数字、またはa〜gまでのアルファベット6文字で入力してください</p>
<form action="/Sample_page.php">
USERNAME: <input type="text" id="USR" name="user_name" pattern="[0-9]{3}|[a-g]{6}"
title="3文字の数字、またはa〜gの間のアルファベット6文字">
<input type="submit">
</form>
<br>
<button onclick="textPattern()">GET PATTERN</button>
<p id="Sample"></p>
<script>
   function textPattern() {
      var P = document.getElementById("USR").pattern;
      document.getElementById("Sample").innerHTML ="pattern属性の値は："+ P;
   }
</script>
</body>
</html>

このコードでは、input要素のpattern属性に「[0-9]{3}|[a-g]{6}」という正規表現を設定しています。「|」はOR条件を意味し、「[0-9]{3}」は3文字の数字、「[a-g]{6}」はa〜gの範囲のアルファベット6文字にそれぞれマッチします。

実行結果

上記のコードを実行すると、以下のように表示されます。

HTML DOM入力テキストのpatternプロパティとは？使い方とサンプルコードを解説

テキストフィールドに、patternプロパティで指定した正規表現に一致しないテキストを入力して送信しようとすると、以下のような警告メッセージが表示されます。

HTML DOM入力テキストのpatternプロパティとは？使い方とサンプルコードを解説

また、GET PATTERNボタンをクリックすると、JavaScriptによってpattern属性の値が取得され、画面に表示されます。

HTML DOM入力テキストのpatternプロパティとは？使い方とサンプルコードを解説

まとめ

patternプロパティを使えば、サーバーサイドの処理に頼ることなく、クライアント側で手軽に入力値の形式チェックを行うことができます。フォームのバリデーションを強化したい場合にぜひ活用してみてください。

  1. HTML DOM パスワード入力の pattern プロパティとは？使い方とサンプルコードを解説

    pattern プロパティとはHTML DOM の Input Password（パスワード入力）オブジェクトが持つ pattern プロパティは、パスワード入力フィールドの pattern 属性を取得または設定するために使用されます。pattern 属性には正規表現を指定でき、ブラウザはその正規表現に基づいて入力されたパスワードの形式を自動的に検証します。これにより、サーバー側へ送信する前にクライアント側で入力チェックを行うことが可能になります。構文pattern プロパティを設定する場合の構文は以下のとおりです。passwordObject.pattern = regexpここで rege

  2. HTML DOMのTitle textプロパティとは？使い方とサンプルコードを解説

    HTML DOM の text プロパティは、ドキュメント内の <title> 要素が持つテキスト（タイトル文字列）を取得、または設定するために使用されます。このプロパティを活用することで、JavaScript からページタイトルを動的に読み取ったり変更したりすることが可能になります。 構文（シンタックス） テキスト値を取得する場合 titleElementObject.text テキスト値を文字列として設定する場合 titleElementObject.text = string 設定できる値は文字列のみです。指定した文字列がブラウザのタブやお気に入りに表示されるページタイトルと