テキストフィールド用のカスタム検証パターン

A テキストフィールド ユーザーが入力した内容は何でも受け付けますが、特定の形式が必要な場合もあります。ウェブサイトのURL、製品コード、ライセンス番号、文字のみの名前などには、有効な形式を判断するためのパターンが存在します。カスタム検証パターンを使用すると、許容される形式を正確に定義し、送信前にエラーを検出できます。

このガイドでは、WordPressフォームのテキストフィールドにカスタム検証パターンを追加する方法を学びます。

検証パターンとは何ですか？

コンセプト

検証パターンとは、有効な入力を定義するルールのことです。

• 「文字のみを含める必要があります」
• 「有効なURLである必要があります」
• 「フォーマットABC-1234に一致する必要があります」
• 「正確に10文字でなければなりません」

彼らが働く仕組み

1. ユーザーがテキストフィールドに入力する
2. 送信時（または入力時）に、入力内容がパターンと照合されます。
3. 一致する場合：検証は成功です
4. そうでない場合：エラーメッセージが表示されます

公式サイト限定

• データ品質： 一貫したフォーマットを確保する
• エラー防止: ミスを早期に発見する
• ユーザーガイダンス: 明確な期待
• 下流互換性： データは他のシステムと連携して動作する

組み込みの検証パターン

自動フォームビルダー 一般的なパターンが含まれます。

組み込みパターンの使用

ステップ1: テキストフィールドを追加する

1. フォームを開く AFB
2. ドラッグ テキスト フォームへのフィールド
3. クリックして設定

ステップ2：検証パターンを選択する

1. もう完成させ、ワークスペースに掲示しましたか? 検証パターン 設定で
2. ドロップダウンから選択してください：
   • なし（パターンなし）
   • メールアドレス
   • URL
   • 文字のみ
   • 数字のみ
   • 英数字
   • カスタム額装
3. 設定を保存する

ステップ3：テスト検証

1. プレビューフォーム
2. 有効な入力を試してください。合格するはずです。
3. 無効な入力を試してください。エラーが表示されるはずです。

パターン例と使用事例

URLの検証

のために使用します：

• ウェブサイト欄
• ポートフォリオリンク
• ソーシャルメディアのプロフィール
• 参照URL

有効な例:

• https://example.com
• http://www.example.com/page
• https://example.com/path?query=value

無効な例:

• example.com（プロトコルが欠落しています）
• www.example.com（プロトコルが欠落しています）
• 単なるテキスト

文字のみ

のために使用します：

• 名字（簡易検証）
• 都市名
• 国コード
• アルファベット識別子

有効な例:

• John Redfern
• Smith
• アメリカニューヨーク

無効な例:

• John123
• ニューヨーク（スペース）
• オブライエン（アポストロフィ）

注意： 文字のみの使用は厳格です。スペース、ハイフン、アクセント記号が必要かどうかを検討してください。

数字のみ

のために使用します：

• ID番号
• 口座番号
• 数量（数値フィールドを使用しない場合）
• PINコード

有効な例:

• 12345
• 00123
• 9876543210

無効な例:

• 123-456（ハイフン）
• 123.45（XNUMX進数）
• 12345A

英数字

のために使用します：

• 製品コード
• 参照番号
• ユーザー名
• シリアル番号

有効な例:

• ABC123
• User42
• PROD001

無効な例:

• ABC-123（ハイフン）
• ABC 123（スペース）
• ABC_123（アンダースコア）

カスタム検証パターン（正規表現）

正規表現とは何ですか？

正規表現（regex）とは、テキストの形式を記述するパターンです。

• ^ = 文字列の開始
• $ = 文字列の終わり
• [A-Z] = 任意の大文字
• [a-z] = 任意の小文字
• [0-9] = 任意の数字
• {3} = 前の 3 つとちょうど
• {2,5} = 前の2～5回
• + = 1つ以上
• * = ゼロ以上
• ? = オプション（0または1）

カスタムパターンの作成

1. 検証ドロップダウンから「カスタム」を選択してください。
2. 正規表現パターンを入力してください
3. さまざまな入力でテストする

一般的なカスタムパターンの例

米国の郵便番号

パターン： ^\d{5}(-\d{4})?$

検証:

• 12345（5桁）
• 12345-6789 (ZIP+4)

拒否:

• 1234（短すぎる）
• 123456（長すぎる）
• ABCDE（アルファベット）

米国の電話番号

パターン： ^\d{3}-\d{3}-\d{4}$

検証: 555-123-4567

柔軟なフォーマットの場合： ^\(?\d{3}\)?[-.\s]?\d{3}[-.\s]?\d{4}$

検証:

• 555-123-4567
• (555) 123-4567
• 555.123.4567
• 555 123 4567

製品コード（ABC-1234形式）

パターン： ^[A-Z]{3}-\d{4}$

検証:

• ABC-1234
• XYZ-9999
• プロ-0001

拒否:

• abc-1234（小文字）
• AB-1234（2文字のみ）
• ABC1234（ハイフンが欠落しています）

ナンバープレート（各種フォーマット）

パターン（米国一般）： ^[A-Z0-9]{1,7}$

検証: 1～7文字の大文字または数字

クレジットカード（基本フォーマット）

パターン： ^\d{4}[\s-]?\d{4}[\s-]?\d{4}[\s-]?\d{4}$

検証:

• 1234567890123456
• 1234 5678 9012 3456
• 1234-5678-9012-3456

注意： 実際の支払いには、適切な決済処理業者とその認証機能をご利用ください。

ユーザー名（英字、数字、アンダースコア）

パターン： ^[a-zA-Z][a-zA-Z0-9_]{2,19}$

ルール：

• 文字で始まる
• 合計3～20文字
• 文字、数字、アンダースコアのみ

検証: user_123、JohnDoe、test42

XNUMX進カラーコード

パターン： ^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$

検証:

• ＃FF5733
• #FFF
• #ABC123

日付 (YYYY-MM-DD)

パターン： ^\d{4}-\d{2}-\d{2}$

検証: 2026-01-15

注意： 日付については、日付選択機能付きの日付フィールドを使用する方が通常は良いでしょう。

時刻（時：分 24時間表記）

パターン： ^([01]\d|2[0-3]):[0-5]\d$

検証:

• 09:30
• 14:45
• 23:59

請求書番号（INV-YYYY-NNNN）

パターン： ^INV-\d{4}-\d{4}$

検証:

• INV-2026-0001
• INV-2025-1234

社会保障番号（米国）

パターン： ^\d{3}-\d{2}-\d{4}$

検証: 123-45-6789

警告： 社会保障番号（SSN）の収集には注意が必要です。セキュリティとプライバシーに影響を及ぼす可能性があります。

独自のパターンを作成する

ステップバイステップのプロセス

1. 要件を定義します。 どのようなフォーマットが必要ですか？
2. 分解する： どのような文字が、何文字で、どのような順番で登場しますか？
3. 構築パターン： 正規表現に翻訳する
4. 徹底的にテストしてください: 有効な入力と無効な入力
5. エラーメッセージを書き込む: ユーザーがフォーマットを理解できるように支援します

例：従業員ID

要件： 2文字＋4桁の数字＋1文字（例：AB1234C）

壊す：

• 大文字2文字： [A-Z]{2}
• 4桁: \d{4}
• 大文字1文字： [A-Z]
• 前後に何もなし： ^ の三脚と $

最終パターン： ^[A-Z]{2}\d{4}[A-Z]$

テストパターン

フォームで使用する前に：

• 有効な入力をテストします（合格するはずです）
• 無効な入力をテストする（失敗するはず）
• エッジケース（境界、特殊文字）をテストする
• オンライン正規表現テスターを使用してデバッグします

検証時のエラーメッセージ

デフォルトメッセージ

• 「有効な値を入力してください」
• 「このフィールドは無効です」

より良いカスタムメッセージ

ユーザーに期待されるフォーマットを伝えましょう。

プレースホルダーとヘルプテキストの使用

エラーを防ぐため、フォーマットを事前に表示してください。

• プレースホルダー: 「ABC-1234」
• ヘルプテキスト: 「製品コードを入力してください（例：ABC-1234）」

ベストプラクティス

1. シンプルに始める

可能な限り組み込みのパターンを使用してください。カスタム正規表現は複雑さを増します。

2. 過剰な検証は避ける

過度に厳格なパターンはユーザーを苛立たせる。

• ハイフンを含む名前（メアリー・ジェーンなど）
• アポストロフィを含む名前（O'Brien）
• 国際的な登場人物（ホセ、ミュラー）

3. 期待されるフォーマットを表示する

ユーザーには必ず期待することを伝えましょう。

• 例付きのプレースホルダー
• フォーマットを説明するヘルプテキスト
• エラーメッセージをクリアする

4. エッジケースをテストする

• 入力が空です
• 先頭/末尾にスペース
• 特殊文字
• 最大長

5.代替案を検討する

場合によっては、他のアプローチの方が良いこともあります。

• 日付 → 日付フィールドを使用する
• 数値 → 数値フィールドを使用
• 電話 → 電話フィールドをフォーマットで使用する
• 固定オプション → ドロップダウンを使用

他の検証と組み合わせる

パターン + 必須

• 入力欄は記入済みで、かつパターンと一致している必要があります。
• 空欄の場合は「必須」とみなされます
• フォーマットが間違っているため、パターンが失敗します

パターン + 最小/最大長さ

• パターンはフォーマットを検証します
• 長さはサイズを検証します
• 両方とも合格しなければならない

トラブルシューティングパターン

パターンが機能しない

チェック：

• 構文は正しい（タイプミスなし）
• 特殊文字が正しくエスケープされました
• 必要に応じて^と$アンカーを使用してください

有効な入力が拒否されました

チェック：

• パターンが厳しすぎるかもしれない
• パターンに有効な文字が不足しています
• 大文字小文字の区別に関する問題

無効な入力が受け入れられています

チェック：

• パターンが緩すぎる可能性があります
• アンカー（^と$）がありません
• より多くの例でテストする

よくある質問

複数のパターンを組み合わせることはできますか？

1つのフィールドには1つのパターンを使用します。複雑な検証を行う場合は、条件を1つの正規表現に組み合わせる（|）か、すべての条件に一致するパターンを作成してください。

パターンは大文字と小文字を区別しますか？

デフォルトでは、はい。[A-Za-z] を使用すると大文字と小文字の両方に一致します。または、サポートされている場合は大文字小文字を区別しないフラグを追加してください。

スペースを許可するにはどうすればよいですか？

文字クラスに \s を追加します。[A-Za-z\s] は文字とスペースに一致します。

国際的なキャラクターについてはどうでしょうか？

標準の[A-Za-z]にはアクセント付き文字は含まれません。国際的な名前の場合は、検証を緩めるか、任意の文字に\p{L}（サポートされている場合）を使用することを検討してください。

ぼかし時に検証すべきか、送信時に検証すべきか？

どちらも有効です。フォーカスが外れた時（ぼやけた時）はより迅速なフィードバックが得られます。送信時にはすべての操作が記録されます。多くのフォームは両方の機能を備えています。

製品概要

カスタム検証パターンを追加する:

1. パターンタイプを選択してください – 組み込み型またはカスタム型
2. パターンを設定する – 正規表現を選択または入力
3. プレースホルダーを追加 – 期待されるフォーマットを表示
4. ヘルプテキストを追加する – 要件を説明する
5. エラーメッセージを設定 – ガイド補正
6. 徹底的にテストする – 有効な入力と無効な入力

結論

カスタム検証パターンは、特定のフォーマットを適用することでデータの品質を保証します。URL検証、商品コード、カスタム識別子など、どのような検証が必要な場合でも、パターンは送信前にエラーを検出し、ユーザーを正しい入力へと導きます。

自動フォームビルダー 一般的なパターン（メールアドレス、URL、文字、数字、英数字）に対応し、特殊な検証ニーズに対応するカスタム正規表現もサポートしています。クリーンなデータは、適切な検証から始まります。

フォーム入力内容の検証準備はできましたか？ 自動フォームビルダーをダウンロード また、フォームが正しい形式のデータを収集するようにしてください。