CSS、デザイン、プログラミング等などWebに関する事を更新しています。

電話番号のパターン

イメージとコード

フォームに入力された電話番号のjavascriptでのバリデートの流れ。ハイフン有り無しでも正確に判別できるようにする。細かくやるなら「先頭が090か」など逐一条件分岐する。

1. 先頭が0である
2. ハイフン（-）でsplitすると、1つ（ハイフン未入力時）、もしくは3つ（ハイフン入力時）に分割できる
3. ハイフン（-）を除いて10～11桁である
4. splitした3つの内、1つ目の番号の塊が3桁、2つ目・3つ目が4桁になっている。
5. splitした3つの内、1つ目の番号の塊が2～5桁、2つ目が1～4桁、3つ目が4桁になっている。

だいたいこんなイメージで下記の様な感じに書く。とりあえずのメモ。コピペしても動きません。

入力欄からハイフンをそもそも消してしまう場合はコレを記述する

参考

• 電話番号のパターン - 電話番号（国内）って以下パターンであってますか？0X... - Yahoo!知恵袋
• 総務省｜電気通信番号の利用・指定｜電気通信番号指定状況

原因

• SESSIONを使っている
• POSTでパラメータを送信
• ブラウザの「戻る」を押した

犯人はだれだ？

原因は、PHPでSESSIONを使うと（デフォルト設定では）自動でキャッシュ制御用のHTTPヘッダーが送出され、それによりクライアント側のキャッシュが使用不可にされるため。（参考：floatingdays: PHPでブラウザキャッシュを有効にする）

つまり、下記条件を全て満たした場合にこの現象が発生する。

• HTTP POSTで遷移してきた。
• SESSIONを使っている。（session_start()してるか、php.ini等でsession.auto_start=1に設定している。）
• 次のページに行ってから、ブラウザの履歴機能（JavaScriptのhistory.back()を含む）で戻ってきた。

PHPで 「Webページの有効期限が切れてます」となる時の傾向と対策 - floatingdays

対策

方法1

session_start()する前に、session_cache_limiter('none')を書く。SESSIONを利用しても余計なHTTPヘッダが送出されない。

  session_cache_limiter('none');
  session_start();
  // フォーム

cache_limiterにnoneというパラメータは無いからパラメータエラーとなり、結果的にHTTPヘッダを送信しないという挙動になっているらしい。

PHP: session_cache_limiter - Manual

方法2 こっちが正解

header();に色々書いて、ブラウザキャッシュを表示させる。ただし、SESSIONの最新情報が入っていないので注意が必要。

  session_start();
  header('Expires:-1');
  header('Cache-Control:');
  header('Pragma:');

今更誰にも聞けないPJAXの実装をやる。他ページの特定のDOM内をシームレスに持ってこれる。しかも高速。URLも綺麗。SEO的にも問題ない。特ダネじゃないか。

• defunkt/jquery-pjax
• falsandtru/pjax-api
• turbolinks/turbolinks-classic

で、3つくらいあるみたいなんだけど、何が違うのか解らない。この時点で詰んでるし面倒くさい。とりあえずjquery-pjaxから実装してみる。

コード

jQuery PJAX（defunkt版）を使って検索結果の表示とURLをシームレスに切り替える。

html

javascript

公式ではこんな感じな筈。

Screen shot : 登戸エステート｜川崎市多摩区登戸 登戸駅・向ヶ丘遊園駅 賃貸 不動産の登戸エステート

川崎市多摩区の不動産を取り扱う会社からサイトのスマフォ化対応などの仕事を会社で請け負いました。ありがとうございました。

川崎市多摩区登戸周辺の賃貸アパート・マンションをお探しの方、専修大学・明治大学・日本女子大学へ入学の際に一人暮らし様のお部屋を探している方は一度相談してみてはいかがでしょうか？親身になって話を聞いてくれる優しい不動産屋さんでとても頼りにます。

PHP7で堅牢なコードを書く - 例外処理、表明プログラミング、契約による設計 / PHP Conference 2016 by Takuto Wada

PHPに限らず意識していきたい。