【HTML5】<input type="datetime-local">が対応していないブラウザでも大丈夫なように正規表現で変な値を入れさせないようにする
過去にTwitter予約投稿サイトを作成した時にHTML5の<input type="datetime-local">を使ったんですがその時
ブラウザが対応していない場合、ただのテキストボックスで表示されることが分かりました。
↑これ
がFirefoxなどでみると
↑こんな感じで表示される
なので対応していないブラウザを使われた時に変な値を送信されないように正規表現を使って正しい値しか受け取らないようにします。
★方法
form.php
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))
ここです。
ここでフォームの値が正しいフォーマットかどうか判断しています
※ただこれが完璧な正規表現かというとあんまり自信ないです(数回しかテストしてないので)
ごめんなさい
あとの処理は見てもらえるとわかるように今の時間より過去になってないかの判断をしております。
自分的メモおわり
(この記事は↓で書いたものと同じです)
web creators特別号 HTML5完全読本―実践テクニックとWebデザインの最新動向 (インプレスムック)
- 作者: web creators編集部
- 出版社/メーカー: エムディエヌコーポレーション
- 発売日: 2014/02/03
- メディア: ムック
- この商品を含むブログを見る