半月の下で想ふ言

c⌒っ゚д゚)っφ この備忘録はsolalunaの人生の軌跡を記したものである・・・?

名前:solaluna Web系に興味あるんだけどいまシステム系に居る人 サイト:半月下想

【HTML5】<input type="datetime-local">が対応していないブラウザでも大丈夫なように正規表現で変な値を入れさせないようにする

 

過去にTwitter予約投稿サイトを作成した時にHTML5の<input type="datetime-local">を使ったんですがその時
ブラウザが対応していない場合、ただのテキストボックスで表示されることが分かりました。

f:id:solaluna:20150713234409p:plain

↑これ

Firefoxなどでみると

f:id:solaluna:20150713234400j:plain

 

↑こんな感じで表示される

なので対応していないブラウザを使われた時に変な値を送信されないように正規表現を使って正しい値しか受け取らないようにします。

★方法

form.php
~略~

<form action="processing.php" method="post" name="tmm_form">
<input type="datetime-local">
予約日時:<input type="datetime-local" step="600" name="yoyaku_time" maxlength="16">
<br />HTML5未対応ブラウザ用日時の書き方例:2014-10-06T02:00

~略~

<input type="submit" name="btnA" value="予約する">
</form>
processing.php
 /* 時間をフォームに入力させるときの処理 */

 //今の時間取得
 date_default_timezone_set('Asia/Tokyo');
 $nowYMDHI = date("Y-m-d H:i");

 //予約時刻取得
 $yoyaku_time = $_POST['yoyaku_time'];

 //予約日時チェック
 //フォーマット例:2014-10-06T03:00
 //正規表現
 if(!preg_match("/^(20)[0-9]{2}\-[0-9]{1,2}\-[0-9]{1,2}[T](0[0-9]|1[0-9]|2[0-3]):[0-5][0]$/", $yoyaku_time)){
    //エラー
    $_SESSION['message'] = 
      "予約日時空白か時間が変です。お使いのブラウザがHTML5に対応していない可能性があります。
       <br />お手数ですが時間をフォーマット通りに入力するか、HTML5対応ブラウザ(Chrome最新版など)でお使いください。
       <br />フォーマット例:2014-10-06T12:10";

    header("Location: ./form.php");
    exit;
 }else{
    $yoyaku_year = substr($yoyaku_time, 0, 4);
    $yoyaku_month = substr($yoyaku_time, 5, 2);            
    $yoyaku_day = substr($yoyaku_time, 8, 2);
    //日付けの正当性
    if(!checkdate($yoyaku_month, $yoyaku_day, $yoyaku_year)){
        //エラー
        $_SESSION['message'] = 
          "予約日時空白か時間が変です。お使いのブラウザがHTML5に対応していない可能性があります。
           <br />お手数ですが時間をフォーマット通りに入力するか、HTML5対応ブラウザ(Chrome最新版など)でお使いください。
           <br />フォーマット例:2014-10-06T12:10";

        header("Location: ./form.php");
        exit;                
    }
 }

 $yoyaku_time = str_replace('T', ' ', $yoyaku_time); //時間のフォーマット整え

 if($nowYMDHI >= $yoyaku_time){
    $_SESSION['message'] = "指定した予約日時は現在の時刻か、もう既に過ぎています。
                            <br/>現在時刻:".$nowYMDHI." 予約時刻:".$yoyaku_time;

    header("Location: ./form.php");
    exit;
 }

で今回で言いう一番重要なところは
if(!preg_match("/^(20)[0-9]{2}\-[0-9]{1,2}\-[0-9]{1,2}[T](0[0-9]|1[0-9]|2[0-3]):[0-5][0]$/", $yoyaku_time))
ここです。
ここでフォームの値が正しいフォーマットかどうか判断しています
※ただこれが完璧な正規表現かというとあんまり自信ないです(数回しかテストしてないので)
ごめんなさい

あとの処理は見てもらえるとわかるように今の時間より過去になってないかの判断をしております。

自分的メモおわり

(この記事は↓で書いたものと同じです)

qiita.com

 

HTML5プロフェッショナル認定試験レベル2攻略テキスト

HTML5プロフェッショナル認定試験レベル2攻略テキスト

 
スラスラわかるHTML&CSSのきほん

スラスラわかるHTML&CSSのきほん