読者です 読者をやめる 読者になる 読者になる

銀の弾丸

プログラミングに関して、いろいろ書き残していければと思っております。

入力日付をチェックする関数

JavaScript 日付・時刻 正規表現 jQuery UI 日付

文字列として入力された日付が正しいかどうかをJavaScriptで判定する関数です。

うるう年などの関係で、ややこしそうに思いますが、結構意外にあっさりしてます。

f:id:takamints:20160201164208p:plain
photo credit: 2010 Holiday Card via photopin (license)

年月日時分秒などの各フィールドを指定できるDateクラスのコンストラクタは、各値が範囲外の時にもうまく日付をずらして解釈してくれます。つまり、2月29日と指定すると3月1日と解釈してくれるのですね。

しかし、ユーザーがフォームに「2014年2月29日」と入力する意味は(おそらく)ありません。何か間違っている可能性もありますので、このような入力はエラーとして扱いたいですね。こんなときには、先のコンストラクタで生成された日付から、再び各フィールドの値を取り出して、入力されたものと比較し、全て一致しているなら正しいと判定できます。

function isValidDate(s) {
    var matches = /^(\d+)\/(\d+)\/(\d+)$/.exec(s);
    if(!matches) {
        return false;
    }
    var y = parseInt(matches[1]);
    var m = parseInt(matches[2]);
    var d = parseInt(matches[3]);
    if(m < 1 || m > 12 || d < 1 || d > 31) {
        return false;
    }
    var dt = new Date(y, m - 1, d, 0, 0, 0, 0);
    if(dt.getFullYear() != y
    || dt.getMonth() != m - 1
    || dt.getDate() != d)
    {
        return false;
    }
    return true;
}
  1. 最初に正規表現を使用して、3つの数字がスラッシュで区切られていることを確認しています。
  2. 正規表現のサブパターンで年月日の各フィールドの値を数値として抽出。
  3. 各フィールドの範囲チェックは冗長かもしれませんが、簡単なチェックなので一応。
  4. 最後に日付オブジェクトを生成して上に書いたチェックを行っています。

jQuery UIのdatepickerのようなウィジェットを使っていても、テキストボックスで文字を編集できる限り、入力日付のチェックは必須ですね。

最終的にフォームをサーバーへ送信する場合は、サーバー側で最終チェックをする必要があります。送信フォームはGETでもPOSTでも簡単に改ざんできますから。


JavaScript関連記事:

takamints.hatenablog.jp

takamints.hatenablog.jp

広告を非表示にする