電話番号の形式かを検証したい | 正規表現 | JavaScript 目的別リファレンス

目的別リファレンス

2024.09.23

このプログラムでは、JavaScriptの正規表現を使用して、文字列が有効な電話番号形式（国際フォーマットを含む）であるかどうかを確認します。

電話番号確認プログラム
1. HTMLとJavaScriptコード
2. プログラムの解説
RegExpオブジェクトメソッドの機能一覧

電話番号確認プログラム

以下のコードでは、正しい電話番号形式と間違った電話番号形式をそれぞれ検証しています。

HTMLとJavaScriptコード

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>電話番号の形式を確認する方法（国際フォーマット含む）</title>
    <script>
        window.onload = function() {
            // 電話番号の形式を確認する関数
            function validatePhoneNumber(phoneNumber) {
                // 国内・国際フォーマットを許可する正規表現
                const phonePattern = /^(\+?[0-9]{1,3})?[-.\s]?([0-9]{1,4})[-.\s]?([0-9]{1,4})[-.\s]?([0-9]{1,9})$/;
                return phonePattern.test(phoneNumber);  // 正規表現で電話番号形式を検証
            }

            // テスト用の電話番号
            const validPhoneNumber = "+81 90 1234 5678";
            const invalidPhoneNumber = "123-ABC-7890";

            // 電話番号の形式を確認
            const validResult = validatePhoneNumber(validPhoneNumber);
            const invalidResult = validatePhoneNumber(invalidPhoneNumber);

            // 結果をHTMLに表示
            document.getElementById('validPhoneCheck').textContent = `「${validPhoneNumber}」は正しい電話番号形式か: ${validResult}`;
            document.getElementById('invalidPhoneCheck').textContent = `「${invalidPhoneNumber}」は正しい電話番号形式か: ${invalidResult}`;
        }
    </script>
</head>
<body>

    <h1>電話番号の形式を確認する方法（国際フォーマット含む）</h1>

    <div id="validPhoneCheck"></div>
    <div id="invalidPhoneCheck"></div>

</body>
</html>

プログラムの解説

このプログラムでは、正規表現を使用して電話番号形式が正しいかどうかを検証しています。国際フォーマットを含むため、+で始まる国番号部分も許可しています。ハイフンやスペース、ピリオドで区切られた電話番号も許容します。

以下は正規表現およびtest()メソッドに関する注意点です。

正規表現では、/^(\+?[0-9]{1,3})?[-.\s]?([0-9]{1,4})[-.\s]?([0-9]{1,4})[-.\s]?([0-9]{1,9})$/の形式で電話番号を検証しています。
国際フォーマットをサポートするために、\+?を使用して+があってもなくてもよい形式に対応しています。
スペース、ピリオド、ハイフンなどが電話番号内に存在する場合でも、この正規表現は許可します。
正規表現における数値部分は[0-9]で指定し、1桁から9桁までの任意の数字列を許容します。