jQuery 日期 時間的驗證

又是一個在工作上遇到的問題了, 要對日期做出驗證 , 看使用者輸入的是不是正確的日期 , 還要在之後判定輸入的日期兩者不可相差1年 , 並是否包含今天．

DEMO :

現在時間 :

請輸入時間 : (格式yyyy/MM/dd)

~

Message :

為了呈現這些程式碼讓我花了快一個多小時呢... 還順便把整個版面都改掉了, 反正Plurk 跟ReadMore 好像根本沒在用XDD , 好啦... 好像有點用 ... 之後要不要加回來呢...(望
先來HTML, 沒啥特別的.

HTML 程式碼 : 

<div id="jQueryCheckDate" align="center">
<div class="demoArea">
<div id="infomation" class="box">
現在時間 : <span></span><br /><br />
請輸入時間 : (格式yyyy/MM/dd)
</div>
<input type="text" name="dtMap(fromDay)" value="2012/12/21" maxlength="10"/>
~
<input type="text" name="dtMap(endDay)" value="2012/12/30" maxlength="10"/>
<div id="Message" class="box"><br />Message : <br /><span></span></div>
</div>
</div>

CSS 程式碼:

#jQueryCheckDate .demoArea{
    background-color:rgba(224,224,224,0.6);
    border-radius:15px;
    padding:20px;
    width:310px;
    height:140px;
    text-align:left;
}

JavaScript 分兩部分,第一部分是初始化$(function(){})跟blur事件, 比較要注意的點就是我利用了jQuery Selector 的*= 來完成兩個日期輸入框只用一段程式碼XD, 用了this 來抓取目前blur的到底是哪個輸入框,這算是比較小偷懶的方式(?), 正常好像要用event.currentTarget來比較比較好XD

$(function(){
    date = new Date();
    var today = date.getFullYear()+"/"+(date.getMonth()+1)+"/"+date.getDate();
    $('#jQueryCheckDate #infomation span').append(today);
   
    $('#jQueryCheckDate [name*=dt]').blur(function(){
        var errors ="";
        var fromDay = $('#jQueryCheckDate [name=dtMap(fromDay)]').val();
        var endDay = $('#jQueryCheckDate [name=dtMap(endDay)]').val();
        if($(this).val()!=""){
            if(checkDate(fromDay) && checkDate(endDay)){
            //時間格式對了才來判斷跟另外一個日期的關係
                if(parseInt(fromDay.replace(/[\/]/g,""))>parseInt(endDay.replace(/[\/]/g,""))){
                    errors = $(this).val()==fromDay ? "起始日"+fromDay+"大於迄止日"+endDay : errors = "迄止日"+endDay+"小於起始日"+fromDay;
                }else if(parseInt(endDay.replace(/[\/]/g,""))-parseInt(fromDay.replace(/[\/]/g,""))>10000){
                    errors = "起始日"+fromDay+"和迄止日"+endDay+"相差一年";
                }else{
                    if(parseInt(fromDay.replace(/[\/]/g,""))>parseInt(today.replace(/[\/]/g,"")) || parseInt(endDay.replace(/[\/]/g,""))<parseInt(today.replace(/[\/]/g,""))){
                        errors = "輸入的日期不包含今天!";
                    }else{
                        errors = "輸入的日期包含今天!";
                    }
                }
            }else{
                errors = "時間格式錯誤!";
            }
        }
        $('#jQueryCheckDate #Message span').html(errors);
    });
});

第二段JavaScript 負責檢查日期有無錯誤, 這邊的重點則是用到了正規表示式 , 一開始看到文件真的會有種想說這O小叮噹的感覺...不過在一個早上的嘗試之後也漸漸的瞭解這東西在做什麼了, 首先要感謝 這篇 , 真的超有用的 !

另外這篇則是附上了正規表示式的格式 , 舉個最好的例子, replace取代字串中的字的時候,用單純字串下去比較會只取代他找到的第一個字, 這時候用正規表示式來做比較 , 就可以達到全部取代的功用唷~只要在最後面加上g就好了!

然後用()包起來搭配 | 就可以達到更加強大的效果唷  /^([0][13578])|([1][12])$/
這段就是判斷是否是 01 03 05 07 08 或是 11 12 ~ 可以省下陣列去比較呢~ 

function checkDate(dateString){
//重點 如果沒有用^開頭跟結尾$就不會是完全比對,而會是模糊比對了,另外\/要用[]隔起來XD
    if(/^\d{4}[\/]\d{2}[\/]\d{2}$/.test(dateString)){
        var temp = dateString.split("/");
        if(parseInt(temp[1],10)<13 && parseInt(temp[1],10)>0){
            if(/^([0][13578])|([1][12])$/.test(temp[1]))){
                if(parseInt(temp[2],10)==0 || parseInt(temp[2],10)>31){
                    return false;
                }
            }else{
                if(/^02$/.test(temp[1])){
                    if(parseInt(temp[0],10)%4==0){
                        if(parseInt(temp[2],10)==0 || parseInt(temp[2],10)>29){
                            return false;
                        }
                    }else {
                        if(parseInt(temp[2],10)==0 || parseInt(temp[2],10)>28){
                            return false;
                        }
                    }
                }else {
                    if(parseInt(temp[2],10)==0 || parseInt(temp[2],10)>30){
                        return false;
                    }
                }
            }
            return true;
        }else{
            return false;
        }
    }else{
        return false;
    }
}