目次
概要
ユーザーの入力値が期待する形式（電話番号、郵便番号、メールアドレスなど）に沿っているかを判定するには、正規表現オブジェクトの test() メソッドを使用するのが最も効率的です。
本記事では、単純な文字列検索から複雑なフォーマット検証まで、test() メソッドを用いてリアルタイムに入力値をバリデーション（検証）する実装方法を解説します。
仕様（入出力）
- 入力: 電話番号入力フィールドへのテキスト入力（ハイフン入りの入力を許容）。
- 出力: 形式が正しくない場合に表示される警告メッセージ。
- 動作:
- 入力された文字列からハイフン（
-）を取り除く。 - 整形後の文字列が「0から始まる10桁または11桁の数字」であるかを判定する。
- 条件を満たさない場合、警告メッセージを表示する。
- 入力された文字列からハイフン（
基本の使い方
正規表現リテラル（/パターン/）に対して test() メソッドを実行します。一致すれば true、しなければ false を返します。
| メソッド | 意味 | 戻り値 |
正規表現.test(文字列) | 文字列がパターンにマッチするか判定する | true / false |
// 'J' が含まれているか
console.log(/J/.test('JavaScript')); // true
// 先頭が 'iP' で始まるか (^ は先頭)
console.log(/^iP/.test('iPhone')); // true
// 数字が含まれているか (\d は数字)
console.log(/\d/.test('suzuki')); // false
// 'Java' の後に何かが続くか (.* は任意の文字の繰り返し)
console.log(/Java.*/.test('JavaScript')); // true
コード全文（HTML / JavaScript）
HTML
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Regex Validation Example</title>
<style>
body { font-family: sans-serif; padding: 20px; }
.form-group { margin-bottom: 15px; }
label { display: block; margin-bottom: 5px; font-weight: bold; }
input[type="tel"] {
padding: 10px;
width: 100%;
max-width: 300px;
font-size: 16px;
border: 1px solid #ccc;
border-radius: 4px;
}
/* エラー時のスタイル */
.input-error { border-color: #d32f2f; background-color: #ffebee; }
.error-message {
color: #d32f2f;
font-size: 0.9em;
margin-top: 5px;
display: none; /* 初期状態は非表示 */
font-weight: bold;
}
.error-message.visible { display: block; }
</style>
</head>
<body>
<div class="form-group">
<label for="telInput">電話番号 (ハイフンなし、またはハイフンあり)</label>
<input type="tel" id="telInput" placeholder="例: 090-1234-5678">
<div id="errorMsg" class="error-message">
※ 電話番号は0から始まる10桁または11桁の半角数字で入力してください。
</div>
</div>
<script src="app.js"></script>
</body>
</html>
JavaScript
/**
* HTML要素の参照を取得
*/
const telInput = document.querySelector('#telInput');
const errorMsg = document.querySelector('#errorMsg');
/**
* 電話番号の形式を検証する関数
*/
const validatePhoneNumber = () => {
// 1. 入力値を取得
const rawValue = telInput.value;
// 入力が空の場合はエラーを消して処理終了
if (rawValue === '') {
errorMsg.classList.remove('visible');
telInput.classList.remove('input-error');
return;
}
// 2. ハイフンを削除して正規化（数値のみにする）
const trimmedValue = rawValue.replace(/-/g, '');
// 3. 正規表現による判定
// ^ : 文字列の先頭
// 0 : 最初の文字は0
// [0-9]{9,10} : 0-9の数字が9個～10個続く (合計10～11桁)
// $ : 文字列の末尾
const pattern = /^0[0-9]{9,10}$/;
// test() メソッドでマッチするか確認
const isValid = pattern.test(trimmedValue);
// 4. 結果に応じたUI更新
if (isValid) {
// 正しい形式
errorMsg.classList.remove('visible');
telInput.classList.remove('input-error');
} else {
// 不正な形式
errorMsg.classList.add('visible');
telInput.classList.add('input-error');
}
};
// キー入力のたびに検証を実行 (keyup)
telInput.addEventListener('keyup', validatePhoneNumber);
カスタムポイント
- 正規表現パターンの変更:検証したい対象に合わせて正規表現を差し替えてください。
- 郵便番号 (例: 123-4567):
/^\d{3}-\d{4}$/ - 半角英数字のみ:
/^[a-zA-Z0-9]+$/ - カタカナのみ:
/^[\u30A0-\u30FF]+$/
- 郵便番号 (例: 123-4567):
- エラー表示のタイミング:現在は
keyup（文字入力直後）で判定していますが、blur（フォーカスが外れた時）に変更することで、入力中は警告を出さず、書き終わったタイミングでチェックする挙動に変更できます。
注意点
- test()メソッドのステートフル性:正規表現に
g(global) フラグを付けた場合、test()は前回マッチした位置を記憶してしまいます。単純なチェックにはgフラグを付けないか、毎回正規表現オブジェクトを生成するようにしてください。 - 完全一致の重要性:
^(先頭) と$(末尾) を付け忘れると、部分一致（”abc09012345678xyz” など）でもtrueになってしまいます。入力値全体の形式を問う場合は必ず両端を指定してください。 - セキュリティ:クライアントサイド（JavaScript）でのバリデーションはあくまでユーザー体験の向上が目的です。サーバー送信時には、必ずサーバー側でも再度検証を行ってください。
応用
複数の条件を組み合わせたパスワード強度チェック
「英字」と「数字」の両方を含んでいるかを判定する例です。
const password = "password123";
// 英字が含まれるか
const hasLetter = /[a-zA-Z]/.test(password);
// 数字が含まれるか
const hasDigit = /[0-9]/.test(password);
// 8文字以上か
const hasLength = password.length >= 8;
if (hasLetter && hasDigit && hasLength) {
console.log("強力なパスワードです");
} else {
console.log("英字と数字を含む8文字以上にしてください");
}
まとめ
正規表現.test() は、入力値が特定のパターンに合致しているかを真偽値で即座に判定できるメソッドです。includes() などの文字列メソッドでは判定できない「数字の繰り返し」や「先頭・末尾の指定」といった複雑なルールを、簡潔なコードで実装できます。ユーザーフォームの品質向上には欠かせない技術です。
