JavaScript：日付の妥当性のチェック

Question

前提・実現したいこと

課題で社員情報登録のフォームを作成しており、
生年月日の入力チェックで存在しない日付を弾きたいです。（閏年も含む）

発生している問題・エラーメッセージ

入力形式のチェックまではできているのですが、知識不足で日付のチェックのやり方が分からず困っております。
ご教示いただけると助かります。

該当のソースコード

    // 入力内容チェックのための関数
    function input_check(){
    var result = true;

    // エラー用装飾のためのクラスリセット
    $('#emp_pass').removeClass("inp_error");
    $('#emp_name').removeClass("inp_error");
    $('#address').removeClass("inp_error");
    $('#birthday').removeClass("inp_error");


    // 入力エラー文をリセット
    $("#emp_pass_error").empty();
    $("#emp_name_error").empty();
    $("#address_error").empty();
    $("#birthday_error").empty();

    // 入力内容セット
    var emp_pass   = $("#emp_pass").val();
    var emp_name  = $("#emp_name").val();
    var address = $("#address").val();
    var birthday  = $("#birthday").val();

    // 入力内容チェック

    // パスワード
    if(emp_pass == ""){
        $("#emp_pass_error").html("* パスワードを入力してください。");
        $("#emp_pass").addClass("inp_error");
        result = false;
    }else if(emp_pass.length > 16){
        $("#emp_pass_error").html("* パスワードは16文字以内で入力してください。");
        $("#emp_pass").addClass("inp_error");
        result = false;
    }
    // 社員名
    if(emp_name == ""){
        $("#emp_name_error").html("* 社員名を入力してください。");
        $("#emp_name").addClass("inp_error");
        result = false;
    }else if(emp_name.length > 30){
        $("#emp_name_error").html("* 社員名は30文字以内で入力してください。");
        $("#emp_name").addClass("inp_error");
        result = false;
    }

    // 住所
    if(address == ""){
        $("#address_error").html("* 住所を入力してください。");
        $("#address").addClass("inp_error");
        result = false;
    }else if(address.length > 60){
        $("#address_error").html("* 住所は60文字以内で入力してください。");
        $("#address").addClass("inp_error");
        result = false;
    }

    // 生年月日
    if(birthday == ""){
        $("#birthday_error").html("* 生年月日を入力してください。");
        $("#birthday").addClass("inp_error");
        result = false;
    }else if(!birthday.match(/^\d{4}/\d{1,2}/\d{1,2}$/)){
        $("#birthday_error").html("* 正しい日付を入力してください。");
        $("#birthday").addClass("inp_error");
        result = false;
    }

    return result;
}

<form action="<%=request.getContextPath()%>/RegistCheck"
                    method="post"  onsubmit="return input_check();" class="regist_input">
                    <table class="emp_form">
                        <tr>
                            <th class="label">パスワード：</th>
                            <td class="input"><input type="password" id="emp_pass"
                                name="emp_pass"><br /><span id="emp_pass_error"
                                class="error_m"></span></td>
                        </tr>
                        <tr>
                            <th class="label">社員名：</th>
                            <td class="input"><input type="text" id="emp_name"
                                name="emp_name"><br /><span id="emp_name_error"
                                class="error_m"></span></td>
                        </tr>
                        <tr>
                            <th class="label">性別：</th>
                            <td class="input"><label><input type="radio"
                                    name="gender" value="1" checked="checked" />男性</label>&emsp;<label><input
                                    type="radio" name="gender" value="2" />女性</label></td>
                        </tr>
                        <tr>
                            <th class="label">住所：</th>
                            <td class="input"><input type="text" id="address"
                                name="address"><br /><span id="address_error" class="error_m"></span>
                            </td>
                        </tr>
                        <tr>
                            <th class="label">生年月日：</th>
                            <td class="input"><input type="text" id="birthday"
                                name="birthday">
                                <br /><span id="birthday_error"
                                class="error_m"></span></td>
                        </tr>
                        <tr>
                            <th class="label">権限：</th>
                            <td class="input"><label><input type="radio"
                                    name="authority" value="1" checked="checked" />一般</label>&emsp;<label><input
                                    type="radio" name="authority" value="2" />管理者</label></td>
                        </tr>
                        <tr>
                            <th class="label">部署名：</th>
                            <td class="input"><select name="dept_id">
                                    <option value="1">営業部</option>
                                    <option value="2">経理部</option>
                                    <option value="3">総務部</option>
                            </select></td>
                        </tr>
                    </table>
                    <input type="submit" value="登録"/>
                </form>

Answer 1

意外とこのチェックが難しいねんな…
このように明らかにおかしい値を入力しても、「25時って言えば、明日の1時だよね」みたいな解釈をされます。

> new Date(2018, 2, 35)
Wed Apr 04 2018 00:00:00 GMT+0900 (日本標準時)

文字列から作る場合もnew Date(文字列)の実装はブラウザ毎にまちまちな挙動であり、PHPのようによしなにやってくれるわけではありません。

Moment.jsというライブラリなら
Validationという日付が妥当か否かをチェックする機能が存在します。
これを使えば一撃なので検討してみてくださいね。

導入方法はブラウザの項目を見ながらcdn配布のスクリプトを読み込むだけです。

Answer 2

}else if(!birthday.match(/^\d{4}/\d{1,2}/\d{1,2}$/)){

正規表現は次の数値範囲を表すように修正するとして、

• 年 = 1桁以上(上限なし)
• 月 = 1-12
• 日 = 1-31

「new Date を通した後の数値」と「元の数値」を比較すれば、良いでしょう。

var date = new Date(yyyy, mm, dd);

if (date.getFullYear() === yyyy && date.getMonth() + 1 === mm && date.getDate() === dd) {
  console.log('valid');
}

Re: chaton さん

Answer 3

let str = '2400-2-29';
let reg = /^(?:(?!(?:[02468][1235679]|[13579][01345789])00[年\-/]0?2[月/\-](?:29|30)日?))(?:(?![0-9]{2}(?:[02468][1235679]|[13579][01345789])[年\-/]0?2[月/\-](?:29|30)日?))(?:(?![0-9]{4}[年\-/](?:0?2|0?4|0?6|0?9|11)[月/\-]31日?))([0-9]{4})[年\-/](0?[1-9]|1[0-2])[月/\-](0?[1-9]|[12][0-9]|3[01])日?$/;
let n;

let date = (n = reg.exec(str)) ? new Date (n[1], n[2]-1, n[3]): null;
console.log(date);

Answer 4

いくつか決めないといけない仕様があります

• セパレータはどこまで許すか？（/のみ？-OK？年月日など漢字OK？）
• 0フィルをどこまで許すか？(一桁の頭に0をつける？0001的なのもOK？)

たとえば「1999/1/1」のバリエーション

• 1999-1-1：ハイフン
• 1999-01-01：0フィル
• 1999-01-1：月か日のどちらかだけ0フィル
• 1999-1/1：ハイフンとスラッシュの併用
• 1999-001-012：２つ以上0フィルや２桁数字の0フィル

総じてnew Dateしてy,m,dを抜き出してその数値で正規表現するのがラクでしょう

["1999/01/01","1999-1-1","1999-12-32","1999-12-0"].forEach((birthday)=>{
  var b=new Date(birthday);
  var y=b.getFullYear();
  var m=b.getMonth()+1;
  var d=b.getDate();
  var reg=new RegExp("^"+y+"([/-])0?"+m+"(?:\1)0?"+d);
  console.log(birthday+":"+(birthday.match(reg)?"ok":"ng"));
});

あとは条件次第

追記

セパレータは/のみで、1992/01/01という形式のみ許可

という条件で

<script>
window.addEventListener('DOMContentLoaded', function(e){
  document.querySelector('[name=birthday]').addEventListener('change',function(e){
    var v=e.target.value;
    var b=new Date(v);
    var y=b.getFullYear();
    var m=b.getMonth()+1;
    var d=b.getDate();
    var reg=new RegExp("^"+y+"/"+(m+100).toString().substr(-2)+"/"+(d+100).toString().substr(-2)+"$");
    document.querySelector('#birthday_err').textContent=(v=="" || v.match(reg))?"":"err";
  });
});
</script>
<input type="text" name="birthday" pattern="\d{4}/\d{2}/\d{2}" placeholder="YYYY/MM/DD" size="10" required> <span id="birthday_err"></span>

Comments

[chaton]

ご回答ありがとうございます。
セパレータは/のみで、1992/01/01という形式のみ許可するようにしたいですm(__)m

[yambejp]

条件を合わせました