HTML DOMのInput Search patternプロパティとは？正規表現による検索フィールドのバリデーション方法
HTML DOMのInput Search patternプロパティは、検索フィールド（input type="search"）のpattern属性を取得・設定するために使用されます。このプロパティで指定した正規表現に基づいて、ユーザーが入力した値が妥当かどうかを検証できます。
pattern属性はフォーム送信時のクライアントサイドバリデーションに役立ち、指定された形式に一致しない入力があった場合、ブラウザが自動的にエラーメッセージを表示します。
構文
patternプロパティの設定
searchObject.pattern = regexp
ここでregexpには、検索フィールドの値をチェックするための正規表現を指定します。
patternプロパティの取得
searchObject.pattern
現在設定されている正規表現の文字列が返されます。
使用例
以下はInput Search patternプロパティを使用したサンプルコードです。この例では、検索フィールドに入力できる値を「3桁の数字」または「a〜gまでのアルファベット6文字」に制限しています。
<!DOCTYPE html>
<html>
<body>
<h1>Input Search patternプロパティ</h1>
<p>検索フィールドに入力できるのは、3桁の数字、または a〜g の6文字のアルファベットです</p>
<form action="/Sample_page.php">
FRUITS: <input type="search" id="SEARCH1" name="fruits" pattern="[0-9]{3}|[a-g]{6}"
title="3桁の数字、またはa〜gの6文字のアルファベット">
<input type="submit">
</form>
<br>
<button onclick="passPattern()">PATTERNを取得</button>
<p id="Sample"></p>
<script>
function passPattern() {
var P = document.getElementById("SEARCH1").pattern;
document.getElementById("Sample").innerHTML = "pattern属性の値は " + P + " です";
}
</script>
</body>
</html>実行結果
上記のコードを実行すると、次のような画面が表示されます。
pattern属性で指定された正規表現に一致しないテキストを検索フィールドに入力して送信しようとすると、以下のようにバリデーションエラーが表示されます。
「PATTERNを取得」ボタンをクリックすると、JavaScriptによってpattern属性の値が取得され、画面に出力されます。
ポイントまとめ
- patternプロパティは、HTMLInputElementオブジェクトの属性として利用できます。
- 正規表現はJavaScriptのRegExp構文に準拠します。先頭と末尾のスラッシュ（/）は不要です。
- title属性を併せて設定しておくと、入力エラー時にユーザーへヒントとして表示されるため、ユーザビリティ向上につながります。
- クライアントサイドでのバリデーションはあくまで補助的なものであり、サーバーサイドでも必ず入力チェックを行いましょう。
-
HTML DOM入力テキストのpatternプロパティとは？使い方とサンプルコードを解説
HTML DOMのInput Text patternプロパティは、テキスト入力フィールドのpattern属性を設定または取得するために使用されます。このプロパティを利用することで、pattern属性に指定した正規表現に基づいて、ユーザーが入力したテキストが妥当な形式かどうかを自動的に検証できます。 構文 patternプロパティの基本構文は以下の通りです。 patternプロパティの設定： textObject.pattern = regexp ここで「regexp」は、テキストフィールドの入力値を検証するための正規表現です。正規表現を指定することで、特定の文字数や文字種（数字のみ、アルファ
-
HTML DOM パスワード入力の pattern プロパティとは？使い方とサンプルコードを解説
pattern プロパティとはHTML DOM の Input Password（パスワード入力）オブジェクトが持つ pattern プロパティは、パスワード入力フィールドの pattern 属性を取得または設定するために使用されます。pattern 属性には正規表現を指定でき、ブラウザはその正規表現に基づいて入力されたパスワードの形式を自動的に検証します。これにより、サーバー側へ送信する前にクライアント側で入力チェックを行うことが可能になります。構文pattern プロパティを設定する場合の構文は以下のとおりです。passwordObject.pattern = regexpここで rege