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

HTML DOM Input URLのpatternプロパティとは？使い方をサンプルコードで解説

Input URL patternプロパティとは

HTML DOMのInput URL patternプロパティは、URL入力フィールド（<input type="url">）に対応する正規表現を設定・取得するためのプロパティです。pattern属性に指定された値は、ユーザーがURLフィールドに入力したテキストに対して検証され、形式が一致しない場合はフォーム送信時にバリデーションエラーが表示されます。

このプロパティを活用することで、JavaScriptから動的に入力チェックのルールを読み取ったり、変更したりすることが可能になります。

構文（Syntax）

基本的な構文は以下の通りです。

正規表現を取得する場合

inputURLObject.pattern

正規表現を設定する場合

inputURLObject.pattern = 'RegExp'

サンプルコード

それでは、Input URL patternプロパティの具体的な使用例を見てみましょう。

<!DOCTYPE html>
<html>
<head>
<title>Input URL pattern</title>
<style>
    form {
        width:70%;
        margin: 0 auto;
        text-align: center;
    }
    * {
        padding: 2px;
        margin:5px;
    }
    input[type="submit"] {
        border-radius: 10px;
    }
</style>
</head>
<body>
<form onsubmit="checkPattern()">
<fieldset>
<legend>URL-pattern</legend>
<label for="URLSelect">URL :
<input type="url" id="URLSelect" pattern="https?://www.+[a-zA-Z0-9]+.com">
</label>
<input type="submit" value="Submit">
<div id="divDisplay"></div>
</fieldset>
</form>
<script>
    var divDisplay = document.getElementById("divDisplay");
    var inputURL = document.getElementById("URLSelect");
    divDisplay.textContent = 'pattern: '+inputURL.pattern;
    function checkPattern() {
        if(inputURL.value !== ''){
            alert("Redirecting to "+User);
        }
    }
</script>
</body>
</html>

実行結果

上記のコードを実行すると、以下のような出力が得られます。

「Submit」ボタンをクリックする前

画面には、pattern属性に設定された正規表現「https?://www.+[a-zA-Z0-9]+.com」が表示されます。

HTML DOM Input URLのpatternプロパティとは？使い方をサンプルコードで解説

無効なパターンで「Submit」ボタンをクリックした場合

入力内容が正規表現に一致しないため、ブラウザのバリデーションによりエラーメッセージが表示されます。

HTML DOM Input URLのpatternプロパティとは？使い方をサンプルコードで解説

有効なパターンで「Submit」ボタンをクリックした場合

入力内容が正規表現に一致しているため、フォームが正常に送信されます。

HTML DOM Input URLのpatternプロパティとは？使い方をサンプルコードで解説

まとめ

Input URLのpatternプロパティを使えば、URL入力フィールドに対する正規表現による入力チェックを簡単に実装できます。pattern属性はHTML標準のバリデーション機能と連携するため、JavaScriptを追加しなくても基本的な形式チェックが行える点が大きなメリットです。ユーザー入力の品質を保ちたい場面で、ぜひ活用してみてください。

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

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

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

    HTML DOM の URL プロパティは、現在のドキュメント（ページ）の URL に対応する文字列を返すプロパティです。読み取り専用のため、JavaScript からページの完全な URL を簡単に取得できます。 構文 URL プロパティの値を取得する基本的な構文は以下の通りです。 document.URL このプロパティは引数を取らず、ドキュメントの URL を文字列として返します。なお、類似の機能を持つ document.location.href との違いとして、document.URL は読み取り専用である点が挙げられます。 HTML DOM URL プロパティの使用例 ここでは、ボ