電話番号に適した形式
現在、私のWebサイトでは、ユーザーは電話番号を非常に具体的な形式（555-555-5555）で入力する必要があります。ダッシュを忘れると壊れます。ユーザーが選択した任意の方法で入力できるようにする一方で、それが実際の電話番号であるかどうかをシステムが検証できるようにするための柔軟性を高める方法について、良い提案はありますか？電話の内線はどのように処理されますか？
理想的には、電話番号を任意の形式で入力でき、それを解析できるクライアント側とサーバー側のロジックがあるはずです。
それを除外すると、簡単な解決策を探しているだけであれば、フィールドマスキングの使用を検討してください。 jQueryを使用している場合、これはまともなものです。
アーカイブ済み-http://digitalbush.com/projects/masked-input-plugin/#demo
私は独自のものを使用せず、代わりに E.12 のような標準化されたものを参照します。
これは認められた国際標準であるため、検証プロセスにプラグインできるコード例、または完全なライブラリーを見つけることが期待されます。
ユーザーが入力した電話番号を検証するにはルールが多すぎます 。
1.電話番号は、最終的には数字の文字列です
ユーザーが数値のリストとして入力したものを変換する方法を示す1つの例 。
ユーザーからの生の入力をUIのすべての場所で使用し、コンピューターで使用するすべてのものについて、変換された数値の文字列を保存することもできます。
2.ユーザーに電話番号を好きなように覚えさせる
数字を覚えやすくするために文字を使用する人もいます。ユーザーに文字、ダッシュ、ハイフン、括弧を入力できないことを伝えるのはイライラします。実際には、ユーザーに特定の方法で番号を入力するように要求する必要はありません。
あなたが本当にそれらを助けていないので、事実の後でユーザーが入力したものを変更しようとしないでください。数字だけを入力し、他に何も入力しない場合は、ダッシュを追加しないでください。括弧、ダッシュ、ドットを入力した場合は、そのままにしておき、透過的に無視します。
ユーザーエクスペリエンスの最適なアプローチは、ユーザーが最も使いやすい形式を使用して電話番号を入力できるようにすることです。別のフィールドに分割したり、マスクを強制したりせず、フリーフォームと入力してください。次に、ユーザーがフィールドへの入力を完了した後（データを送信するためにフィールドを離れる）、目的に合わせて数値を標準形式にフォーマットします。
Webサイトについて話しているので、Google libphonenumber http://code.google.com/p/libphonenumber/ プロジェクトを使用して、ぼかしイベントでフォーマットを行うことができます。このツールは、国際電話番号とさまざまな形式を処理します。これがJavaScriptの例です： http://libphonenumber.googlecode.com/svn/trunk/javascript/i18n/phonenumbers/demo.html
このアプローチがユーザーエクスペリエンスに優れている理由は、ユーザーのメンタルモデルを変更せずにそのままにして、「私に考えさせない」と言えるからです。マスキングとフィールドの分離は、電話番号のメンタルモデルをユーザーに強制し、より多くの思考を必要とします。
私が見つけた最良の解決策（質問が尋ねられてから5年後）は、「intl-tel-input」です。検証にはGoogleのlibphonenumberライブラリを使用します。
「intl-tel-input」は、「国際電話番号を入力および検証するためのjQueryプラグインです。入力にフラグドロップダウンを追加し、ユーザーの国を自動的に検出し、関連するプレースホルダーを表示し、入力時に番号を自動フォーマットします。」
https://github.com/jackocnr/intl-tel-input
最も使いやすい形式は、すべてを受け入れ、検証を行わない形式です。
ここでは、クレジットカード情報ではなく、電話番号について話しています。電話番号を誤入力している人は何人ですか？これが国際ディスレクシア協会のサイトでない限り、おそらく誰もいないでしょう。
検証できる唯一のものはフォーマットです。番号が正しいかどうかはまだわかりません。
本当に必要な場合は、プレーンな古いテキストボックスを使用し、バックエンドコードを使用して解析する必要があります。個人的には、特定のフォーマットを要求する必要はまったくないと思います。ユーザーが自分の電話番号の10桁をすばやく入力できるようにしたい場合は、許可します。
また、対応するフォーマットは世界中に1つだけではなく、拡張機能などの奇妙なケースにも対応する必要があることを覚えておく必要があります。
ユーザーに「-」とスペースだけでなく数字も入力できるようにして、好きなように数字を入力できるようにします。それらが十分な数を入力する限り、それは有効な電話番号である場合もあります。クライアント側の検証を使用して数をカウントし、数が少なすぎる場合はメッセージを表示できます。電話番号が実際に有効になっているかどうかを確認することはできないため、入力エラーは避けられません。
サーバーは他の文字を解析し、データベースに数値を格納するだけです（そして、表示のために、それを解析して好みのフォーマットに戻します）。
GDSにはいくつかのアドバイスがあります。
「電話番号は、本当に必要な場合にのみ収集してください。誰もが電話を持っている、または使用できるわけではないので、ユーザーに連絡方法を選択できるようにしてください。
異なる形式を許可
ユーザーは、使い慣れた形式で電話番号を入力できるようにする必要があります。追加のスペース、ハイフン、角かっこ、ダッシュを使用できるようにし、国と市外局番に対応できるようにする必要があります。
電話番号の確認
電話番号を検証して、ユーザーが間違って入力したかどうかをユーザーに通知できるようにする必要があります。 Googleのlibphonenumberライブラリは、ほとんどの国の電話番号を検証できます。
エラーメッセージ
電話番号の形式が正しくなく、例がない場合
「01632 960 001、07700 900 982、+ 44 0808 157 0192などの電話番号を入力してください」と言います。
電話番号の形式が正しくなく、例がある場合
「電話番号を正しい形式で入力してください」と言います。
必要な電話番号の種類を明確にする
フォームラベルまたはヒントテキストを使用して、英国、国際、または携帯電話の番号が特に必要かどうかをユーザーに伝えます。
電話番号の例（ヒントテキストなど）を含めたい場合、Ofcomはメディアで使用するために予約されている番号のリストを保持しています。これらは：
英国以外の地域：01632 960000から960999英国ロンドン：020 7946 0000から7946 0999英国の携帯電話：07700 900000から900999電話番号が必要な理由を説明してください
連絡する理由と時期をユーザーに伝えます
電話をかけることができないデバイスのリンクとして電話番号を表示しない
次のように、電話番号をリンクとしてマークアップすることができます。
020 7947 6330ただし、これを行うと、電話番号がリンクとしてスタイル設定されるため、ほとんどのデスクトップマシンのように、電話をサポートしていないデバイスでは混乱を招きます。
また、これも必要ありません。最新のモバイルブラウザのほとんどは、電話番号を自動的に検出し、リンクとして表示します。
電話番号をリンクとしてマークアップする必要がある場合、たとえば、電話番号を自動的に検出できないデバイスをサポートする場合は、電話をかけることができないデバイスではリンクとして表示されないようにしてください。
電話番号をGOV.UKスタイルで記述します
入力マスキングを回避
ユーザーが次のことを行うことが難しくなるため、入力マスキングを避けます。
適切な方法で番号を入力し、別の場所から番号を転記し、正しく入力されていることを確認する電話番号の再フォーマットを回避する
GOV.UK Notifyチームは、たとえば+44国コードが追加された、再フォーマットされたバージョンの電話番号が表示されると混乱するユーザーがいることを確認しています。
このパターンに関する調査
処理する最良の方法については、さらに調査が必要です。
国際番号拡張子SMSショートコード
別のオプションは、自分のサイトの1つで行ったことです。
- ユーザーが自由に電話番号を追加できるフリーテキスト入力フィールド。
- 次に番号を取得し、必要に応じて番号を再フォーマットし、確認を求めるいくつかの方法でユーザーに表示します。
例：
ユーザーはこれをフィールドに入力します：055（0）555-555 55555
フォームの下にラジオボックスを表示して確認を求めます。
どのように他の国からあなたの番号に電話をかけますか？
+ 55-55555555555（+55は私の国コードです）
+ 55-055555555555（+55は私の国コードです）
+ 1-55-55555555555（+1は私の国コードです）
+ 1-055-055555555555（+1は私の国コードです）
等。
そうすれば、ユーザーの国番号を知る必要があるので、ユーザーの電話番号を確認し、その対処方法を正確に知ることができます...
ダッシュを追加するほかに、特に削除の場合は、カーソルの位置を処理する必要があります。
このAMDモジュールは、まさにそれを行います： https://github.com/whenyoubelieve2014/us-telephone-input
最も単純なUIアプローチは、数値形式を3つの限られたテキストボックスに分割することです。
または、RegExを使用して、入力した電話番号を解析し、システムが電話番号を受け入れるために必要な形式に変換します。
受け入れる-0-9 +（）-