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

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

pattern プロパティとは

HTML DOM の Input Password（パスワード入力）オブジェクトが持つ pattern プロパティは、パスワード入力フィールドの pattern 属性を取得または設定するために使用されます。

pattern 属性には正規表現を指定でき、ブラウザはその正規表現に基づいて入力されたパスワードの形式を自動的に検証します。これにより、サーバー側へ送信する前にクライアント側で入力チェックを行うことが可能になります。

構文

pattern プロパティを設定する場合の構文は以下のとおりです。

passwordObject.pattern = regexp

ここで regexp は、パスワードフィールドの値を照合するための正規表現です。文字列として正規表現パターンを代入します。

サンプルコード

それでは、pattern プロパティの具体的な使用例を見ていきましょう。次の例では、「3桁の数字」または「a〜g の範囲内の6文字の英字」のどちらかで構成されるパスワードを受け付けるフォームを作成しています。

<!DOCTYPE html>
<html>
<body>
<h1>Input Password pattern property</h1>
<p>パスワードは「3桁の数字」または「a〜g の6文字の英字」のいずれかで入力してください</p>
<form action="/Sample_page.php">
Password: <input type="password" id="PASS" name="passW" pattern="[0-9]{3}|[a-g]{6}" title="3桁の数字、または a〜g の範囲の6文字の英字">
<input type="submit">
</form>
<br>
<button onclick="passPattern()">GET PATTERN</button>
<p id="Sample"></p>
<script>
    function passPattern() {
        var P = document.getElementById("PASS").pattern;
        document.getElementById("Sample").innerHTML = "pattern属性の値は " + P + " です";
}
</script>
</body>
</html>

出力結果

このコードを実行すると、まず次のような画面が表示されます。

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

pattern 属性で指定した正規表現に一致しないパスワードを入力して送信しようとすると、title 属性に設定したメッセージがツールチップとして表示され、送信がブロックされます。

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

さらに、「GET PATTERN」ボタンをクリックすると、現在設定されている pattern 属性の値が画面に出力されます。

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

コードの解説

1. パスワード入力フィールドの作成

まず、type が password の入力要素を作成しています。id="PASS"、name="passW"、そして pattern="[0-9]{3}|[a-g]{6}" を指定しています。

この pattern 属性の値である正規表現 [0-9]{3}|[a-g]{6} は、「0〜9 の数字がちょうど3桁」または「a〜g の範囲の英字がちょうど6文字」という条件を意味します。入力内容がこの正規表現に一致しない場合、title 属性に設定されたテキストがエラーメッセージとして入力欄上に表示されます。

また、このパスワードフィールドは action 属性が "/Sample_page.php" に設定された form 要素の中に配置されています。submit ボタンがクリックされると、フォームデータはこの URL に対して送信されます。

<form action="/Sample_page.php">
Password: <input type="password" id="PASS" name="passW" pattern="[0-9]{3}|[a-g]{6}" title="3桁の数字、または a〜g の範囲の6文字の英字">
<input type="submit">
</form>

2. GET PATTERN ボタンの設置

次に、クリックされると passPattern() メソッドを実行するボタンを作成しています。

<button onclick="passPattern()">GET PATTERN</button>

3. pattern プロパティの取得と表示

passPattern() 関数では、getElementById() メソッドを使って type が password の入力フィールドを取得し、その pattern プロパティを読み取ります。pattern プロパティは、設定されている正規表現を文字列型として返します。

取得した正規表現の文字列は変数 P に格納され、innerHTML プロパティを使って id="Sample" の段落要素内に表示されます。

function passPattern() {
    var P = document.getElementById("PASS").pattern;
    document.getElementById("Sample").innerHTML = "pattern属性の値は " + P + " です";
}

まとめ

Input Password の pattern プロパティを使えば、JavaScript から動的にパスワードの検証ルール（正規表現）を取得・変更できます。ユーザーの利便性を損なわないよう、title 属性でわかりやすいガイダンスを提示することも重要です。ただし、クライアント側での検証はあくまで補助的なものであるため、セキュリティ確保のためには必ずサーバー側でも入力チェックを行いましょう。

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

    HTML DOMのInput Password requiredプロパティは、<input>要素のrequired属性に関連付けられたプロパティです。このプロパティを使うことで、フォームをサーバーに送信する前に、パスワード欄の入力が必須かどうかを設定したり、現在の設定状態を取得したりすることができます。required属性が設定されたパスワード欄が空のままの場合、ユーザーはフォームを送信できなくなります。 構文（Syntax） requiredプロパティの基本的な構文は以下の通りです。 requiredプロパティの設定 textObject.required = true|fals

  2. HTML DOM Input PasswordのreadOnlyプロパティとは？使い方を徹底解説

    HTML DOMのInput Password readOnlyプロパティは、パスワード入力フィールドが読み取り専用かどうかを設定または取得するために使用されます。readOnlyプロパティを設定すると、要素は編集不可能になりますが、Tabキーやクリックによってフォーカスを得ることは可能です。また、読み取り専用の要素にデフォルト値が含まれている場合、フォーム送信時にはその値がサーバーへ送信されます。 構文 readOnlyプロパティを設定する構文は以下の通りです。 passwordObject.readOnly = true|false ここで、trueはパスワードフィールドが読み取り専用で