web组件之日期格式校验

日期格式在一些注册表单中用的比较常见，但是严格意义上判断一个日期的格式是否合法，应该如何做呢。
一般，大家的第一个想法就是拿一个正则表达式去匹配，当然正则是行之有效的方法，但是如果正则的水平有限的话，这种方法还是会出问题的（本人的正则水平就很有限）。于是，结合了一个判断时间的方法后，日期格式校验就完成了，欢迎大家来尝试，吐槽。

1.主要发现正则只能匹配到日期的位数，但是像闰年，闰月，大小月，这些正则表达式我不会写，于是写了一个方法来解决。
废话不多说了直接上代码：

html代码

     <p>
        开始日期:<input class="form_control" type="text"  id="ldate" name="Ldate"
                    placeholder="2016-10-01" style="padding-top:3px; margin: 10px 36px 0 0px;">
    </p>
    <p>
        结束日期:<input class="form_control" type="text"  id="edate" name="Ldate"
                    placeholder="2016-10-31" placeholder=style="padding-top:3px;margin: 10px
                    36px 0 0px;">
    </p>

页面调用js代码：

   addLoadEvent(checkdate);
   function checkdate(){
     var ldate = g('ldate');
     var edate = g('edate');
     ldate.onblur = function(){
         IsDate(ldate);
     }
     edate.onblur = function(){
          IsDate(edate);
     }
   }

调用isDate()代码：

 /**
 * Created by MarlboroKayi on 2016-10-12.
 */
function addLoadEvent(func){
    var oldonload = window.onload;
    if(typeof window.onload != 'function'){
        window.onload = func;
    }
    else{
        window.onload = function(){
            oldonload();
            func();
        }
    }
}
function g(o_id){
    return document.getElementById(o_id);
}

function IsDate(obj) {
    var reg = /^(\d{4})-(0\d{1}|1[0-2])-(0\d{1}|[12]\d{1}|3[01])$/;
    var str = obj.value;
    if (str=="") return true;
    var tempArr = str.split('-');
    var yearR = parseInt(tempArr[0]),
        monthR = parseInt(tempArr[1]),
        dayR = parseInt(tempArr[2]);

    /*判断闰年*/
    var for4year;
    if(((yearR%100!=0) && (yearR%4==0))|| (yearR%400==0)){
        for4year = true;
    }
    else{
        for4year = false;
    }
    console.log(for4year);

    /*判断大小月*/
    if(((",1,3,5,7,8,10,12,").indexOf(","+monthR+",") != -1) && dayR<=31){
        console.log(("1,3,5,7,8,10,12").indexOf(monthR))
        clearWarning(obj);
    }
    else if((("4,6,9,11").indexOf(monthR) != -1) && dayR<=30){
        clearWarning(obj);
    }
    else if(dayR<29){
        clearWarning(obj);
    }
    else if(for4year && dayR<30){
        clearWarning(obj);
    }
    else if (!reg.test(str) || (monthR<1)){
        createWarning(obj);
    }
    else{
        createWarning(obj);
    }
    return true;
}

function clearWarning(obj){
    if(g('para_week')){
        var parent = obj.parentNode;
        //console.log(obj.nextSibling)
        parent.removeChild(obj.nextSibling);
    }
    return true;
}

function createWarning(obj){
    if(g('para_week')) return false;
    var para = document.createElement('p');
    para.setAttribute('id','para_week');
    var text = document.createTextNode('请保证输入的日期格式为yyyy-mm-dd或正确的日期!');
    para.appendChild(text);
    insertAfter(para,obj);
}

function insertAfter(newElement,targetElement){
    var parent = targetElement.parentNode;
    if(parent.lastChild == targetElement){
        parent.appendChild(newElement);
    }
    else{
        parent.insertBefore(newElement,targetElement.nextSibling);
    }
}

演示地址：
https://marlborokay.github.io/checkDate/

isDate() 接口地址：
https://github.com/marlboroKay/checkDate.git